/* ==========================================================================
   BLOKLAR — MEDYA: instagram · galeri · iletisim
   Token'lar ve ortak sınıflar temel.css'ten gelir; burada yalnız blok stilleri.
   ========================================================================== */

/* ==========================================================================
   1. INSTAGRAM — yatay kaydırmalı 9:16 reel şeridi (Konsept B "Atölyeden")
   ========================================================================== */
.insta .bolum-bas { margin-bottom: var(--s-5); }
.insta__ust {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-2); margin-bottom: var(--s-3);
}
.insta__not { margin: 0; font-size: var(--fs-sm); color: var(--renk-soluk); }
.insta__oklar { display: flex; gap: var(--s-1); margin-left: auto; }
html:not(.js) .insta__oklar { display: none; }

/* şerit: konteynerin oluğuna taşar, ilk kart başlıkla aynı hizada başlar */
.insta__serit {
  list-style: none; margin: 0 calc(var(--gutter) * -1);
  padding: var(--s-1) var(--gutter) var(--s-3);
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(200px, 58vw, 264px); gap: var(--s-2);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--renk-cizgi-guclu) transparent;
}
.insta__serit::-webkit-scrollbar { height: 6px; }
.insta__serit::-webkit-scrollbar-thumb { background: var(--renk-cizgi-guclu); border-radius: 3px; }
.insta__serit:focus-visible { outline: 2px solid var(--renk-odak); outline-offset: 2px; border-radius: var(--r-md); }
.insta__oge { scroll-snap-align: start; min-width: 0; }

.reel {
  position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; isolation: isolate;
  border-radius: var(--r-md); background: var(--c-brand-deep); color: var(--c-on-dark); text-decoration: none;
}
.reel img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.reel::after {
  content: ""; position: absolute; inset: 35% 0 0 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, var(--c-gorsel-perde-0), var(--c-gorsel-perde-1) 55%);   /* yazı bloğu tam perdede kalır (AA) */
}
.reel__govde {
  position: absolute; z-index: 2; left: var(--s-2); right: var(--s-2); bottom: var(--s-2);
  display: grid; gap: .25rem; color: var(--c-on-dark);
}
.reel__no { font-family: var(--f-serif); font-style: italic; font-size: var(--fs-sm); }
.reel__yazi {
  font-weight: 600; font-size: var(--fs-sm); line-height: 1.35;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.reel__oynat {
  position: absolute; z-index: 2; top: var(--s-2); right: var(--s-2);
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--c-cam); color: var(--c-brand);
  transition: transform var(--t-med) var(--ease);
}
.reel__oynat .ikon { width: 20px; height: 20px; }
@media (hover: hover) {
  a.reel:hover img { transform: scale(1.05); }
  a.reel:hover .reel__oynat { transform: scale(1.1); }
}
a.reel:focus-visible { outline: 2px solid var(--renk-odak); outline-offset: 3px; }

/* sondaki "takip edin" kartı */
.reel--takip {
  display: grid; align-content: space-between; gap: var(--s-3); padding: var(--s-3);
  background: var(--c-powder); color: var(--c-brand);
  transition: background-color var(--t-med) var(--ease);
}
.reel--takip::after { display: none; }
.reel--takip:hover { background: var(--c-powder-deep); }
.reel__takip-govde { display: block; }
.reel__kullanici {
  display: block; font-family: var(--f-serif); font-size: 1.75rem; line-height: 1.1; letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.reel__takip-yazi { display: block; margin-top: var(--s-1); font-size: var(--fs-sm); color: var(--c-text); }
.bolum--pudra .reel--takip { background: var(--c-surface); }
.bolum--pudra .reel--takip:hover { background: var(--c-paper); }

.insta__alt { margin: var(--s-2) 0 0; display: flex; justify-content: flex-end; }
.insta__alt .ok-bag .ikon:last-child { width: 16px; height: 16px; }
.insta__alt .ok-bag:hover .ikon:first-child { transform: none; }

/* ==========================================================================
   2. GALERİ — duyarlı ızgara, 4:3 kırpma, büyüteç
   ========================================================================== */
.galeri__izgara {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s-2); grid-template-columns: repeat(2, minmax(0, 1fr));
}
.galeri__izgara--tek { grid-template-columns: minmax(0, 1fr); max-width: var(--container-dar); }
@media (max-width: 419px) {
  .galeri__izgara { gap: var(--s-1); }
}
@media (min-width: 760px) {
  .galeri__izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .galeri__izgara--cift { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galeri__izgara--tek { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1200px) {
  .galeri__izgara:not(.galeri__izgara--cift):not(.galeri__izgara--tek) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.galeri__oge { min-width: 0; }
.galeri__sekil { margin: 0; display: grid; gap: .625rem; }
.galeri__bag {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--r-md); background: var(--c-brand-deep); cursor: zoom-in;
}
.galeri__bag img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.galeri__buyut {
  position: absolute; right: var(--s-1); bottom: var(--s-1);
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--c-cam); color: var(--c-brand);
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
@media (hover: hover) {
  .galeri__bag:hover img { transform: scale(1.04); }
  .galeri__bag:hover .galeri__buyut { opacity: 1; transform: none; }
}
.galeri__bag:focus-visible { outline: 2px solid var(--renk-odak); outline-offset: 3px; }
.galeri__bag:focus-visible .galeri__buyut { opacity: 1; transform: none; }
@media (hover: none) { .galeri__buyut { opacity: 1; transform: none; } }
.galeri__aciklama { font-size: var(--fs-sm); line-height: 1.45; color: var(--renk-soluk); overflow-wrap: anywhere; }

/* ==========================================================================
   3. İLETİŞİM — kanallar · harita yer tutucusu · WhatsApp formu
   ========================================================================== */
.iletisim__izgara { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
.iletisim__izgara:not(.iletisim__izgara--ikili) { max-width: var(--container-dar); }
.iletisim__bilgi { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
@media (min-width: 960px) {
  .iletisim__izgara--ikili { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: var(--s-8); align-items: start; }
}

/* kanallar — editoryal satır listesi */
.iletisim__satirlar { font-style: normal; border-top: 1px solid var(--renk-cizgi-guclu); }
.iletisim__satir {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem;
  padding-block: var(--s-3); border-bottom: 1px solid var(--renk-cizgi-guclu);
}
@media (min-width: 560px) {
  .iletisim__satir { grid-template-columns: 160px minmax(0, 1fr); gap: var(--s-2); align-items: baseline; }
}
.iletisim__etiket {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-etiket); text-transform: uppercase;
  color: var(--renk-vurgu);
}
.iletisim__deger { min-width: 0; font-size: 1.0625rem; color: var(--renk-metin); overflow-wrap: anywhere; }
.iletisim__deger a { color: inherit; text-decoration: none; }
.iletisim__bag { border-bottom: 1px solid var(--renk-cizgi-guclu); transition: border-color var(--t-fast), color var(--t-fast); }
.iletisim__bag:hover { border-color: var(--renk-vurgu); color: var(--renk-vurgu); }
.iletisim__deger--buyuk {
  display: flex; flex-wrap: wrap; align-items: center; gap: .375rem var(--s-2);
  font-family: var(--f-serif); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.2;
  color: var(--renk-baslik); font-variant-numeric: lining-nums;
}
.iletisim__deger--buyuk > a { display: inline-flex; align-items: center; min-height: 44px; }
.iletisim__deger--buyuk > a:hover { color: var(--renk-vurgu); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.iletisim__yan { display: inline-flex; flex-wrap: wrap; gap: .5rem; font-family: var(--f-sans); }
.iletisim__yan a {
  display: inline-flex; align-items: center; gap: .375rem; min-height: 44px; padding: 0 .875rem;
  border: 1.5px solid var(--renk-cizgi-guclu); border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1; color: var(--renk-vurgu);
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.iletisim__yan a .ikon { width: 18px; height: 18px; }
.iletisim__yan a:hover { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-on-dark); }

.iletisim__saat-kap { display: grid; gap: var(--s-2); justify-items: start; }
.iletisim__saatler { display: grid; gap: .25rem; margin: 0; width: 100%; max-width: 320px; }
.iletisim__saatler > div { display: flex; justify-content: space-between; gap: var(--s-2); }
.iletisim__saatler dt { color: var(--renk-metin); }
.iletisim__saatler dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--renk-metin); text-align: right; }

/* harita yer tutucusu — pastel sokak ızgarası; iframe yalnız onayla/tıklamayla */
.iletisim__harita { display: grid; gap: var(--s-1); min-width: 0; }
.harita {
  position: relative; display: grid; isolation: isolate; overflow: hidden; min-height: 340px;
  border-radius: var(--r-lg); border: 1px solid var(--c-line); background: var(--c-surface);
}
.iletisim__harita--buyuk .harita { min-height: clamp(320px, 42vw, 460px); }
.harita__cizim { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.harita__zemin { fill: var(--c-paper); }
.harita__su { fill: var(--c-mist); }
.harita__cadde { fill: none; stroke: var(--c-sand); stroke-width: 18; stroke-linecap: round; }
.harita__sokak { fill: none; stroke: var(--c-sand-deep); stroke-opacity: .45; stroke-width: 7; stroke-linecap: round; }
.harita__park { fill: var(--c-sage); }
.harita__hale { fill: var(--c-brand); fill-opacity: .1; }
.harita__hale--ic { fill-opacity: .16; }
.harita__igne { fill: var(--c-brand); }
.harita__igne-goz { fill: var(--c-bg); }
.harita__kart {
  align-self: end; justify-self: start; display: grid; gap: .25rem; justify-items: start;
  margin: var(--s-2); padding: var(--s-2) var(--s-3); max-width: calc(100% - var(--s-4));
  border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); box-shadow: var(--sh-soft);
}
.harita__ad { color: var(--c-brand); font-weight: 600; }
.harita__adres { font-size: var(--fs-xs); line-height: 1.5; color: var(--c-muted); }
.harita__dugme { margin-top: .5rem; }
.harita iframe { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; }
.harita--yuklu .harita__kart, .harita--yuklu .harita__cizim { display: none; }
.harita--yuklu { min-height: 340px; }
.harita__alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s-2); }
.harita__not { margin: 0; flex: 1 1 16rem; font-size: var(--fs-xs); line-height: 1.5; color: var(--renk-soluk); }
.harita__yol .ikon { transition: none; }
.harita__yol:hover .ikon { transform: none; }

/* WhatsApp formu — sunucuya veri gitmez */
.wa-form {
  display: grid; gap: var(--s-3); align-content: start; min-width: 0;
  padding: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  border-radius: var(--r-xl); background: var(--c-surface); color: var(--c-text); box-shadow: var(--sh-soft);
}
.wa-form__baslik { font-size: var(--fs-h3); }
.wa-form__giris { margin: -.5rem 0 0; font-size: var(--fs-sm); color: var(--c-muted); }
.wa-form__gizlilik {
  display: flex; align-items: flex-start; gap: .625rem; margin: 0;
  font-size: var(--fs-xs); line-height: 1.5; color: var(--c-muted);
}
.wa-form__gizlilik .ikon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--c-brand); }
.wa-form__js-yok { margin: 0; font-size: var(--fs-sm); color: var(--c-text); }
/* JS yokken form yerel GET ile wa.me'ye alan verisi yollamasın: yalnız noscript bağlantısı kalır */
html:not(.js) .wa-form .alan, html:not(.js) .wa-form button[type="submit"] { display: none; }

@media print {
  .insta__ust, .insta__alt, .harita__dugme, .harita__not, .wa-form { display: none !important; }
  .insta__serit { overflow: visible; grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; }
}