/* =============================================================================
   MIEM DESIGN — vitrin kimliği
   Kaynak: docs/2026-09-30/tasarim-onayi-pafta.html (onaylanan tasarım)
   Palet ve tipografi müşterinin kendi v9 dosyasından alınmıştır.

   ⚠️ FONTLAR SELF-HOST. Google Fonts'a bağlantı YOK — layout'taki gerekçe:
      ziyaretçinin IP adresi Google'a taşınır (KVKK). Dosyalar wwwroot/fonts
      altındadır; latin + latin-ext yüklenir (Türkçe karakterler latin-ext'te).
   ============================================================================= */

/* cormorant-garamond-italic · latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-italic-latin-ext-1.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* cormorant-garamond-italic · latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-italic-latin-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cormorant-garamond-italic · latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-italic-latin-ext-3.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* cormorant-garamond-italic · latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/cormorant-garamond-italic-latin-4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* jost · latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/jost-latin-ext-1.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* jost · latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/jost-latin-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* jost · latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jost-latin-ext-3.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* jost · latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jost-latin-4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* jost · latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jost-latin-ext-5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* jost · latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jost-latin-6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* fraunces · latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/fraunces-latin-ext-1.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* fraunces · latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/fraunces-latin-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* fraunces · latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/fraunces-latin-ext-3.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* fraunces · latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/fraunces-latin-4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* fraunces · latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/fraunces-latin-ext-5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* fraunces · latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/fraunces-latin-6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- jetonlar */
/* ------------------------------------------------------------- menü yazısı
   Archivo Black (SIL Open Font License 1.1) — menü adlarının karakteri.
   Google Fonts'tan DEĞİL, wwwroot/fonts altından servis edilir: ziyaretçinin
   IP'si Google'a gitmez (dosyanın başındaki KVKK gerekçesinin aynısı).

   ⚠️ BURADA ÖNCE EL YAZISI BİR FONT (Shantell Sans) VARDI VE KALDIRILDI.
   İki sebep: (1) müşteri menüde bu ağır büyük-harf karakteri istedi,
   (2) el yazısı 12 menü başlığını masaüstünde taşırıyordu — geniş harf
   gövdesi yüzünden "Ölçüye Özel Talep" üç satıra bölünüyordu. Archivo
   Black büyük harfte hem istenen ağırlığı veriyor hem 116 KB yerine
   16 KB. Kullanılmayan font dosyası bırakılmadı; duran dosya indirilir.

   Tek ağırlık (400) vardır — Archivo Black'in kendisi zaten siyahtır.
   `font-weight: bold` YAZMAYIN: tarayıcı sentetik kalınlaştırma uygular
   ve harfler bulanıklaşır. */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/archivo-black-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/archivo-black-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper:      #F2EEE6;   /* kâğıt zemin */
  --paper-2:    #E9E3D8;
  --sheet:      #FBF9F5;   /* kart yüzeyi */
  --ink:        #171410;
  --muted:      #8A8073;
  --line:       #D8CFBF;
  /* 10.10.2026 onaylı: fıstık yeşili (eski çam yeşili #33604A / #8AAE97 / #EDF3EF) */
  --accent:     #A6A864;   /* marka yeşili */
  --accent-soft:#5B5A2A;   /* açık zeminde koyu vurgu */
  --accent-tint:#F4F3E3;
  --accent-degrade: linear-gradient(90deg, #A6A864 0%, #C6C78F 45%, #E4E4C2 100%);
  --accent-murekkep: #2B2A16; /* yeşil zemin üstündeki yazı */
  --sand:       #DACBB4;   /* teknik çizim zemini */
  --walnut:     #5E4028;
  --warn:       #9A6B2F;
  --bad:        #8C3A2B;

  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --mark:    'Cormorant Garamond', Georgia, serif;
  --body:    'Jost', 'Helvetica Neue', Arial, sans-serif;
  --mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --nav:     'Archivo Black', 'Arial Black', 'Helvetica Neue', sans-serif;
}

/* ------------------------------------------------------------------- temel */
body {
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  /* 10.10.2026: kısa sayfalarda alt bilgi ekranın en altına oturur — pembe
     alt bilgiden sonra boş krem şerit kalmaz. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }
h1, h2, h3 { font-family: var(--display); font-weight: 300; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-size: clamp(30px, 5.5vw, 52px); line-height: 1.06; }
h2 { font-size: clamp(24px, 3.4vw, 34px); line-height: 1.15; }
h3 { font-size: 20px; line-height: 1.3; }
a  { color: var(--accent); }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ------------------------------------------------------------------- marka */
.marka-ad, .site-basligi a, header .logo {
  font-family: var(--mark);
  font-style: italic;
  font-weight: 400;
  font-size: 31px;
  color: var(--accent);
  letter-spacing: .005em;
  text-decoration: none;
}
.marka-alt {
  display: block;
  font: 400 8.5px/1 var(--mono);
  letter-spacing: .34em;
  color: var(--muted);
  text-transform: lowercase;
  margin-top: 2px;
}

/* üst şerit — atölye vaadi */
.ust-serit {
  /* 10.10.2026 onaylı: fıstık kabuğu pembesi — koyu bordo ortada, iki yana açık güle */
  background: var(--ink);
  /* 10.10.2026 son karar: ilk pembe degrade (şarap tonu denendi, geri dönüldü) */
  background: linear-gradient(90deg, #B8627C 0%, #8E3352 30%, #6B1F3B 50%, #8E3352 70%, #B8627C 100%);
  color: #FBF9F5;
  font: 500 10.5px/1 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 11px 16px;
  text-align: center;
}
.ust-serit span { margin: 0 15px; display: inline-block; }

/* ⚠️ MOBİLDE SATIRLAR BİRBİRİNE GİRİYORDU. Sebep `font: ...10.5px/1` —
   satır yüksekliği 1, yani harf gövdesiyle birebir. Tek satıra sığdığı
   sürece sorun yok; üç vaat dar ekranda alt alta sardığında büyük harfler
   ve Türkçe şapkalı harfler üst üste bindi. Çözüm satır yüksekliği;
   metni kısaltmak ya da vaatlerden birini gizlemek DEĞİL — üçü de
   müşterinin satış vaadi. */
@media (max-width: 700px) {
  .ust-serit {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px 16px;
    line-height: 1.5;
    letter-spacing: .14em;
    padding: 9px 14px;
  }
  .ust-serit span { margin: 0; }
}

/* ------------------------------------------------------------- pafta başlık */
.sayfa-basligi { margin-bottom: 34px; }
.sayfa-basligi p { color: var(--muted); max-width: 62ch; }
.kirinti { font: 400 12px/1 var(--body); color: var(--muted); margin-bottom: 16px; }
.kirinti a { color: var(--muted); text-decoration: none; }
.kirinti a:hover { color: var(--accent); }
.kirinti-ayrac { margin: 0 7px; }

.kapsayici { max-width: 1180px; margin: 0 auto; padding-inline: 20px; }
.bolum { padding-block: 54px; }

/* ------------------------------------------------------------ ürün ızgarası */
.urun-izgara {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
}
.urun-kart {
  display: flex; flex-direction: column;
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.urun-kart-bag { text-decoration: none; color: inherit; display: block; position: relative; }
.urun-kart-bag img { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block; background: var(--paper-2); }
.urun-kart-cizim { width: 100%; aspect-ratio: 2/3; background: var(--sand); }
/* İkinci fotoğraf (v1.2.3) — kapağın üstünde saydam durur, fare gelince belirir.
   ⚠️ Yalnızca (hover: hover) cihazlarda: dokunmatik ekranda ilk dokunuş
   "üzerine gelme" sayılır ve kart ikinci dokunuşa kadar açılmazdı. */
.urun-kart-bag .ikinci-gorsel { position: absolute; top: 0; left: 0; z-index: 0;
  opacity: 0; transition: opacity .45s ease; pointer-events: none; }
@media (hover: hover) {
  .urun-kart:hover .ikinci-gorsel, .urun-kart-bag:focus-visible .ikinci-gorsel { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .urun-kart-bag .ikinci-gorsel { transition: none; } }
/* Başlık ve altındaki metinler kartın ÜST bloğudur; esnemezler.
   Esneme payı aşağıdaki .urun-fiyat'ın `margin-top: auto`'sundadır. */
.urun-kart h2 { font-size: 20px; margin: 14px 16px 0; }
.urun-kart p { margin: 5px 16px 0; }
.urun-kod { font: 500 10px/1 var(--mono); letter-spacing: .12em; color: var(--muted); }
.urun-olcu { font: 400 12px/1.5 var(--mono); color: var(--muted); }
.urun-malzeme { font-size: 13px; line-height: 1.5; color: var(--muted); }
/* ⚠️ KART İÇİ HİZALAMA. Ürün adları, ölçü metinleri ve malzeme satırları
   farklı uzunlukta; serbest bırakıldığında fiyat satırı ve "Sepete ekle"
   düğmesi her kartta BAŞKA YÜKSEKLİKTE duruyordu (iki satırlık ölçüsü olan
   MD-010 ötekilerden aşağıda kalıyordu). Izgara satırındaki kartlar aynı
   yüksekliğe gerildiği için çözüm, fiyat bloğunu dibe itmektir:
     • .urun-fiyat'a `margin-top: auto` → üstündeki boşluğu o yutar
     • bu yüzden kart gövdesinin ESNEK olması gerekir (.urun-kart zaten
       flex-column; metinler sabit, fiyat esner)
   Böylece tüm kartlarda fiyat ve düğme AYNI hizada oturur. */
.urun-fiyat {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin: 14px 16px 0 !important;
  margin-top: auto !important;
  padding-top: 14px;
}
/* ⚠️ `white-space: nowrap` ZORUNLU. Uzun bir durum rozeti ("ÖLÇÜYE ÖZEL ·
   21 GÜN") satırı sıkıştırınca fiyat "14.800" ve "₺" diye İKİYE BÖLÜNÜYORDU.
   Tutarın ortasından bölünmesi okunurluk sorunu değil, güven sorunudur. */
.fiyat {
  font: 500 17px/1 var(--mono); font-variant-numeric: tabular-nums;
  white-space: nowrap; flex: 0 0 auto;
}
/* İNDİRİM (v1.2.2) — referans fiyat satış fiyatından büyükse.
   Liste fiyatı üzeri çizili, satış fiyatı kiremit; görselin köşesinde yüzde. */
.fiyat-grup { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fiyat-eski { font: 400 12px/1 var(--mono); color: var(--muted); white-space: nowrap;
              text-decoration: line-through; text-decoration-thickness: 1px; }
.fiyat.indirimli { color: var(--indirim, #9A3B1E); }
.indirim-etiket { position: absolute; left: 12px; top: 12px; z-index: 1;
                  background: var(--indirim, #9A3B1E); color: #fff;
                  font: 500 11px/1 var(--mono); letter-spacing: .1em; padding: 7px 9px; }
.indirim-etiket.satir-ici { position: static; align-self: center; }
.indirim-kazanc { color: var(--indirim, #9A3B1E); font-size: 14px; margin: 6px 0 0; }
.gorunmez { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.urun-bilgi .fiyat-eski { font-size: 16px; }
/* EKİP SAYFASI TANITIM METNİ (v1.2.4) — ana sayfa karşılamasıyla aynı dil:
   h4 = üst etiket (çizgili, mono, büyük harf), h2 = başlık, p = okunur paragraf */
.sema-tanitim { max-width: 680px; margin: 28px 0 44px; }
.sema-tanitim h4 { font: 500 10.5px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase;
                   color: var(--muted); margin: 0 0 18px; position: relative; padding-left: 46px; }
.sema-tanitim h4::before { content: ""; position: absolute; left: 0; top: 50%; width: 34px; height: 1px; background: var(--line); }
.sema-tanitim h2 { font-size: clamp(28px, 4.4vw, 44px); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 22px; }
.sema-tanitim p { font-size: 17px; line-height: 1.75; color: #3c352d; margin: 0 0 16px; }
/* Kök kutu (Kurumsal Kimlik → lider): imza biçimi — kalın ad · soluk unvan. */
.sema-kutu-kok { font-size: 17px; margin: 0 0 32px; }
.sema-kutu-kok .sema-ad { color: var(--ink); font-weight: 700; }
.sema-kutu-kok .sema-unvan { color: var(--muted); }
.sema-kutu-kok .sema-unvan::before { content: " · "; }

/* ÜRÜN SAYFASI: ÖLÇÜ · MATERYAL · STOK (v1.2.3) — yeşil kutucuklar */
.secim-grubu { margin: 22px 0 0; }
.secim-baslik { font: 400 15px/1.2 'Jost', system-ui, sans-serif; color: var(--ink); margin: 0 0 10px; }
.kutucuklar { display: flex; flex-wrap: wrap; gap: 8px; }
.kutucuk { display: inline-block; background: var(--accent); color: var(--sheet); border-radius: 2px;
           font: 400 13.5px/1.25 'Jost', system-ui, sans-serif; padding: 10px 14px; }
.stok-metin { margin: 0; font: 400 14px/1.4 'Jost', system-ui, sans-serif; }
.stok-hazir  { color: var(--accent); }
.stok-uretim { color: #8A5A1E; }
.stok-yok    { color: var(--muted); }

/* İNDİRİM ROZETİ (v1.2.3) — sol alt köşe */
.kampanya-rozet { position: fixed; left: 20px; bottom: 20px; z-index: 60; display: flex; align-items: center; gap: 4px;
                  background: var(--accent); color: var(--sheet); border-radius: 6px;
                  box-shadow: 0 6px 24px rgba(0, 0, 0, .18); font: 500 16px/1 'Jost', system-ui, sans-serif; }
.kampanya-metin { color: inherit; text-decoration: none; padding: 14px 4px 14px 18px; }
a.kampanya-metin:hover { text-decoration: underline; text-underline-offset: 3px; }
.kampanya-kapat { background: none; border: 0; color: inherit; font-size: 20px; line-height: 1; cursor: pointer;
                  padding: 12px 14px 12px 8px; opacity: .85; }
.kampanya-kapat:hover { opacity: 1; }
@media (max-width: 600px) { .kampanya-rozet { left: 12px; bottom: 12px; font-size: 14px; } }
@media print { .kampanya-rozet { display: none; } }

/* RENK SEÇİMİ (v1.2.2) */
.renk-secimi { margin: 24px 0 20px; }
.renk-baslik { font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.renk-secili { font: 400 15px/1 'Jost', system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: var(--ink); margin-left: 8px; }
.renk-secimi.uyar .renk-secili { color: var(--indirim, #9A3B1E); }
.renk-daireler { display: flex; flex-wrap: wrap; gap: 12px; }
.renk-daire { width: 38px; height: 38px; border-radius: 50%; padding: 0; cursor: pointer;
              background: var(--renk); border: 1px solid rgba(0, 0, 0, .18); outline-offset: 4px; }
.renk-daire[aria-checked="true"] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.renk-secimi.uyar .renk-daire { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--indirim, #9A3B1E); }
.galeri-ana > img.renk-gorsel { opacity: 1; z-index: 1; }
.sepet-renk { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); margin: 4px 0 0; }
.renk-nokta { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .2); flex: 0 0 auto; }
.sepet-tutar:has(.fiyat-eski) { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.urun-durum {
  font: 500 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted);
  /* Rozet kırpılmak yerine KENDİ İÇİNDE sarar; fiyat hep tek parça kalır. */
  text-align: center; min-width: 0; line-height: 1.35;
}
.urun-ekle { margin: 14px 16px 16px; }

/* ------------------------------------------------------------------ düğmeler */
.dugme-birincil, .dugme-ikincil {
  display: inline-block;
  border: 1px solid var(--accent);
  border-radius: 2px;
  padding: 11px 18px;
  font: 500 11px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s, color .18s;
}
.dugme-birincil { background: var(--accent); color: var(--paper); }
.dugme-birincil:hover:not(:disabled) { background: transparent; color: var(--accent); }
.dugme-birincil:disabled { opacity: .5; cursor: default; }
.dugme-ikincil { background: transparent; color: var(--accent); }
.dugme-ikincil:hover { background: var(--accent); color: var(--paper); }

/* --------------------------------------------------------------- ürün detay */
.urun-detay-govde { display: grid; gap: 38px; }
@media (min-width: 900px) { .urun-detay-govde { grid-template-columns: 1fr 1fr; gap: 54px; } }
/* Ürün galerisi (v1.2.1) — büyük görsel + küçük resimler.
   Görseller üst üste durur; görünen .aktif (JS) ya da :target (JS'siz). */
.urun-galeri { display: flex; flex-direction: column; gap: 12px; }
.galeri-ana { position: relative; aspect-ratio: 2 / 3; overflow: hidden; border: 1px solid var(--line);
              border-radius: 2px; background: var(--paper-2); touch-action: pan-y; }
.galeri-ana > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
                    opacity: 0; transition: opacity .35s ease; }
.galeri-ana > img.aktif { opacity: 1; }
.galeri-ana:has(> img:target) > img { opacity: 0; }
.galeri-ana > img:target { opacity: 1; }
.galeri-ok { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px;
             border-radius: 50%; border: 1px solid var(--line); background: rgba(251, 249, 245, .92);
             color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; opacity: 0;
             transition: opacity .2s; display: flex; align-items: center; justify-content: center; }
.galeri-ana:hover .galeri-ok, .galeri-ok:focus-visible { opacity: 1; }
@media (hover: none) { .galeri-ok { opacity: 1; } }
.galeri-geri { left: 12px; } .galeri-ileri { right: 12px; }
.galeri-sayac { position: absolute; right: 12px; bottom: 12px; font: 400 11px/1 var(--mono, ui-monospace, monospace);
                letter-spacing: .1em; background: rgba(251, 249, 245, .92); padding: 6px 8px; border-radius: 2px; }
.galeri-kucukler { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.galeri-kucukler a { display: block; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--line);
                     background: var(--paper-2); opacity: .6; transition: opacity .2s, box-shadow .2s; }
.galeri-kucukler a:hover, .galeri-kucukler a[aria-current="true"] { opacity: 1; }
.galeri-kucukler a[aria-current="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.galeri-kucukler img { width: 100%; height: 100%; object-fit: cover; display: block; }
.urun-bilgi .urun-ozet { color: var(--muted); font-size: 17px; max-width: 46ch; }
.urun-bilgi .urun-fiyat { margin: 22px 0 0 !important; justify-content: flex-start; gap: 16px; }
.urun-bilgi .fiyat { font-size: 26px; }
.urun-kunye {
  display: grid; grid-template-columns: auto 1fr; gap: 9px 20px;
  margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line);
}
.urun-kunye dt { font: 500 9.5px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.urun-kunye dd { margin: 0; font-size: 15px; }
.urun-aciklama { margin-top: 26px; }

/* =====================================================================
   DÜZ YAZI — İKİ YANA YASLAMA (kullanıcı isteği 12.10.2026: "simetri iyi olsa")

   Sağ kenar da düz olunca metin bloğu, yanındaki fotoğraf ve künye
   sütunlarının düz kenarlarıyla hizalanıyor; sayfa simetrik duruyor.

   ⚠️ HANGİ KAPLAR — ÖLÇÜLEREK SEÇİLDİ, tahminle değil. Sitedeki 31 sayfa
   tarandı ve çok satırlı her düz yazı bloğunun GERÇEK genişliği ölçüldü
   (1280px görünümde). Yaslama ancak satıra yeterince kelime sığdığında
   iyi görünür; dar sütunda boşluklar orantısız açılır ve metinde gözle
   görülür beyaz "nehirler" oluşur. Ölçüm:
       .sayfa-govde ........ 1140px   ✓ yaslandı
       .sema-tanitim ....... 680px    ✓ yaslandı
       .hg-kapanis-metin ... 565px    ✓ yaslandı
       .urun-aciklama ...... 543px    ✓ yaslandı
       .hg-ozet ............ 453px    ✓ yaslandı (hizmet sayfasında
                                        .hg-kapanis-metin ile yan yana
                                        görünüyor; biri yaslı biri değil
                                        olsaydı sayfa tutarsız dururdu)
       .hero-alt ........... 469px    ✗ BIRAKILDI — büyük başlığın altındaki
                                        tanıtım satırı; düz yazı değil,
                                        sergileme metni
       .gy-metin ........... 384px    ✗ BIRAKILDI — çok dar, yaslanırsa dağılır

   ⚠️ `hyphens: auto` ONSUZ YAPILMAZ. Türkçedeki uzun kelimelerle
   ("dönüştürür", "farklılıklar") kelime araları aşırı açılır; tireleme
   kelimeleri bölerek bunu engeller. Tirelemenin Türkçe kurallarıyla
   çalışması için dil etiketi gerekir — sayfanın kökünde lang="tr" var.

   ⚠️ DAR EKRANDA YASLAMA KAPATILIR: telefonda satıra az kelime sığdığı
   için boşluklar orantısız açılır. Altta sola hizalamaya dönülüyor.
   ===================================================================== */
.urun-aciklama, .urun-aciklama p,
.sayfa-govde,   .sayfa-govde p,
.sema-tanitim,  .sema-tanitim p,
.hg-kapanis-metin, .hg-kapanis-metin p,
.hg-ozet {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

@media (max-width: 640px) {
  .urun-aciklama, .urun-aciklama p,
  .sayfa-govde,   .sayfa-govde p,
  .sema-tanitim,  .sema-tanitim p,
  .hg-kapanis-metin, .hg-kapanis-metin p,
  .hg-ozet {
    text-align: left;
    hyphens: manual;
    -webkit-hyphens: manual;
  }
}

/* -------------------------------------------------------------------- sepet */
.sepet-satirlar { display: flex; flex-direction: column; gap: 16px; margin-bottom: 26px; }
.sepet-satir {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--sheet); border: 1px solid var(--line); border-radius: 2px; padding: 14px;
}
.sepet-satir img { width: 64px; height: 88px; object-fit: cover; border: 1px solid var(--line); }
.sepet-bilgi { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.sepet-bilgi h3 { font-size: 18px; margin: 0; }
.sepet-adet { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 2px; width: max-content; }
.sepet-adet button { border: 0; background: transparent; color: var(--ink); padding: 4px 11px; font: 500 14px/1 var(--mono); cursor: pointer; }
.sepet-adet span { padding: 4px 11px; border-inline: 1px solid var(--line); font: 500 13px/1 var(--mono); font-variant-numeric: tabular-nums; }
.sepet-tutar { font: 500 16px/1 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

.sepet-toplam {
  display: grid; grid-template-columns: 1fr auto; gap: 9px 20px;
  max-width: 420px; margin-left: auto;
  padding-top: 18px; border-top: 1px solid var(--line);
}
.sepet-toplam dt { font: 500 10px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sepet-toplam dd { margin: 0; text-align: right; font: 500 15px/1.6 var(--mono); font-variant-numeric: tabular-nums; }

/* --- Ödeme düzeni -----------------------------------------------------
   ⚠️ Önce her şey TEK DAR SÜTUNDA yığılıydı (.siparis-form max-width:620px)
   ve geniş ekranda sağ yarı bomboş kalıyordu; sayfa bitmemiş görünüyordu.
   Artık solda form, sağda yapışkan sepet özeti.

   DOM'da özet FORMDAN ÖNCE durur ve bu bilinçlidir: dar ekranda önce ne
   aldığını görmek, sonra form doldurmak doğru sıradır. Geniş ekranda sıra
   `order` ile çevrilir — işaretleme değil, yalnızca yerleşim değişir. */
.sepet-duzen { display: block; }

@media (min-width: 900px) {
  .sepet-duzen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 48px;
    align-items: start;
  }
  .sepet-ozet  { order: 2; position: sticky; top: 24px; }
  .sepet-islem { order: 1; min-width: 0; }
  /* ⚠️ KÜNYEYE DE `order` VERİLMEK ZORUNDA. Verilmeyince varsayılan 0 olur
     ve order:1/2 taşıyan kardeşlerinin ÖNÜNE geçer: satıcı künyesi
     formun üstüne çıkmıştı. Flex/grid'de bir kardeşe order verildiği an,
     sıralama artık DOM sırası değildir — hepsi tanımlanmalıdır. */
  .satici-kunye { order: 3; grid-column: 1 / -1; margin-top: 8px; }
}

/* Özet bir kart gibi toplanır; sayfadan ayrı bir nesne olduğu okunsun. */
@media (min-width: 900px) {
  .sepet-ozet {
    background: var(--sheet);
    border: 1px solid var(--line);
    padding: 22px 22px 18px;
  }
  .sepet-ozet .sepet-satirlar { margin-bottom: 18px; }
  .sepet-ozet .note { margin-top: 12px; }
}

/* ⚠️ Form artık kendi sütununda; sabit 620px genişlik KALDIRILDI.
   Bırakılsaydı sütun geniş olduğunda form yine sola sıkışırdı. */
.siparis-form { margin-top: 0; }
.siparis-form > h2:first-child { margin-top: 0; }

/* Başlıklar bölüm ayracı gibi dursun — form uzun, ritim gerekiyor. */
.siparis-form h2 {
  margin: 34px 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 22px;
}
.siparis-form > h2:first-of-type { margin-top: 0; }

/* Alanlar biraz daha sıkı: 14px boşluk uzun formda dağınık duruyordu. */
.alan { margin-bottom: 16px; }
.siparis-form .dugme-birincil { margin-top: 10px; width: 100%; }
@media (min-width: 560px) {
  .siparis-form .dugme-birincil { width: auto; min-width: 220px; }
}
.siparis-form h2 { margin-bottom: 18px; }
.alan { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.alan label { font: 500 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.alan input, .alan textarea {
  border: 1px solid var(--line); background: var(--sheet); color: var(--ink);
  border-radius: 2px; padding: 10px 12px; font: 400 15px/1.5 var(--body); width: 100%;
}
.alan input:focus, .alan textarea:focus { border-color: var(--accent); outline: none; }
.alan-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .alan-ikili { grid-template-columns: 1fr; } }

.note { font: 400 12.5px/1.6 var(--mono); color: var(--muted); }

/* --- Sepet: fatura, mağaza kapalı uyarısı, satıcı künyesi -------------- */

/* Mağaza kapalı uyarısı. Sol kenar çizgisi, metnin ortasını değil KENARINI
   işaretler: tipografik ritmi bozmadan satırın "farklı" olduğunu söyler. */
.uyari {
    font: 400 14px/1.65 var(--mono);
    color: var(--ink);
    background: var(--paper-2, rgba(0, 0, 0, .03));
    border-left: 2px solid var(--ink);
    padding: 14px 18px;
    margin: 24px 0;
}

/* Fatura tipi — iki seçenek yan yana; dar ekranda alt alta. */
.fatura-tip { margin-bottom: 18px; }
.fatura-tip .secim {
    display: flex;
    align-items: center;
    gap: 9px;
    font: 400 14px/1.4 var(--mono);
    color: var(--ink);
    cursor: pointer;
    padding: 11px 14px;
    border: 1px solid var(--rule);
}
.fatura-tip .secim input { width: auto; margin: 0; accent-color: var(--ink); }
.fatura-tip .secim:hover { border-color: var(--ink); }

/* Alan etiketindeki parantezli açıklama — etiketten daha sessiz olmalı. */
.siparis-form label small {
    font: 400 11.5px/1.4 var(--mono);
    color: var(--muted);
    text-transform: none;
    letter-spacing: 0;
}

/* Satıcı künyesi — yasal metin; okunur ama öne çıkmaz. */
.satici-kunye {
    margin-top: 48px;
    padding-top: 22px;
    border-top: 1px solid var(--rule);
    max-width: 620px;
}
.satici-kunye h2 { margin-bottom: 12px; }
.satici-kunye p {
    font: 400 12.5px/1.75 var(--mono);
    color: var(--muted);
    margin: 0 0 4px;
}
.satici-kunye p strong { color: var(--ink); font-weight: 500; }
.uyari-kutu {
  background: var(--accent-tint); border: 1px solid var(--accent-soft); border-left-width: 3px;
  border-radius: 2px; padding: 13px 16px; color: var(--ink); margin-bottom: 22px;
}

/* --------------------------------------------------------------- onay ekranı */
.siparis-onay { max-width: 620px; }
.siparis-no { font: 400 16px/1.6 var(--body); margin-top: 10px; }
.siparis-no strong { font-family: var(--mono); font-size: 18px; letter-spacing: .06em; }
.siparis-ozet { display: grid; grid-template-columns: 1fr auto; gap: 9px 20px; margin: 24px 0; padding: 18px 0; border-block: 1px solid var(--line); }
.siparis-ozet dt { font: 500 10px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.siparis-ozet dd { margin: 0; text-align: right; font: 500 15px/1.6 var(--mono); font-variant-numeric: tabular-nums; }
.siparis-uyari { background: var(--sand); border-radius: 2px; padding: 14px 16px; font-size: 15px; margin-bottom: 24px; }

/* ------------------------------------------------------------------ sepet rozeti */
.sepet-bag { position: relative; text-decoration: none; }
[data-sepet-rozet] {
  position: absolute; top: -8px; right: -10px;
  min-width: 18px; height: 18px; border-radius: 9px;
  background: var(--accent); color: var(--paper);
  font: 500 10px/18px var(--mono); text-align: center;
}

/* -------------------------------------------------------------- sayfalama */
.sayfalama { display: flex; gap: 8px; justify-content: center; margin-top: 38px; }
.sayfalama a, .sayfalama span {
  border: 1px solid var(--line); border-radius: 2px; padding: 7px 13px;
  font: 500 12px/1 var(--mono); text-decoration: none; color: var(--ink);
}
.sayfalama span[aria-current] { background: var(--accent); color: var(--paper); border-color: var(--accent); }

/* teknik çizim kutusu — fotoğrafı olmayan (pafta aşamasındaki) parçalar */
.urun-kart-cizim { display: flex; align-items: center; justify-content: center; padding: 8px; }
.tek-cizim { width: 100%; height: 100%; display: block; }

/* ------------------------------------------------------------------- hero */
.hero { background: var(--paper); padding-block: 60px 20px; }
.hero-ic { display: grid; gap: 38px; align-items: center; }
/* 10.10.2026 — fotoğraf solda (telefonda üstte), yazı sağda */
.hero-foto, .hero-cizim { order: -1; }
@media (min-width: 900px) { .hero-ic { grid-template-columns: .95fr 1.05fr; gap: 54px; } }
.hero-etiket {
  font: 500 10.5px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 18px; position: relative; padding-left: 46px;
}
.hero-etiket::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 34px; height: 1px; background: var(--line);
}
.hero h1 { font-size: clamp(34px, 7vw, 64px); line-height: 1.04; letter-spacing: -.025em; margin: 0; }
.hero h1 em { font-style: italic; color: var(--accent); }
.hero-alt { max-width: 46ch; color: var(--muted); margin: 22px 0 0; font-size: 17px; }
.hero-dugmeler { margin-top: 28px; }
.hero-cizim { background: var(--sand); border: 1px solid var(--line); border-radius: 2px; padding: 22px; position: relative; }
.hero-cizim svg { width: 100%; height: auto; display: block; }
.cizim-etiket {
  position: absolute; left: 16px; bottom: 11px;
  font: 500 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--walnut);
}

/* Hero fotoğrafı (2026-10-02) — çizimin yerini aldı. Çerçeve çizimdekiyle
   aynı dilde: ince çizgi, 2px köşe. Oran fotoğrafın kendi oranıdır (3:2);
   kırpılmaz, çünkü mekân fotoğrafında kenardaki öğe de tasarımın parçası. */
.hero-foto { margin: 0; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; background: var(--sand); }
.hero-foto img { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------- bölüm başlığı */
.bolum-basligi { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.bolum-basligi h2 { margin: 0; }
.bolum-bag { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.bolum-bag:hover { text-decoration: underline; }

/* ----------------------------------------------------------------- atölye */
.atolye { background: var(--ink); color: var(--paper); padding-block: 54px; margin-top: 20px; }
.atolye h2 { color: var(--paper); margin-bottom: 26px; }
/* ⚠️ `max-width: 720px` KALDIRILDI — geniş ekranda künye sola sıkışıyor,
   sağ yarı boş kalıyordu.

   ⚠️ DÖRT SÜTUN DENENDİ VE GERİ ALINDI. Alt çizgi her dt ve dd'nin KENDİ
   `border-bottom`u olduğu için, sütunlar arası boşluk çizgiyi de bölüyor
   ve satırlar kopuk kısa tireler hâlinde görünüyordu. İki sütunda çizgi
   satır boyunca KESİNTİSİZ uzar; okunurluk genişlikten önce gelir. */
.atolye-kunye { display: grid; grid-template-columns: auto 1fr; gap: 0; }

.atolye-kunye dt {
  font: 500 10px/1.6 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-soft); padding: 13px 24px 13px 0; border-bottom: 1px solid rgba(242,238,230,.14);
}
.atolye-kunye dd {
  margin: 0; padding: 13px 0; font-size: 15px; text-align: right;
  border-bottom: 1px solid rgba(242,238,230,.14);
}

/* ------------------------------------------------------------- slider */
.slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; }
.slider .slayt { flex: 0 0 100%; scroll-snap-align: start; margin: 0; position: relative; }
.slider .slayt picture { display: block; }

/* ⚠️ YÜKSEKLİK DEĞİL ORAN VERİLİR. Önce `height: clamp(260px, 42vw, 560px)`
   yazıyordu; bu, görselin kendi oranından bağımsız bir kutu kuruyor ve
   `object-fit: cover` farkı KIRPARAK kapatıyordu. Slayt görselleri 3:1
   üretildiği için kutu artık 3:1'dir — kırpma sıfırdır, künye metni
   tamamen görünür. Oran değişirse görsel de o oranda üretilmelidir. */
.slider .slayt img { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; display: block; }

/* Dar ekranda <source> 3:2 mobil görseli verir; kutu da 3:2 olur. */
@media (max-width: 700px) {
  .slider .slayt img { aspect-ratio: 3 / 2; }
}
.slider figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 24px;
  background: linear-gradient(transparent, rgba(23,20,16,.72));
  color: var(--paper); font: 300 clamp(20px,3vw,30px)/1.2 var(--display);
}

/* --------------------------------------------------- proje ve yazı kartı */
.proje-izgara { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.yazi-izgara  { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }

.proje-kart, .yazi-kart {
  background: var(--sheet); border: 1px solid var(--line); border-radius: 2px; overflow: hidden;
  display: flex; flex-direction: column;
}
.proje-kart a, .yazi-kart a { text-decoration: none; color: inherit; }
.proje-kart img { width: 100%; aspect-ratio: 3/2; object-fit: cover; background: var(--paper-2); }
.yazi-kart img  { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: var(--paper-2); }
.proje-kart h3, .yazi-kart h3 { font-size: 20px; margin: 15px 18px 0; line-height: 1.25; }
.proje-kart p, .yazi-kart p { margin: 8px 18px 18px; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.yazi-kart time {
  display: block; margin: 7px 18px 0;
  font: 400 11px/1 var(--mono); letter-spacing: .1em; color: var(--muted); text-transform: uppercase;
}

/* --- Veritabanından gelen menüler ------------------------------------- */

/* Alt bilgi menüsü. Üst bardan farklı olarak KENDİ sarmalayıcısı vardır
   (_Layout içinde açılan <nav class="footer-menu">), çünkü Govde görünümü
   sarmalayıcı basmaz ve alt bilginin kendi akışında konumlanması gerekir. */
.footer-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin: 18px 0 14px;
}
.footer-menu a {
    font: 400 13px/1.6 var(--mono);
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.footer-menu a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* Adresi olmayan menü öğesi — tıklanmaz başlık. <a> DEĞİL <span> basılır:
   boş href'li bağlantı klavyeyle odak alır, tıklanınca sayfayı başa sarar
   ve ekran okuyucu onu bağlantı diye okur. */
.menu-baslik {
    font: 500 13px/1.6 var(--mono);
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* --- Popup afişi ------------------------------------------------------
   ⚠️ KATMAN VARSAYILAN OLARAK GÖRÜNÜRDÜR. Bileşen bilinçli olarak
   <dialog>+showModal() kullanmıyor: JS kapalıysa afiş hiç açılmazdı.
   İşaretleme sunucudan hazır gelir, CSS gösterir; JS yalnızca KAPATIR ve
   "bir daha gösterme" kaydını tutar.

   ⚠️ BU STİLLER YOKTU ve afiş sayfanın EN ALTINA düz bir görsel olarak
   düşüyordu — alt bilginin altında, tasarımı bozarak. Bileşen bağlanmıştı
   ama görünümü hiç yazılmamıştı. (H-032) */
.popup-katman {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(23, 20, 16, .62);
    /* Arka plan kaydırılabilir kalır; afiş kapatılabilir olduğu için
       gövdeyi kilitlemek gerekmiyor ve kilitlemek mobilde zıplama yapar. */
    overscroll-behavior: contain;
}

/* JS kapattığında bu sınıf eklenir. `hidden` özniteliği yerine sınıf:
   öznitelik, CSS'siz bir tarayıcıda da gizlerdi — ama burada tersini
   istiyoruz, JS yoksa afiş görünsün. */
.popup-katman.kapali { display: none; }

.popup-kutu {
    position: relative;
    max-width: min(460px, 92vw);
    max-height: 88vh;
    background: var(--sheet);
    border: 1px solid var(--line);
    box-shadow: 0 18px 60px rgba(23, 20, 16, .28);
    animation: popup-gir .22s ease-out;
}
.popup-kutu a { display: block; }

/* Afiş 4:5 üretilir; kutu ona göre ölçeklenir ve KIRPILMAZ. */
.popup-kutu img {
    display: block;
    width: 100%;
    max-height: 88vh;
    object-fit: contain;
}

.popup-kapat {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--sheet);
    color: var(--ink);
    font: 400 22px/1 var(--body);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(23, 20, 16, .22);
}
.popup-kapat:hover { background: var(--paper-2); }
.popup-kapat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Dar ekranda düğme kutunun DIŞINA taşarsa ekranın kenarında kalır. */
@media (max-width: 520px) {
    .popup-kapat { top: 8px; right: 8px; }
}

@keyframes popup-gir {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .popup-kutu { animation: none; }
}

/* --- Slayt göstergeleri ------------------------------------------------
   Noktalar JS tarafından eklenir (bkz. slider.js): JS yoksa tıklanamaz
   gösterge basmak yanıltıcı olurdu. */
.slider-noktalar {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 14px 0 4px;
    background: var(--paper);
}
.slider-nokta {
    width: 9px; height: 9px;
    padding: 0;
    border: 1px solid var(--muted);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background .18s, border-color .18s, transform .18s;
}
.slider-nokta:hover { border-color: var(--ink); }
.slider-nokta.etkin { background: var(--accent); border-color: var(--accent); transform: scale(1.25); }
.slider-nokta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    .slider-nokta { transition: none; }
}

/* ===================================================== ANA SAYFA BÖLÜMLERİ
   Dört yeni bölüm: etkinlik · duyuru · galeri · hizmet.
   Hepsi var olan kart diline uyar (--sheet yüzey, --line kenar, 2px köşe);
   ayrışan tek şey her birinin KENDİ bilgi önceliğidir. */

/* --- Etkinlik: çapa TARİHTİR ------------------------------------------
   Etkinlikte "ne zaman" olmadan karar verilemez; bu yüzden tarih
   başlıktan önce, iri ve ayrı bir blok hâlinde durur. */
.etkinlik-izgara { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.etkinlik-kart {
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: 2px;
}
.etkinlik-kart > a {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 18px; text-decoration: none; color: inherit;
}
.etkinlik-kart:hover { border-color: var(--accent); }

.etkinlik-tarih {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 62px; height: 62px;
  background: var(--accent); color: var(--paper);
  border-radius: 2px;
}
.etkinlik-tarih .gun { font: 500 24px/1 var(--mono); }
.etkinlik-tarih .ay  { font: 500 10px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; }

.etkinlik-govde { min-width: 0; }
.etkinlik-govde h3 { font-size: 19px; margin: 0 0 6px; }
.etkinlik-govde time { display: block; font: 400 12px/1.5 var(--mono); color: var(--muted); }
.etkinlik-govde .yer { font: 400 12px/1.5 var(--mono); color: var(--accent); margin: 2px 0 0; }
.etkinlik-govde p { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 8px 0 0; }

/* --- Duyuru: metin odaklı liste ---------------------------------------
   Kart değil LİSTE: duyurunun görseli yoktur, kart yapmak boş bir
   görsel alanı doğururdu. */
.duyuru-listesi { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.duyuru-listesi li { padding: 18px 0; border-bottom: 1px solid var(--line); }
.duyuru-listesi li > a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  text-decoration: none; color: inherit;
}
.duyuru-baslik { font: 400 20px/1.35 var(--display); }
.duyuru-listesi li > a:hover .duyuru-baslik { color: var(--accent); }
.duyuru-listesi time { flex: 0 0 auto; font: 400 12px/1.6 var(--mono); color: var(--muted); }
.duyuru-listesi p { margin: 6px 0 0; font-size: 14px; line-height: 1.65; color: var(--muted); max-width: 70ch; }

/* --- Galeri: proje kartını yeniden kullanır (aynı 3:2 oran) ------------ */
/* ⚠️ `auto-fit` BOŞ İZLERİ ÇÖKERTİR: tek galeri kartı tüm kapsayıcıyı
   kaplıyor ve 3:2 görsel ~730px yüksekliğe çıkıyordu. `auto-fill` izleri
   korur, kart normal genişliğinde kalır. Fark yalnızca tek/az sayıda
   öğede görülür — bu yüzden dört ürünlü ızgarada sorun çıkmamıştı. */
.galeri-izgara { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* Proje detayı — yana kaydırmalı görsel şeridi (kaydir-serit.js) */
.proje-galeri { position: relative; margin: 28px 0 36px; }
.kaydir-serit { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
                padding-bottom: 10px; scrollbar-width: thin; }
.kaydir-oge { flex: 0 0 auto; height: 440px; scroll-snap-align: start; border: 1px solid var(--line); overflow: hidden; cursor: zoom-in; }
.kaydir-oge img { height: 100%; width: auto; display: block; object-fit: cover; }
.kaydir-ok { position: absolute; top: calc(50% - 5px); transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%;
             border: 1px solid var(--line); background: rgba(250, 248, 243, .92); color: var(--ink); font: 400 22px/1 var(--display);
             cursor: pointer; z-index: 2; }
.kaydir-ok:disabled { opacity: .3; cursor: default; }
.kaydir-geri { left: 10px; } .kaydir-ileri { right: 10px; }
@media (max-width: 720px) { .kaydir-oge { height: 300px; } .kaydir-ok { display: none; } }

/* Koleksiyon — "Yakında" (pafta aşamasındaki parçalar, yalnızca ad) */
.yakinda { margin-top: 72px; padding-top: 32px; border-top: 1px solid var(--line); }
.yakinda h2 { font: 500 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin: 0 0 22px; }
.yakinda-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
/* ⚠️ "Yakında" kartlarında yazı ORTALI (kullanıcı isteği 12.10.2026).
   Yatay ortalama tek başına yetmiyordu: ızgara kutuları eşit yükseklikte,
   ama adı iki satıra düşen kart (örneğin "ValentinaZ Yemek Masası") üstten
   başlayınca diğerlerinden farklı yükseklikte duruyor gibi görünüyordu.
   Bu yüzden flex ile DİKEY de ortalanıyor — üç kartın yazısı aynı
   hizada oturuyor.
   ⚠️ Sözcük bölünmez (`hyphens` yok): bunlar ürün adı, tireyle bölünmesi
   adı okunmaz hâle getirir. */
.yakinda-liste li {
  border: 1px solid var(--line); padding: 22px 20px;
  font: 400 21px/1.3 var(--display); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  text-align: center; min-height: 104px;
}

/* Galeri DETAYI: dörtlü küçük ızgara (istek 03.10.2026 — "fotoğraflar çok
   büyük, 4 tane yan yana dursun"). Tıklayınca galeri-isik.js büyük gösterir. */
.galeri-detay .galeri-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 28px; }
.galeri-detay .galeri-oge { display: block; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid var(--line); cursor: zoom-in; }
.galeri-detay .galeri-oge img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.galeri-detay .galeri-oge:hover img { transform: scale(1.03); }
@media (max-width: 720px) { .galeri-detay .galeri-izgara { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

/* Büyük görüntüleyici — galeri-isik.js oluşturur */
/* Açık, yarı şeffaf zemin (istek 05.10.2026 — "siyah kısım daha açık, şeffaf olsun") */
.isik { position: fixed; inset: 0; z-index: 1000; background: rgba(243, 239, 231, .82);
        -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: flex;
        align-items: center; justify-content: center; }
.isik[hidden] { display: none; }
.isik-serit { display: flex; width: 100%; height: 100%; transition: transform .35s ease; }
.isik-kare { flex: 0 0 100%; display: flex; align-items: center; justify-content: center; padding: 56px 72px; box-sizing: border-box; }
.isik-kare img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; box-shadow: 0 18px 50px rgba(30, 24, 16, .22); }
.isik-cerceve { position: absolute; inset: 0; overflow: hidden; }
.isik button { position: absolute; z-index: 2; background: rgba(255, 255, 255, .85); color: var(--ink); border: 1px solid var(--line);
               width: 46px; height: 46px; border-radius: 50%; font: 400 20px/1 var(--display); cursor: pointer; }
.isik button:hover, .isik button:focus-visible { background: #fff; }
.isik-geri { left: 16px; top: 50%; transform: translateY(-50%); }
.isik-ileri { right: 16px; top: 50%; transform: translateY(-50%); }
.isik-kapat { right: 16px; top: 16px; }
.isik-sayac { position: absolute; z-index: 2; left: 50%; bottom: 18px; transform: translateX(-50%); color: var(--muted);
              font: 400 12px/1 var(--mono); letter-spacing: .12em; }
@media (max-width: 720px) { .isik-kare { padding: 56px 12px; } .isik-geri, .isik-ileri { top: auto; bottom: 8px; transform: none; } }
body.isik-acik { overflow: hidden; }

.galeri-adet {
  font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 10px 16px 0 !important;
}

/* --- Hizmet: görselsiz, okla ------------------------------------------
   Hizmet bir nesne değil SÜREÇtir; görsel yerine başlık + özet taşır. */
.hizmet-izgara { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.hizmet-kart {
  position: relative;
  display: block;
  padding: 24px 46px 24px 24px;
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: 2px;
  text-decoration: none; color: inherit;
  transition: border-color .18s, transform .18s;
}
.hizmet-kart:hover { border-color: var(--accent); transform: translateY(-2px); }
.hizmet-kart h3 { font-size: 20px; margin: 0 0 8px; }
.hizmet-kart p { font-size: 14px; line-height: 1.65; color: var(--muted); margin: 0; }
.hizmet-ok {
  position: absolute; right: 20px; top: 24px;
  font: 400 18px/1 var(--mono); color: var(--accent);
  transition: transform .18s;
}
.hizmet-kart:hover .hizmet-ok { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .hizmet-kart, .hizmet-ok { transition: none; }
  .hizmet-kart:hover { transform: none; }
}

/* Dar ekranda duyuru tarihi başlığın altına iner. */
@media (max-width: 560px) {
  .duyuru-listesi li > a { flex-direction: column; gap: 4px; }
  .etkinlik-kart > a { gap: 14px; padding: 16px; }
}

/* --- Belge detayı ----------------------------------------------------- */
.belge-detay-basligi { margin-bottom: 22px; }
.belge-yil { font: 500 12px/1 var(--mono); letter-spacing: .14em; color: var(--muted); margin: 8px 0 0; }

/* İndirme bloğu içerikten ÖNCE gelir; ziyaretçi buraya çoğunlukla dosya
   için uğrar. Bu yüzden görsel ağırlığı da en yüksek olan odur. */
.belge-indir {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 18px 0 22px; margin: 0 0 22px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.belge-dosya { font: 400 12px/1.5 var(--mono); color: var(--muted); word-break: break-all; }
.belge-geri { margin-top: 34px; }
.belge-geri a { font: 400 13px/1.6 var(--mono); color: var(--muted); text-decoration: none; }
.belge-geri a:hover { color: var(--accent); }

/* --- Rakamlar şeridi ---------------------------------------------------
   Marka yeşili zeminde; sayfanın koyu iki bandından biri (öteki atölye
   künyesi). Arka arkaya gelmesinler diye araya içerik bölümleri girer. */
.rakamlar { background: var(--accent); color: var(--paper); padding-block: 56px; margin-top: 20px; }
.rakamlar h2 { color: var(--paper); margin: 0 0 10px; }
.rakamlar h2 em { font-style: italic; color: var(--accent-soft); }
.rakam-alt { color: rgba(242,238,230,.78); max-width: 62ch; margin: 0 0 34px; }

.rakam-izgara {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  background: rgba(242,238,230,.22);   /* ızgara çizgisi: boşluk değil KENAR */
  border: 1px solid rgba(242,238,230,.22);
}
.rakam-kutu {
  background: var(--accent);
  padding: 26px 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.rakam-deger {
  font: 400 44px/1 var(--display);
  font-variant-numeric: tabular-nums;
}
.rakam-deger em { font: 400 20px/1 var(--mono); font-style: normal; color: var(--accent-soft); margin-left: 4px; }
.rakam-etiket {
  font: 500 11px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: rgba(242,238,230,.8);
}

.rakam-soz {
  margin: 34px 0 0; padding-left: 20px;
  border-left: 2px solid var(--accent-soft);
  font: 400 clamp(18px,2.2vw,24px)/1.55 var(--mark);
  font-style: italic; max-width: 70ch;
}
.rakam-soz cite {
  display: block; margin-top: 12px;
  font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  font-style: normal; color: var(--accent-soft);
}

/* ==========================================================================
   BAŞLIK — logo · el yazısı menü · ikon araçları
   ========================================================================== */

/* ---------------------------------------------------------------- logo
   Logo bir <img> DEĞİL, maske olarak kullanılıyor. Gerekçe: aynı tek dosya
   hem açık zeminde koyu (başlık) hem koyu zeminde açık (alt bilgi) çizilsin
   diye. <img> ile bu olmaz — iki ayrı dosya tutmak ya da `filter: invert`
   ile renk uydurmak gerekirdi; ikincisi yeşili de bozar.

   ⚠️ İLERLEMELİ: maske desteklenmiyorsa .marka-logo hiç görünmez ve
   ALTINDAKİ YAZI marka olarak kalır. Bu yüzden yazı DOM'dan silinmedi,
   yalnızca maske destekleniyorsa gizleniyor. Maskeyi varsayıp yazıyı
   silseydim, destekelemeyen tarayıcıda başlıkta hiçbir marka kalmazdı. */
.marka-logo { display: none; }

@supports (mask-image: url(/img/miem-logo.svg)) or (-webkit-mask-image: url(/img/miem-logo.svg)) {
  .marka-logo {
    display: block;
    width: 132px;
    aspect-ratio: 3000 / 1405;   /* izlenen SVG'nin viewBox'ı — kırpılmaz */
    /* ⚠️ MARKA SİYAHTIR, YEŞİL DEĞİL. İlk kurulumda logo `--accent`
       (orman yeşili) ile boyanmıştı; oysa stüdyonun kendi kelime işareti
       siyah basılıyor (kaynak: 100-150.pdf künye levhası). Yeşil site
       paletinin VURGU rengidir, markanın rengi değil — ikisini karıştırmak
       marka kimliğini sessizce değiştirir. */
    background: var(--ink);
    -webkit-mask: url(/img/miem-logo.svg) no-repeat center / contain;
            mask: url(/img/miem-logo.svg) no-repeat center / contain;
  }
  .marka .marka-ad, .marka .marka-alt { 
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}
.marka { position: relative; }
.site-footer .marka-logo { background: var(--paper); width: 108px; margin-bottom: 14px; }

/* ------------------------------------------------------- menü karakteri
   Ağır büyük-harf karakter YALNIZCA menü bağlantılarında; gövde metninde
   değil. Archivo Black uzun metinde okunmaz (harf aralıkları kapanır) —
   bu yüzden genel bir kural yapılmadı, iki seçiciye bağlandı. */
/* ⚠️ SEÇİCİ SADECE `a` DEĞİL. Tıklanmaz başlıklar (<span class="menu-baslik">
   ve <span class="menu-dal-baslik">) bağlantı değildir; yalnız `a` yazıldığında
   "Güncel" gibi adresi olmayan üst başlıklar gövde fontunda kalıyor ve
   menünün ortasında yabancı duruyordu — ekranda görüldü. */
.ana-menu a, .footer-menu a,
.ana-menu .menu-baslik, .ana-menu .menu-dal-baslik,
.footer-menu .menu-baslik, .footer-menu .menu-dal-baslik {
  font-family: var(--nav);
  font-weight: 400;          /* Archivo Black zaten siyah — sentetik kalın YOK */
  text-transform: uppercase;
  letter-spacing: .035em;
  /* ⚠️ Başlık ASLA kelime ortasından bölünmez. Bu satır olmadan
     "Ölçüye Özel Talep" masaüstünde üç satıra iniyordu ve menü
     satırı üç kat yükseliyordu. */
  white-space: nowrap;
}
.ana-menu a, .ana-menu .menu-baslik, .ana-menu .menu-dal-baslik { font-size: 12.5px; color: var(--ink); text-decoration: none; }
.footer-menu a, .footer-menu .menu-baslik, .footer-menu .menu-dal-baslik { font-size: 11px; letter-spacing: .06em; }

/* -------------------------------------------------------- ikon araçları
   Arama · sepet · hamburger, referans tasarımdaki gibi sağ üstte tek sıra.
   Hamburger bu grubun İÇİNDE duruyor ki geniş ekranda gizlendiğinde
   kalan iki ikon hizasını bozmasın. */
.header-araclar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.ikon-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;                 /* 44px — dokunmatik hedef asgarisi */
  height: 44px;
  position: relative;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.ikon-dugme:hover { background: var(--accent-tint); color: var(--accent); }
.ikon-dugme svg { width: 21px; height: 21px; display: block; }

/* Hamburger de artık bu grubun bir üyesi: şablonun kutulu görünümü yerine
   diğer iki ikonla aynı yuvarlak zemini alır. */
.header-araclar .menu-dugme {
  border: 0;
  border-radius: 50%;
  gap: 4px;
  padding: 13px 11px;
  transition: background .18s ease;
}
.header-araclar .menu-dugme:hover { background: var(--accent-tint); }
/* ⚠️ Çizgiler `currentColor` ile boyanır (05.10.2026): telefon tarayıcılarının
   "zorla karanlık mod"u (Samsung İnternet, Chrome otomatik koyu) yazı rengini
   açar ama küçük kutuların sabit arka planına dokunmaz — arama/sepet SVG'leri
   açılırken hamburger koyu kalıp kararmış zeminde kayboluyordu. */
.header-araclar .menu-dugme { color: var(--ink); }
:root { color-scheme: only light; }
.header-araclar .menu-dugme span { background: currentColor; }

/* Rozet, sepet ikonunun sağ üstüne oturur. Mutlak konum .ikon-dugme'nin
   position:relative'ine dayanır. */
.ikon-dugme[data-sepet] [data-sepet-rozet] {
  top: 5px; right: 4px;
  min-width: 16px; height: 16px; border-radius: 8px;
  font: 500 9px/16px var(--mono);
}

/* ==================================================== ÇEKMECE MENÜ
   ⚠️ YATAY MENÜ KALDIRILDI — bu bir sadeleştirme değil, MÜŞTERİ KARARI.
   Gösterilen üç referansın üçü de aynı şeyi söylüyordu: başlıkta yalnızca
   marka ve ikonlar dursun, gezinme hamburgerin arkasında dikey ve
   girintili (merdivenli) açılsın.

   Önceki düzen (başlığın altında ikinci satırda yatay menü) 12 başlığı
   sığdırmak için bulunmuş bir çözümdü; çekmece o sorunu kökten çözüyor:
   başlık sayısı artsa da satır taşmaz, "Ölçüye Özel Talep" bölünmez,
   üçüncü seviye alt menü bile yan yana sıkışmak zorunda kalmaz.

   ⚠️ HAMBURGER ARTIK HER GENİŞLİKTE GÖRÜNÜR. Şablon onu 860px üstünde
   gizliyordu; o kural burada EZİLİYOR. Ezilmeseydi masaüstünde menüyü
   açacak hiçbir düğme kalmazdı — yani site gezilemez olurdu. */

.menu-dugme { display: inline-flex !important; }

/* ---- çekmecenin kendisi ---- */
.ana-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(380px, 86vw);
  /* Üstteki sabit başlık çekmecenin üzerinde durur (z-index 90); içerik
     onun altından başlasın diye üstten dolgu veriliyor. Başlık yüksekliği
     ekrana göre değiştiği için cömert tutuldu — eksik kalsa ilk başlık
     logonun altında kaybolurdu. */
  padding: 132px 24px 32px;
  margin: 0;
  display: flex !important;      /* şablonun display:none kuralını ezer */
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: min(380px, 86vw);
  background: var(--sheet);
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 44px rgba(23, 20, 16, .14);
  overflow-y: auto;
  overscroll-behavior: contain;  /* çekmece sonunda sayfa kaymasın */
  z-index: 70;

  /* Kapalıyken ekranın dışında. `display:none` KULLANILMIYOR: geçiş
     animasyonu olmazdı ve ekran okuyucu için ani görünüp kaybolurdu.
     `visibility: hidden` ise içindekilerin klavyeyle odak almasını da
     engeller — tek başına `transform` bunu yapmaz ve kapalı menüde
     sekme tuşu görünmez bağlantılarda dolaşırdı. */
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .26s ease, visibility .26s;
}

.ana-menu.acik { transform: none; visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .ana-menu { transition: none; }
}

/* ⚠️ BAŞLIĞIN z-index'İ TEK BAŞINA YETMEZ — ÖLÇÜLDÜ.
   Başlığa `z-index: 90`, çekmeceye `70` verildi ve çekmece yine başlığın
   ÜSTÜNE çizildi; hamburger tıklanamaz oldu (elementFromPoint düğmenin
   üstünde `anaMenu` buldu). Sebep: `.ana-menu` başlığın KARDEŞİ değil,
   İÇİNDEKİ bir öğedir. `position: fixed` olması onu DOM'dan çıkarmaz;
   başlığın yığın bağlamında kalır ve oradaki 70, başlığın kendi
   içeriğinden (z-index: auto) yüksektir. Başlığın 90'ı yalnızca başlığı
   SAYFAYA göre yükseltir, kendi çocuklarına karşı bir şey yapmaz.

   Doğru çözüm: marka ve araç ikonları AYNI bağlamda çekmecenin üstüne
   çıkarılır. Böylece çekmece açıkken logo görünür kalır ve X düğmesi
   tıklanabilir olur — referans tasarımdaki davranış da budur. */
.site-header { z-index: 90; }
.marka,
.header-araclar { position: relative; z-index: 80; }

/* ---- arka perde ---- */
.menu-perde {
  position: fixed;
  inset: 0;
  background: rgba(23, 20, 16, .42);
  opacity: 0;
  visibility: hidden;
  transition: opacity .26s ease, visibility .26s;
  z-index: 65;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.menu-perde.acik { opacity: 1; visibility: visible; }

/* Çekmece açıkken arkadaki sayfa kaymasın. */
body.menu-acik { overflow: hidden; }

/* ---- çekmece içindeki bağlantılar ---- */
.ana-menu > a,
.ana-menu > .menu-baslik {
  display: block;
  padding: 14px 2px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.ana-menu > a:hover { color: var(--accent); }
.ana-menu a, .ana-menu .menu-baslik, .ana-menu .menu-dal-baslik { font-size: 14px; }

/* ===================================================== merdiven (akordeon)
   Üst başlık + altında girintili alt başlıklar.

   ⚠️ ARTIK TEK DAVRANIŞ VAR: akordeon. Önce masaüstünde açılır panel,
   dar ekranda akordeon vardı; iki ayrı davranış iki ayrı kural kümesi
   demekti ve biri düzeltilince diğeri unutuluyordu. Çekmeceyle birlikte
   ikisi de aynı oldu — dikey liste her genişlikte aynı şekilde açılıyor. */

.menu-dal {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
}

.menu-dal-baslik {
  padding: 14px 2px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.menu-dal-baslik:hover { color: var(--accent); }

.menu-dal-ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;                 /* 44px — dokunmatik hedef asgarisi */
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  transition: transform .2s ease, color .2s ease;
}
.menu-dal-ok:hover { color: var(--accent); }
.menu-dal-ok svg { width: 15px; height: 15px; display: block; }
.menu-dal-ok[aria-expanded="true"] { transform: rotate(180deg); }

.menu-alt {
  grid-column: 1 / -1;
  display: none;
  /* Girinti merdiveni: her seviye bir basamak içeri. Sol çizgi hangi
     başlığa ait olduğunu gösterir — girinti tek başına derinliği
     anlatmıyor, hizalama tesadüf gibi duruyordu. */
  padding-left: 16px;
  margin-left: 2px;
  border-left: 2px solid var(--accent-soft);
}
.menu-dal.acik > .menu-alt { display: block; }

.menu-alt > a,
.menu-alt > .menu-baslik,
.menu-alt > .menu-dal > .menu-dal-baslik {
  display: block;
  padding: 12px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink);
  text-decoration: none;
}
.menu-alt > a:hover { color: var(--accent); }
.menu-alt > a:last-child { border-bottom: 0; }

/* ---- alt bilgi menüsü çekmeceden ETKİLENMEZ ----
   ⚠️ `.footer-menu` kuralları ayrı duruyor: yukarıdaki `.ana-menu`
   seçicileri onu kapsamıyor. Ortak bir `nav` seçicisi yazılsaydı alt
   bilgi de çekmeceye dönüşür ve sayfa altında kaybolurdu. */
.footer-menu { position: static; }

/* ======================================== başlık ve alt bilgi zeminleri
   ⚠️ BU BLOK BİR KEZ YAZILDI, SONRA KAZARA SİLİNDİ, ŞİMDİ GERİ KONDU.
   Menü bloğunu değiştirirken dosyanın sonundan itibaren yeniden yazdım
   ve bu kurallar da o aralıkta kaldı. Sonuç: alt bilgi yeniden açık
   zemine döndü, krem logo krem üstünde kayboldu — kullanıcı "logo çok
   silik" diye bildirdi. Ders: dosya sonunu toptan değiştiren bir
   düzenleme, silinen aralıkta BAŞKA ne olduğunu önce okumalı.

   (1) ALT BİLGİDE LOGO GÖRÜNMÜYORDU: ölçüm — alt bilgi zemini
       rgb(244,246,249), logo maskesinin boyası rgb(242,238,230).
       Krem üstüne krem. Logoyu koyu zemine göre boyadım ama o koyu
       zemin hiçbir yerde TANIMLI DEĞİLDİ: `.site-footer` kuralı yalnızca
       şablonun site.css'inde var ve orada `var(--renk-zemin-alt)` yazıyor.

   (2) SİSTEM KOYU TEMASINDA BAŞLIK KARARIYORDU: `prefers-color-scheme: dark`
       altında başlık zemini rgb(17,22,28) olurken gövde krem kalıyordu.
       Sebep aynı: site.css'in koyu tema bloğu `--renk-zemin`i değiştiriyor,
       marka katmanı ise `--renk-*` ailesinin hiçbirini ezmiyor.

   Çözüm ikisinde de aynı: marka katmanı bu iki yüzeyi KENDİ belirteçleriyle
   açıkça boyuyor. Siteyi yarı koyu yarı açık bırakmak, koyu temayı hiç
   desteklememekten kötüdür. */

.site-header {
  background: var(--sheet);
  border-bottom: 1px solid var(--line);
}

.site-footer {
  background: var(--ink);
  /* 10.10.2026 onaylı: yazıların olduğu solda koyu bordo, sağa doğru açık güle */
  background: linear-gradient(90deg, #6B1F3B 0%, #6B1F3B 30%, #8E3352 60%, #B8627C 100%);
  border-top: 0;
  color: var(--paper);
  padding-block: 1.25rem;   /* 10.10.2026: daha kısa alt bilgi */
}
.site-footer .marka-logo { width: 92px; margin-bottom: 8px; }
.site-footer p { margin: 0 0 6px; }
.site-footer .footer-telif { margin: 8px 0 0; }
.site-footer a { color: var(--paper); }
.site-footer a:hover { color: var(--accent-soft); }
.site-footer .footer-telif { color: rgba(242, 238, 230, .62); }

/* Alt bilgide logo varken kurum adını ayrıca yazmak tekrardır; yazı
   ekran okuyucu ve maske desteklemeyen tarayıcı için DOM'da kalır. */
@supports (mask-image: url(/img/miem-logo.svg)) or (-webkit-mask-image: url(/img/miem-logo.svg)) {
  .site-footer .footer-kurum {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* Sosyal bağlantılar: ikon + hesap adı tek satırda. */
.footer-sosyal a { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.footer-sosyal svg { width: 17px; height: 17px; flex: none; }
.footer-sosyal span { font: 500 12.5px/1 var(--mono); letter-spacing: .02em; }

.site-footer .footer-menu { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 10px; }
.site-footer .footer-menu a { color: var(--paper); }
.site-footer .footer-menu a:hover { color: var(--accent-soft); }

/* ============================================================ imleç
   Marka işareti fare imlecine taşınıyor.

   ⚠️ OK BİÇİMİ KORUNDU, logoya ÇEVRİLMEDİ. İmlecin tamamını bir rozete
   dönüştürmek markayı güçlü biçimde taşırdı ama işaretleme hassasiyetini
   bozardı: insanlar okun UCUNA göre nişan alır ve yuvarlak bir lekenin
   ucu yoktur. Bu yüzden varsayılan imleç ok OLARAK KALDI, yalnızca marka
   renklerine boyandı; logo ise TIKLANABİLİR öğelerde beliriyor — yani
   tam da "bir şeye dokunulacağı an".

   ⚠️ Her kuralda ANAHTAR KELİME YEDEĞİ var (`, auto` / `, pointer`).
   Görsel yüklenmezse ya da tarayıcı reddederse imleç kaybolmaz; yedeksiz
   yazılsaydı bazı tarayıcılarda imleç hiç çizilmezdi.

   ⚠️ YALNIZCA GERÇEK İMLEÇLİ AYGITLARDA. Dokunmatik ekranda imleç diye
   bir şey yok; kural yine de uygulansaydı tarayıcı boşuna iki görsel
   indirirdi. */
@media (hover: hover) and (pointer: fine) {
  body {
    cursor: url(/img/imlec-ok.png) 3 2, auto;
    cursor: image-set(url(/img/imlec-ok.png) 1x, url(/img/imlec-ok@2x.png) 2x) 3 2, auto;
  }

  /* Logo rozeti — tıklanabilir olan her şeyde. Sıcak nokta ORTADA (16 16),
     çünkü yuvarlak rozetin "ucu" yok; kullanıcı onu bir nişangâh gibi
     ortalayarak kullanır. */
  a,
  button,
  [role="button"],
  summary,
  label[for],
  .ikon-dugme,
  .menu-dugme,
  .menu-dal-ok,
  .dugme,
  .dugme-birincil {
    cursor: url(/img/imlec-rozet.png) 16 16, pointer;
    cursor: image-set(url(/img/imlec-rozet.png) 1x, url(/img/imlec-rozet@2x.png) 2x) 16 16, pointer;
  }

  /* ⚠️ METİN ALANLARI HARİÇ. Yazı yazılan ve seçilen yerlerde imleç
     "kiriş" (text) olmak zorunda: nereye imleç koyacağını gösteren tek
     işaret odur. Marka uğruna feda edilemez. */
  input, textarea, select, [contenteditable="true"] { cursor: auto; }
  input[type="submit"], input[type="button"], input[type="checkbox"],
  input[type="radio"], input[type="file"] {
    cursor: url(/img/imlec-rozet.png) 16 16, pointer;
  }

  /* Devre dışı öğe tıklanabilir görünmemeli. */
  [disabled], .p-disabled, [aria-disabled="true"] { cursor: not-allowed; }
}

/* ------------------------------------------------- sepetten kaldırma
   ⚠️ KALDIR DÜĞMESİ SONRADAN EKLENDİ. Önce sepet satırında yalnızca
   −/+ vardı; ürünü atmanın tek yolu adedi tek tek sıfıra indirmekti.
   Kullanıcı "sepette sil yok" diye bildirdi ve haklıydı: işlem teknik
   olarak mümkündü ama ARAYÜZDE YOKTU.

   Düğme satırın SAĞ UCUNDA, tutarın yanında duruyor — yanlışlıkla
   basılmaması için adet düğmelerinden uzakta. Rengi sönük; yıkıcı bir
   eylemi ekranın en dikkat çeken öğesi yapmak doğru olmaz, ama üstüne
   gelince uyarı rengine döner. */
.sepet-sil {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  margin-top: -2px;
  background: none;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--muted);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.sepet-sil svg { width: 18px; height: 18px; display: block; }
.sepet-sil:hover,
.sepet-sil:focus-visible {
  color: var(--bad);
  border-color: var(--bad);
  background: var(--sheet);
}

/* Dar ekranda satır sarmalıyor; düğme tutarla aynı hizada kalsın. */
@media (max-width: 560px) {
  .sepet-satir { flex-wrap: wrap; }
  .sepet-tutar { margin-left: auto; }
}

/* ============================================================ menü yazısı
   (08.10.2026, kullanıcı isteği) Ana menü slayt başlığındaki yazı tipiyle:
   Fraunces (--display), normal büyük-küçük harf. Alt bilgi menüsü Archivo
   Black olarak KALIR — yalnızca hamburger paneli değişti. Önizlendi:
   iPhone 13, ana başlık 20px · alt öğe 16px (ilk 26/20 çok büyük bulundu); en uzun alt öğe
   ("Ölçüye Özel Mobilya Tasarımı") tek satıra sığıyor. */
.ana-menu a, .ana-menu .menu-baslik, .ana-menu .menu-dal-baslik {
  font-family: var(--display);
  font-weight: 400;
  text-transform: none;
  letter-spacing: -.01em;
  font-size: 20px;
}
.ana-menu .menu-alt a { font-size: 16px; }
/* ============================================================ hizmet — görselli düzen
   (v1.2.6, 09.10.2026 onaylı taslak: mockup/hizmet-tasarim.html)
   Panelde hizmetin "Sayfa görselleri" doluysa Service/Detay.cshtml bu düzeni çizer. */
.hizmet-gorselli { max-width: 1240px; margin: 18px auto 72px; padding: 0 24px; }
.hg-hero { display: grid; grid-template-columns: 1fr 1.05fr; min-height: 560px; background: var(--sheet);
           border-radius: 22px 22px 0 0; overflow: hidden; }
.hg-hero-metin { padding: 84px 56px 56px 72px; }
.hg-etiket { font: 500 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin: 0; }
.hg-hero h1 { font: 300 clamp(40px, 4.6vw, 60px)/1.08 var(--display); letter-spacing: -.02em; margin: 22px 0; }
.hg-hero h1 em { font-style: italic; color: var(--accent); }
.hg-ozet { font-size: 16.5px; line-height: 1.7; color: #4b443b; max-width: 44ch; margin: 0 0 32px; }
.hg-dugme, .hg-kapanis-metin a { display: inline-flex; align-items: center; gap: 12px; background: var(--ink); color: var(--sheet);
           text-decoration: none; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
           padding: 17px 26px; border-radius: 999px; }
.hg-dugme b { font-weight: 400; color: #c9b88f; }
.hg-dugme:hover, .hg-kapanis-metin a:hover { background: var(--accent); color: var(--sheet); }
.hg-ozellikler { list-style: none; padding: 0; display: flex; gap: 36px; margin: 58px 0 0; }
.hg-ozellikler li { display: flex; gap: 10px; align-items: center; font-size: 12.5px; line-height: 1.35; color: #4b443b; }
.hg-ozellikler svg { width: 24px; height: 24px; flex: none; stroke: var(--ink); fill: none; stroke-width: 1.4; }
.hg-hero-gorsel { position: relative; }
.hg-hero-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% 50%;
                      clip-path: ellipse(100% 120% at 100% 50%); }
.hg-bant { background: var(--accent); color: var(--sheet); padding: 74px 60px 82px; }
.hg-bant h2 { font: 300 34px/1.1 var(--display); text-align: center; margin: 0; color: var(--sheet); }
.hg-bant > i { display: block; width: 46px; height: 2px; background: #c9b88f; margin: 16px auto 46px; }
.hg-kartlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.hg-kart { display: block; border-radius: 12px; overflow: hidden; cursor: zoom-in; }
.hg-kart img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .4s ease; }
.hg-kart:hover img { transform: scale(1.03); }
.hg-kapanis { background: var(--sheet); padding: 64px 72px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px;
              align-items: center; border-radius: 0 0 22px 22px; }
.hg-kapanis.tek { grid-template-columns: 1fr; }
.hg-kapanis-metin h2, .hg-kapanis-metin h3 { font: 300 30px/1.2 var(--display); margin: 0 0 14px; }
.hg-kapanis-metin p { font-size: 16px; line-height: 1.7; color: #4b443b; margin: 0 0 14px; }
.hg-kapanis-metin p:last-child { margin-bottom: 0; }
.hg-kapanis-metin p:has(> a:only-child) { margin-top: 26px; }
.hg-kapanis-gorsel { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; }
@media (max-width: 860px) {
  .hizmet-gorselli { padding: 0 12px; }
  .hg-hero { grid-template-columns: 1fr; }
  .hg-hero-metin { padding: 44px 26px 34px; }
  .hg-hero-gorsel { min-height: 300px; } .hg-hero-gorsel img { clip-path: none; }
  .hg-ozellikler { gap: 18px; flex-wrap: wrap; margin-top: 34px; }
  .hg-bant { padding: 52px 20px; } .hg-kartlar { grid-template-columns: 1fr 1fr; gap: 14px; }
  .hg-kapanis { grid-template-columns: 1fr; padding: 40px 26px; }
}
/* dikey kapanış görseli (ör. cephe fotoğrafı) */
.hg-kapanis-gorsel.dikey { aspect-ratio: 4 / 5; max-height: 560px; object-position: 50% 40%; }

/* ============================================================ hizmet — bölümlü düzen
   (v1.2.6, İnşaat & Uygulama; onaylı taslak: mockup/hizmet-insaat.html) */
.hizmet-bolumlu .hb-vurgu { font-size: 18px; color: var(--ink); margin-bottom: 18px; }
.hizmet-bolumlu .hg-ozet { max-width: 46ch; margin-bottom: 18px; }
.hizmet-bolumlu .hg-dugme { margin-top: 14px; }
.hizmet-bolumlu .hg-hero-gorsel img.hb-dikey { object-position: 50% 38%; }
.hb-isler { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hb-is { border: 1px solid rgba(251, 249, 245, .22); border-radius: 14px; padding: 26px 26px 24px; background: rgba(251, 249, 245, .04); }
.hb-is svg { width: 28px; height: 28px; stroke: #e7d9b8; fill: none; stroke-width: 1.4; margin-bottom: 16px; display: block; }
.hb-is h3 { font: 500 16px/1.3 var(--body); margin: 0 0 8px; color: var(--sheet); }
.hb-is p { font-size: 14px; line-height: 1.6; color: #d6dcd5; margin: 0; }
.hb-surec { background: var(--sheet); padding: 72px 72px 64px; }
.hb-surec h2, .hb-neden h2 { font: 300 32px/1.15 var(--display); margin: 0 0 40px; text-align: center; }
.hb-adimlar { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; position: relative; }
.hb-adimlar::before { content: ""; position: absolute; left: 6%; right: 6%; top: 23px; height: 1px; background: var(--line); }
.hb-adimlar li { position: relative; text-align: center; }
.hb-no { width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: var(--sheet); display: flex; align-items: center;
         justify-content: center; font: 500 14px/1 var(--mono); margin: 0 auto 18px; position: relative; }
.hb-adimlar h3 { font: 500 16px/1.3 var(--body); margin: 0 0 8px; }
.hb-adimlar p { font-size: 14px; line-height: 1.6; color: #4b443b; margin: 0 auto; max-width: 24ch; }
.hb-neden { background: var(--sheet); border-top: 1px solid var(--line); padding: 64px 72px; display: grid; grid-template-columns: 1.2fr 1fr;
            gap: 48px; align-items: center; border-radius: 0 0 22px 22px; }
.hb-neden.tek { grid-template-columns: 1fr; }
.hb-neden h2 { text-align: left; margin-bottom: 24px; }
.hb-neden ul { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 14px; }
.hb-neden li { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; line-height: 1.5; }
.hb-neden li::before { content: "✓"; flex: none; width: 24px; height: 24px; border-radius: 50%; background: #e3ebe5; color: var(--accent);
                       display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.hb-neden-gorsel { display: block; width: 100%; aspect-ratio: 4 / 5; max-height: 600px; object-fit: cover; border-radius: 12px; }
@media (max-width: 860px) {
  .hb-isler { grid-template-columns: 1fr; }
  .hb-surec { padding: 48px 22px; } .hb-adimlar { grid-template-columns: 1fr 1fr; } .hb-adimlar::before { display: none; }
  .hb-neden { grid-template-columns: 1fr; padding: 40px 26px; }
}
/* ============================================================ fıstık yeşili (10.10.2026 onaylı)
   Yeşil alanlar düz renk değil soldan sağa degrade; açık zeminde yazılar koyu. */
.rakamlar, .hg-bant, .kampanya-rozet { background: var(--accent-degrade); }
.rakamlar *, .hg-bant .hg-kart { background-color: transparent; }
.rakamlar, .rakamlar *, .hg-bant, .hg-bant h2, .hb-is h3, .hb-is p,
.kampanya-rozet, .kampanya-rozet * { color: var(--accent-murekkep); }
.rakamlar li, .rakamlar div, .hb-is { border-color: rgba(43, 42, 22, .28); }
.hb-is svg { stroke: #4A4820; }
.hg-bant > i { background: #4A4820; }
.hb-no, .dugme-birincil, .kutucuk, .sayfalama span[aria-current] { color: var(--accent-murekkep); }
/* ============================================================ yeni üst düzen (v1.2.7, 10.10.2026 onaylı)
   Geniş ekranda: logo solda · menü ortada tek sıra (büyük harf) · arama/üyelik/sepet sağda.
   Dar ekranda eski çekmece menü aynen çalışır. */
.ikon-dugme[data-sepet] [data-sepet-rozet] {
  top: auto; right: auto; left: 2px; bottom: 4px;
  min-width: 18px; height: 18px; border-radius: 9px;
  background: var(--ink); color: var(--sheet); font: 600 10px/18px var(--body);
}
.header-araclar { gap: 10px; }
.ikon-dugme svg { width: 23px; height: 23px; }
.ikon-dugme:hover { background: none; color: var(--ink); opacity: .7; }

@media (min-width: 1100px) {
  .site-header .header-ic { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; }
  .header-araclar { margin-left: 0; }
  .menu-dugme, .header-araclar .menu-dugme { display: none !important; }
  .menu-perde { display: none !important; }
  .ana-menu {
    position: static; transform: none; visibility: visible; width: auto; height: auto;
    padding: 0; margin: 0; background: none; border: 0; box-shadow: none; overflow: visible;
    flex-direction: row !important; justify-content: center; align-items: center; gap: clamp(18px, 2.4vw, 38px);
  }
  .ana-menu > a:first-child { display: none; }            /* "Ana Sayfa" — logo zaten ana sayfaya gider */
  .ana-menu > a, .ana-menu > .menu-baslik, .ana-menu .menu-dal-baslik {
    font: 600 11.5px/1 var(--body) !important; letter-spacing: .14em !important; text-transform: uppercase !important;
    padding: 8px 0; border-bottom: 1px solid transparent; color: var(--ink); white-space: nowrap;
  }
  .ana-menu > a:hover, .ana-menu .menu-dal:hover > .menu-dal-baslik { color: var(--ink); border-bottom-color: var(--accent); }
  .menu-dal { display: block; position: relative; }
  .menu-dal-ok { display: none; }
  .menu-alt {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 240px;
    display: none; padding: 10px 0; margin: 0; border: 1px solid var(--line); border-left: 0;
    background: var(--sheet); box-shadow: 0 14px 34px rgba(23, 20, 16, .12); z-index: 95;
  }
  .menu-dal:hover > .menu-alt, .menu-dal:focus-within > .menu-alt { display: block; }
  .menu-alt > a, .ana-menu .menu-alt a {
    display: block; padding: 10px 20px; border: 0; white-space: nowrap;
    font: 400 14px/1.3 var(--body) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink);
  }
  .menu-alt > a:hover { background: var(--accent-tint); color: var(--ink); }
}

/* ============================================================ vitrin (v1.2.7)
   Solda başlık, sağda çapraz kesilmiş tam boy fotoğraf; kareler arası yumuşak geçiş. */
.vitrin { position: relative; height: calc(100vh - 108px); min-height: 560px; max-height: 820px; overflow: hidden; background: var(--sheet); }
.vitrin-kare { position: absolute; inset: 0; display: grid; grid-template-columns: 44% 56%; opacity: 0; visibility: hidden;
               transition: opacity .8s ease, visibility .8s; }
.vitrin-kare.etkin { opacity: 1; visibility: visible; }
.vitrin-metin { padding: 0 24px 0 max(24px, calc((100vw - 1240px) / 2 + 24px)); display: flex; flex-direction: column; justify-content: center; }
.vitrin-etiket { font: 500 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
                 display: flex; align-items: center; gap: 14px; margin: 0; }
.vitrin-etiket::before { content: ""; width: 34px; height: 1px; background: var(--line); }
.vitrin-baslik { font: 300 clamp(44px, 5.4vw, 82px)/1.02 var(--display); letter-spacing: -.025em; margin: 26px 0; color: var(--ink); }
.vitrin-baslik em { font-style: italic; color: var(--accent); }
.vitrin-ozet { font-size: 16px; line-height: 1.7; color: #4b443b; max-width: 36ch; margin: 0 0 34px; }
.vitrin-dugme { align-self: flex-start; display: inline-flex; gap: 12px; align-items: center; background: var(--accent-soft); color: var(--sheet);
                text-decoration: none; font: 500 11.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; padding: 17px 26px; }
.vitrin-dugme b { font-weight: 400; color: #E4E4C2; }
.vitrin-dugme:hover { background: var(--ink); color: var(--sheet); }
.vitrin-gorsel { position: relative; }
.vitrin-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
                     clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); }
.vitrin-noktalar { position: absolute; left: max(24px, calc((100vw - 1240px) / 2 + 24px)); bottom: 34px; z-index: 3;
                   display: flex; gap: 14px; align-items: center; }
.vitrin-noktalar button { width: 28px; height: 2px; border: 0; background: var(--line); cursor: pointer; padding: 0; transition: width .3s; }
.vitrin-noktalar button.etkin { background: var(--ink); width: 48px; }
.vitrin-sayac { font: 500 11px/1 var(--mono); letter-spacing: .18em; color: var(--muted); margin-left: 10px; }
@media (max-width: 860px) {
  .vitrin { height: auto; max-height: none; min-height: 0; }
  .vitrin-kare { position: relative; grid-template-columns: 1fr; display: none; opacity: 1; visibility: visible; }
  .vitrin-kare.etkin { display: grid; }
  .vitrin-metin { padding: 40px 22px 30px; }
  .vitrin-gorsel { height: 58vh; }
  .vitrin-gorsel img { clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%); }
  .vitrin-noktalar { position: static; padding: 0 22px 26px; }
}
@media (prefers-reduced-motion: reduce) { .vitrin-kare { transition: none; } }
/* 10.10.2026 — renk birliği: üst menü ve vitrin zemini sayfanın kâğıt tonunda (aradaki ton farkı kalktı);
   %15 indirim etiketi tepedeki pembe şeridin degradesinde. */
:root { --sheet: #F7F4EE; }   /* kart yüzeyi: kâğıt (#F2EEE6) ile eski beyaz (#FBF9F5) arası */
.site-header, .vitrin { background: var(--paper); }
.indirim-etiket { background: linear-gradient(90deg, #B8627C 0%, #8E3352 30%, #6B1F3B 50%, #8E3352 70%, #B8627C 100%); color: #FBF9F5; }

/* ana sayfa Galeri bölümü — dört dikey fotoğraf yan yana (10.10.2026 onaylı) */
.ana-galeri { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ana-galeri figure { margin: 0; overflow: hidden; background: var(--paper-2); }
.ana-galeri img { width: 100%; height: auto; aspect-ratio: 2/3; object-fit: cover; display: block; transition: transform .6s ease; }
.ana-galeri figure:hover img { transform: scale(1.03); }
@media (max-width: 860px) { .ana-galeri { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* ============================================================ galeri vitrini (10.10.2026 onaylı)
   Yeşil degrade zemin, solda yazı, sağda mozaik; altında yeşilden alt bilginin
   pembesine yumuşak geçiş (.gy-gecis). */
.galeri-yeni-kirinti { padding-top: 28px; }
.galeri-yeni { background: var(--accent-degrade); color: var(--accent-murekkep); margin: 10px 0 0; }
.galeri-yeni-ic { max-width: 1240px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 38% 62%; align-items: center; }
.gy-metin { padding: 70px 56px 60px 0; display: flex; flex-direction: column; justify-content: center; }
.gy-metin .gy-etiket { font: 500 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; display: flex; align-items: center; gap: 14px;
                       margin: 0; max-width: none; color: var(--accent-murekkep); opacity: .8; }
.gy-etiket::before { content: ""; width: 34px; height: 1px; background: var(--accent-murekkep); opacity: .5; }
.gy-metin h1 { font: 300 clamp(40px, 4.4vw, 64px)/1.04 var(--display); letter-spacing: -.025em; margin: 22px 0; color: var(--accent-murekkep); }
.gy-metin h1 em { font-style: italic; }
.gy-metin p { font-size: 16px; line-height: 1.75; margin: 0 0 30px; max-width: 40ch; color: var(--accent-murekkep); }
.gy-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(43,42,22,.3); }
.gy-liste li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 0; border-bottom: 1px solid rgba(43,42,22,.3);
               font: 500 11.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.gy-liste li span { font-family: var(--body, inherit); letter-spacing: 0; text-transform: none; font-size: 14px; opacity: .75; text-align: right; }
.gy-mozaik { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 250px 250px 330px; gap: 10px; padding: 40px 0 0; }
.gy-mozaik a { display: block; min-height: 0; overflow: hidden; background: #d8d3c4; }
.gy-mozaik img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.gy-mozaik a:hover img { transform: scale(1.04); }
.gy-mozaik a:nth-child(1) { grid-row: 1 / span 2; }
.gy-mozaik a:nth-child(4) { grid-column: 1 / span 2; }
.gy-gecis { height: 320px; position: relative; background: linear-gradient(90deg, #6B1F3B 0%, #6B1F3B 30%, #8E3352 60%, #B8627C 100%); }
.gy-gecis::before { content: ""; position: absolute; inset: 0; background: var(--accent-degrade);
  -webkit-mask-image: linear-gradient(#000 0%, rgba(0,0,0,.92) 18%, rgba(0,0,0,.72) 38%, rgba(0,0,0,.45) 58%, rgba(0,0,0,.2) 78%, rgba(0,0,0,.06) 92%, transparent 100%);
          mask-image: linear-gradient(#000 0%, rgba(0,0,0,.92) 18%, rgba(0,0,0,.72) 38%, rgba(0,0,0,.45) 58%, rgba(0,0,0,.2) 78%, rgba(0,0,0,.06) 92%, transparent 100%); }
body:has(.gy-gecis) main { padding-bottom: 0; margin-bottom: 0; }
body:has(.gy-gecis) .site-footer { margin-top: 0; }
@media (max-width: 860px) {
  .galeri-yeni-ic { grid-template-columns: 1fr; padding: 0 20px; }
  .gy-metin { padding: 44px 0 26px; }
  .gy-mozaik { grid-template-rows: 200px 200px 260px; padding: 0; }
}

/* ============================================================
   ÖDEME — kart ile ödeme sayfası
   ------------------------------------------------------------
   ⚠️ NEDEN SONRADAN EKLENDİ: Kart.cshtml doğru sınıflarla
   (odeme-duzen · form-satir · form-ucluk · odeme-ozet) yazılmıştı
   ama bu sınıfların HİÇBİR kuralı yoktu. Sayfa tarayıcının ham
   form görünümüyle açılıyordu: etiketler alanların yanında,
   alanlar farklı genişlikte, fieldset çerçevesi ortada.
   10.10.2026'da ilk kez gerçek bir ödeme ekranı açıldığında
   görüldü — POS daha önce hiç açılmadığı için bu sayfa canlıda
   hiç izlenmemişti.

   Görsel dil .alan deseninden alındı (mono/büyük harf küçük
   etiket + çerçeveli alan); yeni bir dil uydurulmadı.
   ============================================================ */

.odeme-duzen { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
@media (min-width: 900px) {
  .odeme-duzen { grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: 36px; }
}

.odeme-form fieldset {
  border: 1px solid var(--line); background: var(--sheet);
  border-radius: 3px; padding: 24px 22px 22px; margin: 0;
}
.odeme-form legend {
  font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); padding: 0 8px; margin-left: -8px;
}

/* Güvenlik notu — kilit simgesi ile tek satır */
.odeme-guvenlik {
  display: flex; align-items: flex-start; gap: 9px;
  font: 400 13px/1.55 var(--body); color: var(--muted);
  background: var(--accent-tint); border: 1px solid var(--accent-soft);
  border-radius: 2px; padding: 11px 13px; margin: 0 0 22px;
}
.odeme-guvenlik svg { flex: none; margin-top: 2px; color: var(--accent); }
.odeme-guvenlik strong { color: var(--ink); font-weight: 600; }

/* Alan satırı — .alan ile aynı dil */
.odeme-form .form-satir { display: flex; flex-direction: column; gap: 5px; margin-bottom: 15px; }
.odeme-form .form-satir label {
  font: 500 9.5px/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.odeme-form input, .odeme-form select {
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  border-radius: 2px; padding: 10px 12px; font: 400 15px/1.5 var(--body);
  width: 100%; appearance: none;
}
.odeme-form select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px;
}
.odeme-form input:focus, .odeme-form select:focus { border-color: var(--accent); outline: none; }

/* Kart numarası tek başına geniş, rakamlar mono */
.odeme-form #pan, .odeme-form #cvv { font-family: var(--mono); letter-spacing: .06em; }

/* Ay · Yıl · CVV yan yana */
.odeme-form .form-ucluk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.odeme-form .form-ucluk > div { display: flex; flex-direction: column; gap: 5px; }
.odeme-form .form-ucluk label {
  font: 500 9.5px/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
@media (max-width: 420px) {
  .odeme-form .form-ucluk { grid-template-columns: 1fr 1fr; }
  .odeme-form .form-ucluk > div:last-child { grid-column: 1 / -1; }
}

.odeme-dugme { width: 100%; margin-top: 20px; }
.odeme-not { font: 400 12.5px/1.6 var(--mono); color: var(--muted); margin: 14px 0 0; }
.odeme-not strong { color: var(--ink); }

/* Sağdaki özet kutusu */
.odeme-ozet {
  border: 1px solid var(--line); background: var(--paper-2);
  border-radius: 3px; padding: 22px 20px;
}
.odeme-ozet h2 { font: 400 20px/1.2 var(--display); margin: 0 0 16px; }
.odeme-ozet dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; }
.odeme-ozet dt {
  font: 500 9.5px/1.6 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.odeme-ozet dd { margin: 0; font: 400 15px/1.6 var(--body); text-align: right; }
.odeme-ozet dd code { font: 400 12.5px/1.6 var(--mono); word-break: break-all; }
.odeme-ozet .odeme-not { margin-top: 16px; }

/* ============================================================
   HESAP — üyelik sayfaları (giriş · kayıt · siparişlerim)
   ------------------------------------------------------------
   ⚠️ Sayfa işaretlemesiyle BİRLİKTE yazıldı. Ödeme sayfasında
   (10.10.2026) işaretleme doğru sınıflarla yazılmış ama kuralları
   hiç eklenmemişti; sayfa aylarca tarayıcının ham form görünümüyle
   durdu ve bu ancak ilk gerçek ziyaretçi geldiğinde görüldü.
   Görsel dil .alan / .odeme-* desenlerinden alındı.
   ============================================================ */

.hesap-duzen { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: start; }
@media (min-width: 860px) {
  .hesap-duzen { grid-template-columns: minmax(0, 1.1fr) minmax(240px, .9fr); gap: 34px; }
}

.hesap-form {
  border: 1px solid var(--line); background: var(--sheet);
  border-radius: 3px; padding: 24px 22px;
}
.hesap-form .form-satir { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.hesap-form .form-satir label {
  font: 500 9.5px/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.hesap-form input {
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  border-radius: 2px; padding: 10px 12px; font: 400 15px/1.5 var(--body); width: 100%;
}
.hesap-form input:focus { border-color: var(--accent); outline: none; }
.hesap-ipucu { font: 400 12px/1.5 var(--mono); color: var(--muted); }
.istege-bagli { font: 400 11px/1 var(--mono); color: var(--muted); text-transform: none; letter-spacing: 0; }

.hesap-dugme { width: 100%; margin-top: 6px; }
.hesap-not { font: 400 13px/1.7 var(--body); color: var(--muted); margin: 16px 0 0; }
.hesap-not a { color: var(--accent); }

/* Sağdaki bilgi kutusu */
.hesap-yan {
  border: 1px solid var(--line); background: var(--paper-2);
  border-radius: 3px; padding: 22px 20px;
}
.hesap-yan h2 { font: 400 19px/1.25 var(--display); margin: 0 0 12px; }
.hesap-yan p { font: 400 14px/1.65 var(--body); color: var(--muted); margin: 0 0 12px; }
.hesap-yan strong { color: var(--ink); }
.hesap-liste { margin: 0 0 14px; padding-left: 18px; }
.hesap-liste li { font: 400 14px/1.7 var(--body); color: var(--muted); margin-bottom: 4px; }

/* Siparişlerim */
.hesap-baslik { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; margin-bottom: 20px; }
.hesap-baslik h1 { margin: 0; }
.hesap-kim { font: 400 13px/1.6 var(--mono); color: var(--muted); margin: 0; }
.hesap-kim a { color: var(--accent); }

.hesap-tablo { width: 100%; border-collapse: collapse; }
.hesap-tablo th {
  text-align: left; font: 500 9.5px/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  padding: 0 12px 10px 0; border-bottom: 1px solid var(--line);
}
.hesap-tablo td {
  padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line);
  font: 400 14.5px/1.5 var(--body); vertical-align: middle;
}
.hesap-tablo code { font: 400 13px/1.5 var(--mono); }
/* ⚠️ Dar ekranda tablo KIRILMAZ, yatay kaydırılır: sütunları alt alta
   dizmek "hangi tutar hangi siparişin" bilgisini kaybettiriyordu. */
@media (max-width: 620px) {
  .hesap-tablo { display: block; overflow-x: auto; white-space: nowrap; }
}

.hesap-bos {
  border: 1px dashed var(--line); border-radius: 3px;
  padding: 36px 24px; text-align: center;
}
.hesap-bos p { font: 400 15px/1.6 var(--body); color: var(--muted); margin: 0 0 16px; }

/* ============================================================
   DEKONT — yazdırılabilir ödeme belgesi
   ------------------------------------------------------------
   ⚠️ Gövde sunucuda üretiliyor ve kendi satır içi stillerini
   taşıyor — çünkü AYNI gövde e-postaya da gidiyor ve e-posta
   istemcileri harici stil dosyası yüklemez. Buradaki kurallar
   yalnızca sayfa çerçevesi ve yazdırma davranışı içindir.
   ============================================================ */
.dekont-arac { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.dekont-kagit {
  border: 1px solid var(--line); background: var(--sheet);
  border-radius: 3px; padding: 28px 26px; max-width: 760px;
}

@media print {
  /* Kâğıda yalnızca belge basılır: başlık, menü, altbilgi ve
     düğmeler çıkmaz. Çıksaydı dekont bir ekran görüntüsü gibi
     görünür, belge gibi değil. */
  header, footer, nav, .dekont-arac, .rozet-serit, .kirinti { display: none !important; }
  .dekont-kagit { border: 0; padding: 0; max-width: none; }
  body { background: #fff; }
}

/* =====================================================================
   WHATSAPP — yüzen "hemen yaz" düğmesi (12.10.2026)

   ⚠️ SEPET/ÖDEME AKIŞINI KAPATMAMALI. Sağ altta duruyor; sepet özeti ve
   ödeme düğmeleri de orada yoğunlaşıyor. Bu yüzden z-index ölçülü (40)
   ve dar ekranda düğme yalnızca simgeye küçülüyor — telefonda metinli
   hâli ekranın altını kaplıyordu.

   ⚠️ `position: fixed` ile sayfa akışından çıkar; alt bilginin üstüne
   binmemesi için alt bilgiye ayrıca boşluk EKLENMEZ — düğme küçük ve
   saydam değil, altındaki içerik kaydırılarak okunabiliyor.

   ⚠️ Renk WhatsApp'ın kendi yeşili (#25D366) — markanın fıstık yeşiliyle
   (--accent) değiştirilmedi: ziyaretçi bu düğmeyi RENGİNDEN tanıyor,
   marka uyumu için boyamak tanınırlığı düşürürdü.
   ===================================================================== */
.wa-dugme {
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  display: inline-flex; align-items: center; gap: 9px;
  background: #25D366; color: #fff; text-decoration: none;
  padding: 11px 16px 11px 13px; border-radius: 999px;
  font: 500 14px/1 var(--sans, system-ui, sans-serif);
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
  transition: transform .15s ease, box-shadow .15s ease;
}
.wa-dugme svg { width: 22px; height: 22px; fill: #fff; flex: none; }
.wa-dugme:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.28); }
.wa-dugme:focus-visible { outline: 3px solid var(--ink, #222); outline-offset: 3px; }

/* ⚠️ Hareketi azaltmayı seçen ziyaretçide yükselme animasyonu kapanır. */
@media (prefers-reduced-motion: reduce) {
  .wa-dugme { transition: none; }
  .wa-dugme:hover { transform: none; }
}

/* Dar ekranda yalnızca simge */
@media (max-width: 640px) {
  .wa-dugme { right: 14px; bottom: 14px; padding: 13px; gap: 0; }
  .wa-dugme span { display: none; }
}

/* =====================================================================
   ARAMA SAYFASI (/ara.html) — 12.10.2026

   ⚠️ NEDEN SONRADAN YAZILDI: şablonda sınıflar baştan vardı ama CSS
   karşılıkları hiç yazılmamıştı. Sayfa bu yüzden tarayıcı varsayılanlarıyla
   açılıyordu: sistem yazı tipi, mavi bağlantılar, kutulu gri düğme — hatta
   `.gizli-metin` tanımsız olduğu için ekran okuyucuya ayrılmış "Sitede ara"
   etiketi GÖRÜNÜYORDU. Sayfa çalışıyordu, yalnızca siteye benzemiyordu.

   ⚠️ Ölçüler ve renkler sitenin kendi değişkenlerinden alınır
   (--line, --sheet, --mono, --display); sabit renk yazılmaz ki tema
   değiştiğinde bu sayfa geride kalmasın.
   ===================================================================== */

/* ⚠️ Ekran okuyucuya görünür, gözle görünmez. `display:none` KULLANILMAZ:
   o, etiketi ekran okuyucudan da gizler ve arama kutusu adsız kalır. */
.gizli-metin {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.ara-sayfa { max-width: 760px; }

/* --- arama kutusu --- */
.ara-kutu { display: flex; gap: 10px; margin: 0 0 28px; }
.ara-kutu input[type="search"] {
  flex: 1; min-width: 0;
  border: 1px solid var(--line); background: var(--sheet); color: var(--ink);
  border-radius: 2px; padding: 11px 13px; font: 400 15px/1.5 var(--body);
  appearance: none;   /* Safari'nin yuvarlak arama kutusunu bastırır */
}
.ara-kutu input[type="search"]::placeholder { color: var(--muted); }
.ara-kutu input[type="search"]:focus { border-color: var(--accent); outline: none; }
.ara-dugme {
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-murekkep);
  border-radius: 2px; padding: 11px 20px; cursor: pointer;
  font: 500 11px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase;
  flex: none;
}
.ara-dugme:hover { background: var(--accent-soft); color: var(--sheet); border-color: var(--accent-soft); }

/* --- özet ve yönlendirme --- */
.ozet, .ara-ozet { font: 400 15px/1.7 var(--body); color: var(--muted); margin: 0 0 20px; }
.ara-ozet strong, .ozet strong { color: var(--ink); font-weight: 500; }
.ara-oneri { margin: 0 0 24px; padding-left: 18px; font: 400 14.5px/1.75 var(--body); color: var(--muted); }
.ara-oneri strong { color: var(--ink); font-weight: 500; }

/* --- tür süzgeci --- */
.ara-suzgec { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.ara-suzgec-oge {
  border: 1px solid var(--line); border-radius: 2px; padding: 7px 13px;
  font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
}
.ara-suzgec-oge:hover { border-color: var(--accent); color: var(--ink); }
/* ⚠️ Seçili süzgeç yalnızca RENKLE değil, dolu zeminle de ayrılır: renk körü
   ziyaretçi hangi süzgecin açık olduğunu yalnızca tondan ayırt edemez. */
.ara-suzgec-secili {
  background: var(--ink); border-color: var(--ink); color: var(--sheet);
}

/* --- sonuç listesi --- */
.ara-liste { list-style: none; margin: 0; padding: 0; }
.ara-sonuc {
  padding: 18px 0; border-top: 1px solid var(--line);
  display: grid; gap: 6px;
}
.ara-sonuc:last-child { border-bottom: 1px solid var(--line); }
.ara-tur {
  font: 500 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-soft);
}
.ara-baslik {
  font: 400 21px/1.3 var(--display); color: var(--ink); text-decoration: none;
}
a.ara-baslik:hover { color: var(--accent-soft); text-decoration: underline; text-underline-offset: 3px; }
.ara-tarih { font: 400 12px/1 var(--mono); color: var(--muted); }
.ara-ozet-metin { margin: 2px 0 0; font: 400 14.5px/1.7 var(--body); color: var(--muted); }

/* --- kapsam dipnotu --- */
.ara-kapsam { margin-top: 34px; border-top: 1px solid var(--line); padding-top: 18px; }
.ara-kapsam summary {
  cursor: pointer; font: 500 10.5px/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.ara-kapsam summary:hover { color: var(--ink); }
.ara-kapsam ul { margin: 14px 0 0; padding-left: 18px; font: 400 14px/1.7 var(--body); color: var(--muted); }

@media (max-width: 560px) {
  /* Dar ekranda düğme alta iner — yan yana kaldığında arama kutusuna
     yalnızca birkaç harf sığıyordu. */
  .ara-kutu { flex-direction: column; }
  .ara-dugme { width: 100%; }
}

/* =====================================================================
   HESAP — Bilgilerim sayfası (12.10.2026)

   ⚠️ NEDEN EKLENDİ: Giriş yapan müşteri yalnızca siparişlerini görebiliyordu;
   adını, telefonunu, adresini, fatura bilgisini ve parolasını değiştirecek
   bir ekran YOKTU. Bilgisi değişen müşterinin tek yolu her siparişte formu
   yeniden doldurmaktı.
   ===================================================================== */

/* Hesap bölümleri arası geçiş — müşteri "siparişlerim" ile "bilgilerim"
   arasında ana sayfaya dönmeden gidebilmeli. */
.hesap-sekme { display: flex; gap: 8px; margin: 0 0 26px; flex-wrap: wrap; }
.hesap-sekme a {
  border: 1px solid var(--line); border-radius: 2px; padding: 8px 15px;
  font: 500 10.5px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
}
.hesap-sekme a:hover { border-color: var(--accent); color: var(--ink); }
/* ⚠️ Açık sekme yalnızca renkle değil DOLU ZEMİNLE ayrılır: renk körü
   ziyaretçi hangi sayfada olduğunu tondan ayırt edemez. */
.hesap-sekme-secili { background: var(--ink); border-color: var(--ink); color: var(--sheet); }

/* İki form yan yana; dar ekranda alt alta (hesap-duzen zaten tek sütuna düşüyor) */
.hesap-kart + .hesap-kart { margin-top: 0; }
.hesap-kart h2 {
  font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 14px; padding-top: 4px;
}
.hesap-kart h2 + .alan, .hesap-kart h2 + .form-ucluk { margin-top: 0; }
.hesap-kart .alan { margin-bottom: 14px; }
.hesap-kart .dugme { margin-top: 6px; }

/* ⚠️ Devre dışı alan (e-posta) DEĞİŞTİRİLEMEZ OLDUĞUNU göstermeli; aksi hâlde
   müşteri yazmayı dener ve neden olmadığını anlamaz. */
.hesap-form input[disabled] { background: var(--paper-2); color: var(--muted); cursor: not-allowed; }

.alan-not { display: block; margin-top: 4px; font: 400 12px/1.5 var(--body); color: var(--muted); }

/* Başarı ve hata kutuları: ikisi de uyari-kutu'dan türer, yalnızca
   vurgu rengi değişir. */
.iyi-kutu  { border-left-color: var(--accent); }
.hata-kutu { border-color: var(--bad); border-left-color: var(--bad); background: #FBF2F0; }

/* Dekontu olmayan (ödenmemiş) sipariş satırındaki tire */
.hesap-bekliyor { color: var(--muted); }

@media (max-width: 760px) {
  .hesap-sekme a { flex: 1; text-align: center; }
}

/* ---------------------------------------------------------------------
   Hesap formunda da çok sütunlu satırlar

   ⚠️ `.form-ucluk` kuralları yalnızca `.odeme-form` altına yazılmıştı;
   Bilgilerim sayfasında aynı sınıf kullanıldığı hâlde hiçbir kural
   uygulanmıyordu ve alanlar yan yana gelmesi gerekirken alt alta
   diziliyordu. Sayfa "çalışıyor" görünüyordu — yalnızca düzeni yoktu.
   --------------------------------------------------------------------- */
.hesap-form .form-ucluk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hesap-form .form-ucluk > div { display: flex; flex-direction: column; gap: 5px; }
/* İki alanlı satırlar üçe bölünmesin */
.hesap-form .form-ucluk:has(> div:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 700px) {
  .hesap-form .form-ucluk { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   SABİT ÖĞELERİN ALTINDA KALAN İÇERİK

   ⚠️ Sayfanın sağ altında WhatsApp düğmesi, sol altında kampanya rozeti
   `position: fixed` duruyor. İkisi de sayfanın SON öğesinin üstüne biner;
   uzun formlarda bu öğe çoğu zaman "Kaydet" / "Siparişi tamamla"
   düğmesidir — yani sayfanın en önemli eylemi örtülüyordu (12.10.2026'da
   Bilgilerim sayfasında görüldü).
   Alt boşluk, sayfa sonuna kaydırıldığında son eylemin bu öğelerin
   üstünde kalmasını sağlar.
   --------------------------------------------------------------------- */
main { padding-bottom: 88px; }