/* babamrb — stil dosyası */

/* Yazı tipleri KENDİ sunucumuzdan (assets/yazi/): Google'a bağlantı yok, CSP'de dış font adresi yok.
   Kurallar Google Fonts'un verdiğiyle BİREBİR aynı (ağırlıklar, aralıklar); sadece Türkçe için latin + latin-ext
   dosyaları var (Vietnamca yok). Fraunces düz: 500 ve 800 aynı dosyayı kullanır (iki kural; ara ağırlıklar en yakına düşer,
   eskisi gibi). Fraunces italik DEĞİŞKEN: wght 300..900 + SOFT + opsz eksenleri. Dosya adı sürüm taşır (v38/v24):
   dosya değişirse ADI da değişmeli, çünkü assets/yazi/.htaccess bunları 1 yıl saklatır. sablon.php <head> aynı dosyaları preload eder. */
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 900; font-display: swap; src: url("yazi/fraunces-v38-tr-italik-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 900; font-display: swap; src: url("yazi/fraunces-v38-tr-italik-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; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 500; font-display: swap; src: url("yazi/fraunces-v38-tr-duz-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 500; font-display: swap; src: url("yazi/fraunces-v38-tr-duz-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; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 800; font-display: swap; src: url("yazi/fraunces-v38-tr-duz-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 800; font-display: swap; src: url("yazi/fraunces-v38-tr-duz-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; }
@font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url("yazi/worksans-v24-tr-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url("yazi/worksans-v24-tr-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; }
@font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url("yazi/worksans-v24-tr-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url("yazi/worksans-v24-tr-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 {
  --krem: #F6EFE3;
  --kagit: #FFFBF4;
  --kahve: #3B2A20;
  --kahve-orta: #5A4334;
  --kahve-acik: #6B5040;
  --kiremit: #B8472F;
  --kiremit-koyu: #9A3A25;
  --seftali: #F2C9A8;
  --cizgi: #E4D6C1;
  --cizgi-koyu: #CDBBA3;
  --etiket-zemin: #F2E6D5;
  /* Anlamlı renkler: karanlık modda bunlar değişir */
  --koyu-zemin: #3B2A20;      /* günün sözü, paylaşım kartı, alt bilgi */
  --koyu-yazi: #F6EFE3;       /* koyu zemin üstündeki yazı */
  --koyu-soluk: #E4D6C1;      /* koyu zemin üstündeki soluk yazı */
  --koyu-kenar: transparent;
  --babadle-yesil: #5E7A3A;   /* Babadle: doğru yer */
  --babadle-sari: #E0A93B;    /* Babadle: kelimede var */
  --babadle-gri: #8A7B6E;     /* Babadle: yok */
  --babadle-tus: #E9DFD0;     /* Babadle: klavye tuşu */
  --vurgu-yazi: #FFFBF4;      /* kiremit zemin üstündeki yazı */
  --secili-zemin: #3B2A20;    /* seçili sekme, seçili kategori, bildirim balonu */
  --secili-yazi: #F6EFE3;
  --basari-zemin: #E7EFDF;
  --basari-yazi: #2F4A22;
  --hata-zemin: #F8E1DA;
  --hata-yazi: #7A2A18;
  /* Modern katman (2026-10-08): yüzey, gölge, cam üst çubuk, arka plan ışıması */
  --ince-kenar: rgba(59, 42, 32, .09);
  --yumusak-vurgu: rgba(184, 71, 47, .10);
  --golge-1: 0 1px 2px rgba(59, 42, 32, .05), 0 6px 18px rgba(59, 42, 32, .06);
  --golge-2: 0 2px 6px rgba(59, 42, 32, .07), 0 22px 44px -12px rgba(59, 42, 32, .22);
  --cam: rgba(255, 251, 244, .78);
  --isima-1: rgba(242, 201, 168, .55);
  --isima-2: rgba(184, 71, 47, .08);
  --nokta: #6E9F4A;
  --fener-isik: transparent;  /* karanlık modda imlecin etrafındaki fener ışığı (açıkta yok) */
  color-scheme: light;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kenar: clamp(18px, 5.5vw, 80px);
}

/* Karanlık mod.
   1) Cihaz karanlık moddaysa otomatik açılır (kullanıcı "aydınlık" seçmediyse).
   2) Kullanıcı düğmeyle "karanlık" seçtiyse her durumda açılır.
   İki blok aynı renkleri içerir; bir renk değiştirirsen ikisinde de değiştir. */
:root[data-tema="koyu"] {
  --krem: #1C1410;
  --kagit: #271D17;
  --kahve: #F3EADC;
  --kahve-orta: #D8C7B3;
  --kahve-acik: #BCA792;
  /* Kontrast (2026-10-10): eski #D0583D koyu zeminde yazı olarak 4,04, üstündeki beyaz yazıyla 3,96 idi (en az 4,5 gerekir).
     Kiremit biraz açıldı (yazı 5,2+) ve DOLGU üstündeki yazı koyu kahve oldu (5,7). */
  --kiremit: #E26F55;
  --kiremit-koyu: #D6624A;
  --vurgu-yazi: #1C1410;
  --cizgi: #3A2C23;
  --cizgi-koyu: #57443A;
  --etiket-zemin: #372920;
  --koyu-zemin: #32241C;
  --koyu-kenar: #4A382D;
  --babadle-yesil: #6E8F45;
  --babadle-sari: #D49A2C;
  --babadle-gri: #4F4238;
  --babadle-tus: #3A2C23;
  --secili-zemin: #F3EADC;
  --secili-yazi: #1C1410;
  --basari-zemin: #22321B;
  --basari-yazi: #CFE3BF;
  --hata-zemin: #3D1C14;
  --hata-yazi: #F4C3B5;
  --ince-kenar: rgba(243, 234, 220, .08);
  --yumusak-vurgu: rgba(208, 88, 61, .16);
  --golge-1: 0 1px 2px rgba(0, 0, 0, .25), 0 6px 18px rgba(0, 0, 0, .18);
  --golge-2: 0 2px 6px rgba(0, 0, 0, .3), 0 24px 48px -12px rgba(0, 0, 0, .55);
  --cam: rgba(28, 20, 16, .74);
  --isima-1: rgba(208, 88, 61, .16);
  --isima-2: rgba(242, 201, 168, .05);
  --nokta: #8BC064;
  --fener-isik: rgba(242, 201, 168, .13);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) {
    --krem: #1C1410;
    --kagit: #271D17;
    --kahve: #F3EADC;
    --kahve-orta: #D8C7B3;
    --kahve-acik: #BCA792;
    --kiremit: #E26F55;
    --kiremit-koyu: #D6624A;
    --vurgu-yazi: #1C1410;
    --cizgi: #3A2C23;
    --cizgi-koyu: #57443A;
    --etiket-zemin: #372920;
    --koyu-zemin: #32241C;
    --koyu-kenar: #4A382D;
  --babadle-yesil: #6E8F45;
  --babadle-sari: #D49A2C;
  --babadle-gri: #4F4238;
  --babadle-tus: #3A2C23;
    --secili-zemin: #F3EADC;
    --secili-yazi: #1C1410;
    --basari-zemin: #22321B;
    --basari-yazi: #CFE3BF;
    --hata-zemin: #3D1C14;
    --hata-yazi: #F4C3B5;
    --ince-kenar: rgba(243, 234, 220, .08);
    --yumusak-vurgu: rgba(208, 88, 61, .16);
    --golge-1: 0 1px 2px rgba(0, 0, 0, .25), 0 6px 18px rgba(0, 0, 0, .18);
    --golge-2: 0 2px 6px rgba(0, 0, 0, .3), 0 24px 48px -12px rgba(0, 0, 0, .55);
    --cam: rgba(28, 20, 16, .74);
    --isima-1: rgba(208, 88, 61, .16);
    --isima-2: rgba(242, 201, 168, .05);
    --nokta: #8BC064;
    --fener-isik: rgba(242, 201, 168, .13);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--krem); color: var(--kahve); font-family: var(--sans); font-size: 16px; line-height: 1.5; display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }
h1, h2, p { margin: 0; }
a { color: var(--kahve); }
a:hover { color: var(--kiremit); }
:focus-visible { outline: 3px solid var(--kiremit); outline-offset: 3px; border-radius: 6px; }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }
/* Ekranda görünmez, ekran okuyucular okur */
.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; }

.atla { position: absolute; left: -9999px; top: 8px; background: var(--secili-zemin); color: var(--secili-yazi); padding: 10px 16px; border-radius: 10px; z-index: 10; }
.atla:focus { left: 8px; }

.biyik path { fill: var(--kiremit); }

/* Düğmeler */
.dugme { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent; font-family: var(--sans); font-size: 15px; font-weight: 600; text-decoration: none; background: transparent; color: var(--kahve); }
.dugme-vurgu { background: var(--kiremit); color: var(--vurgu-yazi); }
.dugme-vurgu:hover { background: var(--kiremit-koyu); color: var(--vurgu-yazi); }
.dugme-cizgi { border-color: var(--cizgi-koyu); background: var(--kagit); }
.dugme-cizgi:hover { border-color: var(--kahve); color: var(--kahve); }
.dugme-cizgi-acik { border-color: #7A5A45; color: var(--koyu-yazi); }
.dugme-cizgi-acik:hover { border-color: var(--koyu-yazi); color: var(--koyu-yazi); }
.dugme-krem { background: var(--kagit); color: var(--kahve); min-height: 54px; padding: 0 34px; font-size: 17px; }
.dugme-krem:hover { background: var(--krem); color: var(--kahve); }
.dugme-genis { width: 100%; min-height: 56px; font-size: 17px; }
.dugme-tehlike:hover { border-color: var(--kiremit); color: var(--kiremit); }

/* Üst çubuk (2026-10-08 modern): yapışkan, buzlu cam; kaydırınca gölge (uygulama.js .kaydirildi) */
.ust { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px var(--kenar); background: var(--cam); -webkit-backdrop-filter: saturate(1.5) blur(18px); backdrop-filter: saturate(1.5) blur(18px); border-bottom: 1px solid var(--ince-kenar); transition: box-shadow .25s; }
.ust.kaydirildi { box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .25); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.logo span { font-family: var(--serif); font-weight: 800; font-size: 24px; line-height: 1; letter-spacing: -.01em; }
.logo .biyik { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.logo:hover .biyik { transform: rotate(-6deg) scale(1.08); }
.ust-sag { display: flex; align-items: center; gap: 8px; flex: none; }

/* Ana menü: 4 grup; masaüstünde açılır panel, telefonda tam genişlik çekmece */
.ana-menu { display: flex; align-items: center; gap: 2px; }
.menu-grup { position: relative; }
.menu-grup summary { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; min-height: 40px; padding: 0 14px; border-radius: 999px; color: var(--kahve-orta); font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; user-select: none; transition: background .15s, color .15s; }
.menu-grup summary::-webkit-details-marker { display: none; }
.menu-grup summary:hover { color: var(--kahve); background: var(--yumusak-vurgu); }
.menu-grup[open] summary, .menu-grup[data-aktif] summary { color: var(--kiremit); }
.menu-grup[open] summary { background: var(--yumusak-vurgu); }
.menu-grup summary:focus-visible { outline: 3px solid var(--kiremit); outline-offset: 2px; }
.menu-ok { width: 10px; height: 7px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.menu-grup[open] .menu-ok { transform: rotate(180deg); }
/* Ok sadece açılır menülerde var, biraz soluk (açıkken tam) */
.menu-ok { opacity: .6; }
.menu-grup[open] .menu-ok, .menu-grup summary:hover .menu-ok { opacity: 1; }
/* Bulunduğun bölümün altında küçük kiremit nokta: sadece renge güvenilmez (renk körü ziyaretçi için ek işaret) */
.menu-grup[data-aktif] summary, .menu-dogrudan[aria-current="page"] { position: relative; }
.menu-grup[data-aktif] summary::after, .menu-dogrudan[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--kiremit); }
/* Bugünün Babadle'si oynanmadıysa Oyunlar'ın yanında yeşil nabız noktası (uygulama.js) */
.menu-nokta { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--nokta); box-shadow: 0 0 0 0 var(--nokta); animation: nabiz 2s infinite; }
.menu-nokta[hidden] { display: none; }
/* Babanın Evi: açılır menü değil, doğrudan bağlantı; ev simgeli hap */
.menu-dogrudan { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--yumusak-vurgu); color: var(--kahve); font-size: 15px; font-weight: 600; text-decoration: none; transition: background .15s, color .15s; }
.menu-dogrudan .ikon { width: 18px; height: 18px; color: var(--kiremit); transition: color .15s, transform .2s; }
.menu-dogrudan:hover { background: var(--kiremit); color: var(--vurgu-yazi); }
.menu-dogrudan:hover .ikon { color: var(--vurgu-yazi); transform: rotate(-6deg) scale(1.08); }
.menu-dogrudan:focus-visible { outline: 3px solid var(--kiremit); outline-offset: 2px; }
.menu-dogrudan[aria-current="page"] { color: var(--kiremit); }
.menu-kutu { position: absolute; top: calc(100% + 12px); left: 50%; z-index: 60; width: 540px; max-width: 92vw; padding: 12px; border-radius: 24px; background: var(--kagit); border: 1px solid var(--ince-kenar); box-shadow: var(--golge-2); transform: translateX(-50%); animation: menu-gel .18s ease-out; }
@keyframes menu-gel { from { opacity: 0; transform: translate(-50%, -6px); } }
/* Özet ile panel arasındaki 12px boşluk fareyle geçilirken "üstünden çıktı" sayılmasın (üstüne gelince açılma) */
.menu-kutu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.menu-alt-baslik { margin: 4px 8px 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--kahve-acik); }
.menu-cipler { list-style: none; margin: 0 0 10px; padding: 0 4px 12px; display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--ince-kenar); }
.menu-cipler a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ince-kenar); background: var(--krem); color: var(--kahve); font-size: 14px; font-weight: 600; text-decoration: none; transition: border-color .15s, color .15s; }
.menu-cipler a:hover { border-color: var(--kiremit); color: var(--kiremit); }
.menu-cipler a[aria-current="page"] { background: var(--kiremit); border-color: var(--kiremit); color: var(--vurgu-yazi); }
.menu-ogeler { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.menu-ogeler a { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; color: var(--kahve); text-decoration: none; transition: background .15s; }
.menu-ogeler a:hover, .menu-ogeler a:focus-visible { background: var(--krem); }
.menu-ikon { flex: none; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 13px; background: var(--yumusak-vurgu); color: var(--kiremit); transition: transform .2s; }
.menu-ogeler a:hover .menu-ikon { transform: scale(1.06) rotate(-3deg); }
.menu-yazi { display: flex; flex-direction: column; min-width: 0; }
.menu-yazi strong { font-size: 15px; font-weight: 700; line-height: 1.25; }
.menu-yazi small { font-size: 12.5px; color: var(--kahve-acik); line-height: 1.3; }
.menu-ogeler a[aria-current="page"] strong { color: var(--kiremit); }
.menu-ogeler a[aria-current="page"] .menu-ikon { background: var(--kiremit); color: var(--vurgu-yazi); }
/* Öne çıkan öğe (Oyunlar'da Babadle): tam satır, koyu kutu; ana sayfadaki koyu Babadle kartıyla aynı dil */
.menu-ogeler .menu-one { grid-column: 1 / -1; margin-bottom: 4px; }
.menu-ogeler .menu-one a, .menu-ogeler .menu-one a:hover, .menu-ogeler .menu-one a:focus-visible { padding: 14px; border: 1px solid var(--koyu-kenar); border-radius: 18px; background: radial-gradient(110% 170% at 100% 0%, rgba(184, 71, 47, .4), transparent 62%), var(--koyu-zemin); color: var(--koyu-yazi); }
.menu-ogeler .menu-one a:hover { border-color: var(--seftali); }
.menu-one .menu-ikon { width: 46px; height: 46px; background: var(--kiremit); color: var(--vurgu-yazi); }
.menu-one .menu-yazi strong { font-size: 16px; }
.menu-one .menu-yazi small { color: var(--koyu-soluk); font-size: 13px; }
.menu-ogeler .menu-one a[aria-current="page"] strong { color: var(--seftali); }
.menu-one .babadle-mini { margin-left: auto; grid-template-columns: repeat(5, 12px); gap: 4px; }
.menu-one .babadle-mini i { width: 12px; height: 12px; border-radius: 3px; }
/* Ortak ince çizgi simge */
.ikon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ust .menu-dugme { display: none; }
.menu-dugme svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ust-ekle .ikon { width: 18px; height: 18px; stroke-width: 2.4; }
/* Eşik 1240px: 5 öğe yan yana yaklaşık 1215px ister (logo + 5 öğe + sağ düğmeler + kenar boşlukları); ölçüldü, 1130'da
   "Babanın Evi" iki satıra bölünüyordu. Eşiği değiştirirsen uygulama.js'teki (min-width: 1241px) ile aynı tut. */
@media (max-width: 1240px) {
  .ust .menu-dugme { display: inline-flex; }
  .ana-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; padding: 8px var(--kenar) 22px; background: var(--kagit); border-bottom: 1px solid var(--ince-kenar); box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .35); }
  body.menu-acik .ana-menu { display: flex; animation: cekmece-gel .2s ease-out; }
  @keyframes cekmece-gel { from { opacity: 0; transform: translateY(-8px); } }
  .menu-grup { border-bottom: 1px solid var(--ince-kenar); }
  .menu-grup summary .menu-ok { margin-left: auto; }
  .menu-grup summary { width: 100%; justify-content: flex-start; gap: 10px; min-height: 56px; padding: 0 4px; border-radius: 0; background: none; color: var(--kahve); font-family: var(--serif); font-size: 20px; font-weight: 800; }
  .menu-grup summary:hover, .menu-grup[open] summary { background: none; }
  .menu-kutu { position: static; width: auto; max-width: none; padding: 0 0 14px; border: none; border-radius: 0; background: none; box-shadow: none; transform: none; animation: none; }
  .menu-cipler { padding: 0 0 12px; }
  .menu-dogrudan { width: 100%; min-height: 56px; padding: 0 4px; gap: 12px; border-radius: 0; border-bottom: 1px solid var(--ince-kenar); background: none; font-family: var(--serif); font-size: 20px; font-weight: 800; }
  .menu-dogrudan:hover { background: none; color: var(--kiremit); }
  .menu-dogrudan .ikon { width: 22px; height: 22px; }
  .menu-dogrudan:hover .ikon { color: var(--kiremit); transform: none; }
  .menu-grup[data-aktif] summary::after, .menu-dogrudan[aria-current="page"]::after { display: none; }
  .menu-ok { opacity: 1; }
  .menu-kutu::before { display: none; }
}
@media (max-width: 460px) { .menu-ogeler { grid-template-columns: 1fr; } }

/* Simge düğmeleri (arama, tema, menü) */
.ikon-dugme { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; border: 1px solid transparent; background: var(--yumusak-vurgu); color: var(--kahve); transition: background .15s, color .15s, transform .15s; }
.ikon-dugme:hover { background: var(--kiremit); color: var(--vurgu-yazi); }
.ikon-dugme:active { transform: scale(.94); }
.ikon-dugme svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* Dar telefonlarda üst menü tek satıra sığsın (logo + arama + tema + Söz ekle) */
/* Telefonda arama düğmesi üst çubukta yok (menüde "Söz ara" var): logo + tema + Söz ekle + Menü tek satır */
@media (max-width: 520px) {
  .ust .ust-sag > a.ikon-dugme { display: none; }
}
@media (max-width: 420px) {
  .ust { gap: 8px; }
  .logo { gap: 6px; }
  .logo span { font-size: 20px; }
  .logo .biyik { width: 32px; height: auto; }
  .ust .ust-sag { gap: 6px; }
  .ust .tema-dugme, .ust .ikon-dugme { width: 40px; height: 40px; }
  .ust .ust-sag .dugme { min-height: 40px; padding: 0 12px; font-size: 13px; }
}

/* Arama sayfası */
.ara-ust { display: flex; flex-direction: column; gap: 16px; padding: 40px var(--kenar) 24px; max-width: 820px; }
.ara-ust h1 { font-family: var(--serif); font-weight: 800; font-size: clamp(32px, 5vw, 52px); line-height: 1.05; }
.ara-form { display: flex; gap: 10px; }
.ara-form input { flex: 1; min-height: 56px; font-size: 17px; border-radius: 999px; padding: 0 22px; }
.ara-form .dugme { min-height: 56px; padding: 0 28px; }
.ara-oneriler { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ara-sonuc-baslik { font-family: var(--serif); font-weight: 800; font-size: clamp(20px, 2.6vw, 26px); margin-bottom: 18px; }

/* Aydınlık / karanlık mod düğmesi */
.tema-dugme { position: relative; display: none; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border-radius: 999px; border: 1px solid var(--cizgi-koyu); background: var(--krem); color: var(--kahve); transition: background .2s, border-color .2s, color .2s, transform .15s; }
:root[data-tema] .tema-dugme { display: inline-flex; } /* JS yoksa düğme işe yaramaz, gizli kalır */
.tema-dugme:hover { border-color: var(--kiremit); color: var(--kiremit); }
.tema-dugme:active { transform: scale(.92); }
.tema-dugme svg { position: absolute; transition: opacity .25s, transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.tema-ay path { fill: currentColor; }
.tema-gunes circle { fill: var(--seftali); }
.tema-gunes path { fill: none; stroke: var(--seftali); stroke-width: 2; stroke-linecap: round; }
.tema-gunes { opacity: 0; transform: rotate(-90deg) scale(.5); }
:root[data-tema="koyu"] .tema-ay { opacity: 0; transform: rotate(90deg) scale(.5); }
:root[data-tema="koyu"] .tema-gunes { opacity: 1; transform: none; }
.tema-dugme.don svg { animation: tema-don .45s ease; }
@keyframes tema-don { from { rotate: -120deg; } to { rotate: 0deg; } }
@media (prefers-reduced-motion: reduce) { .tema-dugme svg { transition: opacity .2s; } .tema-dugme.don svg { animation: none; } }

/* Üst menü 1120px'ten darsa kategoriler alt satıra geçer (logo + kategoriler + düğmeler tek satıra sığmıyor) */
@media (max-width: 1120px) {
  .tema-dugme, .ikon-dugme { width: 44px; height: 44px; }
  .ust-sag { gap: 8px; }
  .logo span { font-size: 22px; }
  .ust .dugme { min-height: 44px; padding: 0 16px; font-size: 14px; }
}

/* Karşılama */
.karsilama { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 64px var(--kenar) 56px; }
.karsilama-marka { display: flex; flex-direction: column; gap: 14px; }
.karsilama h1 { font-family: var(--serif); font-weight: 800; font-size: clamp(44px, 7vw, 88px); line-height: 1; }
.slogan { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: clamp(19px, 2.2vw, 28px); color: var(--kahve-orta); }
.aciklama { font-size: 17px; color: var(--kahve-orta); max-width: 460px; }
.gunun-sozu { background: var(--koyu-zemin); color: var(--koyu-yazi); border: 1px solid var(--koyu-kenar); border-radius: 28px; padding: clamp(26px, 3vw, 40px); display: flex; flex-direction: column; gap: 22px; }
.gunun-etiket { font-size: 14px; font-weight: 600; color: var(--seftali); }
.gunun-metin { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.2; color: var(--koyu-yazi); text-decoration: none; }
.gunun-metin:hover { color: var(--seftali); }
.gunun-dugmeler { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 800px) {
  .karsilama { grid-template-columns: 1fr; gap: 28px; padding-top: 36px; padding-bottom: 28px; }
  .karsilama-marka { align-items: center; text-align: center; }
  .karsilama .aciklama { display: none; }
  .biyik-buyuk { width: 90px; height: 33px; }
}
/* Telefonda ilk ekran: küçük yatay logo, günün sözü hemen görünsün */
@media (max-width: 640px) {
  .karsilama { gap: 18px; padding-top: 20px; padding-bottom: 20px; }
  .karsilama-marka { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 12px; row-gap: 4px; }
  .karsilama-marka .biyik-buyuk { width: 64px; height: 24px; }
  .karsilama h1 { font-size: 40px; }
  .karsilama .slogan { grid-column: 1 / -1; font-size: 18px; }
  .gunun-sozu { gap: 16px; padding: 22px; border-radius: 22px; }
  .gunun-metin { font-size: 24px; }
}

.liste-not { margin: -6px 0 16px; font-size: 14px; color: var(--kahve-orta); }

/* Bot doğrulaması (Cloudflare Turnstile) kutusu */
.cf-turnstile { min-height: 65px; margin: 4px 0 12px; }

/* Kartlar arasında söz ekleme çağrısı */
.kart.kart-cagri { background: var(--kiremit); border-color: var(--kiremit); color: var(--vurgu-yazi); text-decoration: none; justify-content: center; align-items: flex-start; gap: 12px; }
.kart-cagri-baslik { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 22px; line-height: 1.25; }
.kart.kart-cagri .dugme { margin-top: 6px; }

/* Söz sayfası: oy sonrası öneri ve sonraki söz */
.oy-sonrasi { width: 100%; display: flex; flex-direction: column; gap: 12px; padding-top: 14px; border-top: 1px solid var(--cizgi); font-size: 15px; }
.oy-sonrasi[hidden] { display: none; }
.oy-sonrasi strong { color: var(--kiremit); }
.oy-sonrasi .dugme { justify-content: center; }
.oy-sonraki { align-self: center; display: inline-flex; align-items: center; min-height: 44px; margin: -8px 0 -10px; font-weight: 600; color: var(--kiremit); text-underline-offset: 3px; }
.sonraki-soz { display: flex; flex-direction: column; gap: 6px; padding: 20px 24px; border-radius: 20px; border: 1px solid var(--cizgi); background: var(--kagit); text-decoration: none; color: var(--kahve); }
.sonraki-soz:hover { border-color: var(--kiremit); }
.sonraki-etiket { font-size: 14px; font-weight: 600; color: var(--kiremit); }
.sonraki-metin { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 18px; line-height: 1.3; }

/* Oy düğmesi */
.oy { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--kiremit); background: transparent; color: var(--kiremit); font-size: 14px; font-weight: 600; transition: transform .15s ease; }
.oy:hover:not(:disabled) { background: var(--kiremit); color: var(--vurgu-yazi); }
.oy-sayi::before { content: "· "; }
.oy.buyuk { min-height: 52px; padding: 0 26px; border: none; background: var(--kiremit); color: var(--vurgu-yazi); font-size: 16px; }
.oy.buyuk:hover:not(:disabled) { background: var(--kiremit-koyu); }
.oy.oylandi { cursor: default; background: var(--etiket-zemin); color: var(--kiremit-koyu); border-color: var(--etiket-zemin); }
.oy.oylandi.buyuk { background: var(--seftali); color: #3B2A20; }
.oy.zipla { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .oy { transition: none; } .oy.zipla { transform: none; } }

/* Söz listesi */
.tanitim { margin: 64px var(--kenar) 0; max-width: 760px; display: flex; flex-direction: column; gap: 14px; color: var(--kahve-orta); font-size: 16px; line-height: 1.7; }
.tanitim h2 { font-family: var(--serif); font-weight: 800; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.2; color: var(--kahve); }
.tanitim a { color: var(--kiremit); font-weight: 600; }
.kategori-baslik { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 40px var(--kenar) 24px; }
.kategori-baslik a { font-size: 15px; color: var(--kahve-acik); text-decoration: none; }
.kategori-baslik a:hover { color: var(--kiremit); }
.kategori-baslik h1 { font-family: var(--serif); font-weight: 800; font-size: clamp(34px, 5vw, 56px); line-height: 1.05; }
.kategori-baslik a { font-weight: 600; }
.kategori-sayi { color: var(--kahve-orta); font-size: 15px; }
/* Kategori çipleri: dar ekranda yana kayar (taşmaz), geniş ekranda sarar */
.kategori-baslik .kategori-cipler { display: flex; gap: 8px; width: 100%; margin: 6px 0 0; padding: 2px 0 6px; overflow-x: auto; scrollbar-width: none; }
.kategori-cipler::-webkit-scrollbar { display: none; }
.kategori-baslik .kategori-cipler a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--ince-kenar); background: var(--kagit); color: var(--kahve); font-size: 14px; font-weight: 600; box-shadow: var(--golge-1); transition: background .15s, color .15s, border-color .15s; }
.kategori-baslik .kategori-cipler a:hover { border-color: var(--kiremit); color: var(--kiremit); }
.kategori-baslik .kategori-cipler a[aria-current="page"] { background: var(--secili-zemin); border-color: var(--secili-zemin); color: var(--secili-yazi); }
@media (min-width: 801px) { .kategori-baslik .kategori-cipler { flex-wrap: wrap; overflow: visible; } }
.sozler, .benzerler { padding: 0 var(--kenar); }
.benzerler { padding-top: 48px; }
.sozler-ust { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 20px; }
.sozler-ust h2 { font-family: var(--serif); font-weight: 800; font-size: clamp(24px, 3vw, 34px); }
.sozler-ust > a { font-weight: 600; color: var(--kiremit); }
.sekmeler { display: flex; gap: 8px; flex-wrap: wrap; }
.sekmeler a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--cizgi-koyu); text-decoration: none; font-size: 15px; font-weight: 600; }
.sekmeler a[aria-current="page"] { background: var(--secili-zemin); border-color: var(--secili-zemin); color: var(--secili-yazi); }
@media (max-width: 560px) {
  .sekmeler { flex-wrap: nowrap; gap: 6px; width: 100%; }
  .sekmeler a { flex: 1 1 auto; justify-content: center; padding: 0 10px; font-size: 14px; white-space: nowrap; }
}
.izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1000px) { .izgara { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .izgara { grid-template-columns: 1fr; gap: 14px; } }
.kart { background: var(--kagit); border: 1px solid var(--cizgi); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.kart-soz { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: clamp(20px, 2vw, 24px); line-height: 1.3; text-decoration: none; }
.kart-alt { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.etiket { font-size: 13px; font-weight: 600; color: var(--kahve-acik); background: var(--etiket-zemin); padding: 6px 12px; border-radius: 999px; text-decoration: none; }
.daha { display: flex; justify-content: center; padding-top: 28px; }
.bos { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 48px 20px; text-align: center; color: var(--kahve-orta); }
.bos-sayfa { padding: 96px 20px; }
.bos-sayfa h1 { font-family: var(--serif); font-weight: 800; font-size: 40px; color: var(--kahve); }

/* Çağrı alanı */
.cagri { margin: 56px var(--kenar) 0; background: var(--kiremit); color: var(--vurgu-yazi); border-radius: 28px; padding: clamp(28px, 3.5vw, 44px) clamp(22px, 4vw, 56px); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.cagri h2 { font-family: var(--serif); font-weight: 800; font-size: clamp(26px, 3vw, 38px); line-height: 1.15; }
.cagri p { font-size: 17px; margin-top: 8px; }
@media (max-width: 700px) { .cagri { flex-direction: column; text-align: center; } }

/* Alt bilgi */
.alt { margin-top: 64px; background: var(--koyu-zemin); color: var(--koyu-soluk); border-top: 1px solid var(--koyu-kenar); padding: 36px var(--kenar); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.alt-marka { display: flex; align-items: center; gap: 14px; font-family: var(--serif); font-style: italic; font-size: 18px; }
.alt .biyik path { fill: var(--koyu-yazi); }
.alt nav { display: flex; gap: 8px 22px; font-weight: 600; flex-wrap: wrap; }
.alt .alt-kucuk { font-size: 14px; font-weight: 500; }
.alt .alt-kucuk a { text-decoration: none; }
.alt .alt-kucuk a:hover { text-decoration: underline; }
.alt-baglanti { background: none; border: none; padding: 0; color: var(--koyu-yazi); font-weight: 600; text-decoration: underline; }
.alt-baglanti:hover { color: var(--seftali); }

/* Reklamlar: sitenin tasarımına uyar ama "Reklam" etiketiyle içerikten açıkça ayrılır */
.reklam { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px dashed var(--cizgi-koyu); border-radius: 20px; background: var(--kagit); min-width: 0; }
.reklam-etiket { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--kahve-acik); }
.reklam-sponsor { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--kahve); }
.reklam-sponsor img { width: 100%; height: auto; aspect-ratio: 1200 / 628; object-fit: cover; border-radius: 12px; background: var(--etiket-zemin); }
.reklam-baslik { font-weight: 600; font-size: 16px; line-height: 1.3; }
.reklam-metin { font-size: 14px; color: var(--kahve-orta); }
.reklam-sponsor:hover .reklam-baslik { color: var(--kiremit); }
.reklam .adsbygoogle { display: block; min-height: 250px; }

/* Çerez izni: alt köşede, sayfayı kapatmaz. Reddet ve Kabul et eşit görünür. */
.cerez { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 30; max-width: 520px; margin-left: auto; background: var(--kagit); color: var(--kahve); border: 1px solid var(--cizgi-koyu); border-radius: 20px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.cerez-baslik { font-family: var(--serif); font-weight: 800; font-size: 18px; }
.cerez a { color: var(--kiremit); font-weight: 600; }
.cerez-dugmeler { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.alt a { color: var(--koyu-yazi); }
.alt a:hover { color: var(--seftali); }
@media (max-width: 640px) { .alt { flex-direction: column; text-align: center; } }

/* Söz ekle */
.ekle { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; padding: 56px var(--kenar) 0; align-items: start; }
.ekle-form { display: flex; flex-direction: column; gap: 24px; }
.ekle h1 { font-family: var(--serif); font-weight: 800; font-size: clamp(32px, 4.5vw, 52px); line-height: 1.05; }
.ekle-form form { display: flex; flex-direction: column; gap: 24px; }
.alan { display: flex; flex-direction: column; gap: 8px; border: none; margin: 0; padding: 0; min-width: 0; }
.alan label, .alan legend { font-size: 15px; font-weight: 600; padding: 0; }
.alan legend { margin-bottom: 10px; }
.istege-bagli { font-weight: 400; color: var(--kahve-acik); }
textarea, input[type="text"], input[type="password"] { width: 100%; border: 1.5px solid var(--cizgi-koyu); border-radius: 16px; background: var(--kagit); color: var(--kahve); font-family: var(--sans); font-size: 16px; }
textarea { min-height: 140px; padding: 16px 18px; font-family: var(--serif); font-style: italic; font-size: clamp(19px, 2vw, 22px); resize: vertical; }
input[type="text"], input[type="password"] { min-height: 50px; padding: 0 18px; }
textarea:focus, input:focus { outline: none; border-color: var(--kiremit); box-shadow: 0 0 0 3px rgba(184, 71, 47, .2); }
.sayac { font-size: 13px; color: var(--kahve-acik); align-self: flex-end; }
.sayac.sinirda { color: var(--kiremit); font-weight: 600; }
.ipucu, .not { font-size: 13px; color: var(--kahve-acik); }
.not { text-align: center; }
.secenekler { display: flex; flex-wrap: wrap; gap: 10px; }
.secenek { position: relative; }
.secenek input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.secenek span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--cizgi-koyu); background: var(--kagit); font-size: 15px; font-weight: 600; cursor: pointer; }
.secenek input:checked + span { background: var(--secili-zemin); border-color: var(--secili-zemin); color: var(--secili-yazi); }
.secenek input:focus-visible + span { outline: 3px solid var(--kiremit); outline-offset: 3px; }
.tuzak { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Ana sayfada Baba Bingo duyurusu */
.bingo-duyuru { display: flex; align-items: center; gap: 16px; margin: 0 var(--kenar) 28px; padding: 16px 20px; border-radius: 20px; background: var(--koyu-zemin); border: 1px solid var(--koyu-kenar); color: var(--koyu-soluk); text-decoration: none; }
.bingo-duyuru:hover { color: var(--koyu-soluk); }
.bingo-duyuru:hover .dugme { background: var(--kiremit-koyu); }
.bingo-duyuru-metin { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.bingo-duyuru strong { font-family: var(--serif); font-weight: 800; font-size: 21px; color: var(--koyu-yazi); }
.bingo-mini { flex: none; display: grid; grid-template-columns: repeat(3, 14px); gap: 3px; }
.bingo-mini span { width: 14px; height: 14px; border-radius: 4px; background: rgba(255, 255, 255, .14); }
.bingo-mini span.x { background: var(--kiremit); }
@media (max-width: 560px) { .bingo-duyuru { padding: 12px 16px; gap: 12px; } .bingo-duyuru .dugme { display: none; } .bingo-duyuru-metin { font-size: 14px; } .bingo-duyuru strong { font-size: 18px; } }
/* Ana sayfada Bingo ve test yan yana */
.oyunlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0 var(--kenar) 28px; }
@media (max-width: 1100px) { .oyunlar { grid-template-columns: repeat(2, 1fr); } }
.oyun-ikon-kaydir { color: var(--vurgu-yazi); font-size: 28px; font-weight: 700; }
.oyunlar .bingo-duyuru { margin: 0; }
.oyunlar .oyun-genis:first-child { grid-column: 1 / -1; } /* Babadle: günlük oyun en üstte, tam satır */
.oyun-ikon { flex: none; width: 54px; height: 54px; border-radius: 12px; background: var(--kiremit); display: flex; align-items: center; justify-content: center; }
.oyun-ikon .biyik { width: 40px; height: 15px; }
.oyun-ikon .biyik path { fill: var(--vurgu-yazi); }
@media (max-width: 860px) {
  .oyunlar { gap: 10px; }
  .oyunlar .bingo-duyuru { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
  .oyunlar .dugme { display: none; }
  .oyunlar .bingo-duyuru-metin { font-size: 13px; }
  .oyunlar .bingo-duyuru strong { font-size: 17px; }
  .oyunlar .oyun-ikon { width: 44px; height: 44px; }
  .oyunlar { grid-template-columns: 1fr 1fr; }
  .oyunlar .oyun-genis { grid-column: 1 / -1; flex-direction: row; align-items: center; }
}
.bingo-duyuru-kucuk { margin: 0; padding: 14px 16px; flex-wrap: nowrap; }
.bingo-duyuru-kucuk strong { font-size: 18px; }

/* Baba Bingo */
/* Çıkartmalar (/cikartmalar) */
.cikartma { max-width: 1000px; margin: 0 auto; padding: 32px var(--kenar) 0; display: flex; flex-direction: column; gap: 22px; }
.cikartma-izgara { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.cikartma-kart { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; border-radius: 20px; background: var(--koyu-zemin); }
.cikartma-kart img { width: 100%; height: auto; aspect-ratio: 1; }
.cikartma-dugmeler { display: flex; gap: 6px; color: var(--koyu-yazi); }
.cikartma-adimlar { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; line-height: 1.55; }
@media (max-width: 520px) { .cikartma-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* Bıyık Baba'ya sor (/biyik-babaya-sor) */
.sor { max-width: 680px; margin: 0 auto; padding: 28px var(--kenar) 0; display: flex; flex-direction: column; gap: 16px; }
.sor-sohbet { display: flex; flex-direction: column; gap: 12px; max-height: 58vh; min-height: 220px; overflow-y: auto; padding: 16px; border-radius: 24px; background: var(--kagit); border: 1px solid var(--cizgi); }
.sor-balon { max-width: 86%; padding: 12px 16px; border-radius: 20px; line-height: 1.45; animation: balon-gel .25s ease-out; }
@keyframes balon-gel { from { opacity: 0; transform: translateY(6px); } }
.sor-baba { position: relative; align-self: flex-start; margin-left: 44px; background: var(--koyu-zemin); color: var(--koyu-yazi); border-bottom-left-radius: 6px; }
.sor-sen { align-self: flex-end; background: var(--kiremit); color: var(--vurgu-yazi); border-bottom-right-radius: 6px; }
.sor-avatar { position: absolute; left: -44px; bottom: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--koyu-zemin); }
.sor-avatar svg { width: 24px; height: auto; fill: var(--kiremit); }
.sor-cevap { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 20px; }
.sor-yaziyor::after { content: "…"; display: inline-block; animation: yaziyor 1s steps(3) infinite; }
@keyframes yaziyor { 0% { opacity: .2; } 50% { opacity: 1; } }
.sor-dugmeler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sor-mini { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid currentColor; background: none; color: inherit; font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; opacity: .9; }
.sor-mini:hover { opacity: 1; }
.sor-hazir { display: flex; flex-wrap: wrap; gap: 6px; }
.sor-form { position: sticky; bottom: 10px; display: flex; gap: 8px; padding: 8px; border-radius: 999px; background: var(--kagit); border: 1px solid var(--cizgi-koyu); box-shadow: 0 10px 26px rgba(0, 0, 0, .15); }
.sor-form input { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border: none; background: none; color: inherit; font: inherit; font-size: 16px; }
.sor-form input:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .sor-balon, .sor-yaziyor::after { animation: none; } }

/* Baba Düellosu (/baba-duellosu) */
.duello { max-width: 880px; margin: 0 auto; padding: 28px var(--kenar) 0; display: flex; flex-direction: column; gap: 20px; }
.duello-arena { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 14px; }
.duello-arena.gel .duello-kart { animation: duello-gel .35s ease-out; }
@keyframes duello-gel { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.duello-kart { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; min-height: 210px; padding: 26px 20px; border-radius: 24px; border: 2px solid var(--cizgi-koyu); background: var(--kagit); color: inherit; font: inherit; text-align: center; cursor: pointer; transition: transform .12s, border-color .15s, opacity .2s; -webkit-tap-highlight-color: transparent; }
.duello-kart:hover { border-color: var(--kiremit); transform: translateY(-2px); }
.duello-kart:active { transform: scale(.98); }
.duello-metin { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: clamp(20px, 3.4vw, 28px); line-height: 1.3; }
.duello-oran { min-height: 1.2em; font-size: 14px; font-weight: 700; }
.duello-vs { align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: var(--kiremit); color: var(--vurgu-yazi); font-family: var(--serif); font-weight: 800; font-size: 18px; }
.duello-arena.secim-a [data-duello-sec="a"], .duello-arena.secim-b [data-duello-sec="b"] { border-color: var(--kiremit); background: var(--kiremit); color: var(--vurgu-yazi); transform: scale(1.02); }
.duello-arena.secim-a [data-duello-sec="b"], .duello-arena.secim-b [data-duello-sec="a"] { opacity: .45; }
.duello-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.duello-gec { padding: 8px 4px; border: none; background: none; color: inherit; font: inherit; font-size: 14px; font-weight: 600; opacity: .75; cursor: pointer; }
.duello-sayac { font-size: 14px; opacity: .8; }
.duello-sira h2 { font-family: var(--serif); font-weight: 800; font-size: clamp(24px, 4.5vw, 32px); margin-bottom: 12px; }
.duello-sira ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.duello-sira li { display: grid; grid-template-columns: 40px 1fr; gap: 2px 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--kagit); border: 1px solid var(--cizgi); }
.duello-sira-no { grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--secili-zemin); color: var(--secili-yazi); font-weight: 800; }
.duello-sira li:first-child .duello-sira-no { background: var(--kiremit); color: var(--vurgu-yazi); }
.duello-sira a { font-family: var(--serif); font-style: italic; font-weight: 600; color: inherit; }
.duello-sira-bilgi { font-size: 12px; opacity: .7; }
.duello-bos { opacity: .8; line-height: 1.5; }
@media (max-width: 640px) {
  .duello-arena { grid-template-columns: 1fr; gap: 8px; }
  .duello-kart { min-height: 140px; }
  .duello-vs { justify-self: center; width: 44px; height: 44px; margin: -18px 0; position: relative; z-index: 1; }
}
@media (prefers-reduced-motion: reduce) { .duello-arena.gel .duello-kart { animation: none; } }

/* Söz takip (/takip/<jeton>) ve söz ekle sayfasında "Gönderdiğin sözler" */
.takip { max-width: 640px; margin: 0 auto; padding: 32px var(--kenar) 0; display: flex; flex-direction: column; gap: 20px; }
.takip-soz { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: clamp(22px, 5vw, 30px); line-height: 1.3; }
.takip-durum { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px; border-radius: 24px; background: var(--kagit); border: 1px solid var(--cizgi); text-align: center; }
.takip-durum h1 { font-family: var(--serif); font-weight: 800; font-size: clamp(26px, 6vw, 36px); }
.takip-durum > p { line-height: 1.55; }
.takip-ikon { font-size: 44px; line-height: 1; }
.takip-bildirim { color: inherit; }
.takip-rakamlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.takip-rakamlar div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.takip-rakamlar strong { font-family: var(--serif); font-weight: 800; font-size: 30px; color: var(--kiremit); }
.takip-rakamlar span { font-size: 12px; opacity: .8; }
.takip-kart { width: min(100%, 380px); height: auto; border-radius: 16px; box-shadow: 0 14px 36px rgba(0, 0, 0, .25); }
.takip-dugmeler { display: flex; flex-direction: column; gap: 8px; width: min(100%, 360px); }
.takip-dugmeler .dugme { justify-content: center; }
.sozlerim { margin: 0 0 18px; padding: 14px 16px; border-radius: 16px; border: 1px dashed var(--cizgi-koyu); }
.sozlerim[hidden] { display: none; }
.sozlerim-baslik { font-weight: 700; margin-bottom: 6px; }
.sozlerim ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.sozlerim a { font-family: var(--serif); font-style: italic; color: inherit; }

/* Baba Çevirmeni (/baba-cevirmeni) */
.cevirmen { max-width: 760px; margin: 0 auto; padding: 32px var(--kenar) 0; display: flex; flex-direction: column; gap: 22px; }
.cevirmen-kutu { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 24px; background: var(--kagit); border: 1px solid var(--cizgi); }
.cevirmen-taraf { display: flex; flex-direction: column; gap: 8px; }
.cevirmen-dil { font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .75; }
.cevirmen-taraf textarea { width: 100%; min-height: 80px; padding: 14px; border-radius: 16px; border: 1px solid var(--cizgi-koyu); background: var(--krem); color: inherit; font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.3; resize: vertical; }
.cevirmen-oneriler { display: flex; flex-wrap: wrap; gap: 6px; }
.cevirmen-oneri { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--cizgi-koyu); background: none; color: inherit; font-family: var(--serif); font-style: italic; font-size: 14px; cursor: pointer; }
.cevirmen-oneri:hover { border-color: var(--kiremit); }
.cevirmen-cevir { align-self: center; }
.cevirmen-sonuc { padding: 18px; border-radius: 18px; background: var(--kiremit); color: var(--vurgu-yazi); }
.cevirmen-anlam { font-family: var(--serif); font-weight: 800; font-size: clamp(24px, 5.5vw, 34px); line-height: 1.2; }
.cevirmen-anlam.yeni { animation: cevir-gel .35s ease-out; }
@keyframes cevir-gel { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .cevirmen-anlam.yeni { animation: none; } }
.cevirmen-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cevirmen-dugmeler[hidden] { display: none; }
.cevirmen-sozluk { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 10px; }
.cevirmen-sozluk a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 14px 16px; border-radius: 16px; background: var(--kagit); border: 1px solid var(--cizgi); color: inherit; text-decoration: none; }
.cevirmen-sozluk a:hover, .cevirmen-sozluk a[aria-current="page"] { border-color: var(--kiremit); }
.cevirmen-sozluk-soz { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 17px; }
.cevirmen-sozluk-anlam { font-size: 14px; line-height: 1.45; opacity: .85; }
.cevirmen-sozluk-anlam::before { content: "→ "; color: var(--kiremit); font-weight: 700; }
/* Babadle (/babadle): günlük bulmaca */
.babadle { max-width: 560px; margin: 0 auto; padding: 24px var(--kenar) 0; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.babadle-ust { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.babadle-ust h1 { font-family: var(--serif); font-weight: 800; font-size: clamp(24px, 6vw, 34px); line-height: 1.1; }
.babadle-soz { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: clamp(20px, 5vw, 26px); line-height: 1.5; }
.babadle-bosluk { display: inline-flex; gap: 3px; margin: 0 4px; vertical-align: -4px; }
.babadle-bosluk i { display: inline-flex; align-items: center; justify-content: center; width: .95em; height: 1.2em; border-bottom: 3px solid var(--kiremit); font-family: var(--sans); font-style: normal; font-weight: 700; font-size: .8em; }
.babadle-bosluk i.bulundu { color: var(--kiremit); }
.babadle-ipucu { min-height: 1.4em; font-size: 14px; opacity: .85; }
.babadle-izgara { display: grid; gap: 6px; width: min(100%, 360px); }
.babadle-izgara.harf-4 { width: min(100%, 250px); }
.babadle-izgara.harf-5 { width: min(100%, 300px); }
.babadle-izgara.harf-6 { width: min(100%, 340px); }
.babadle-satir { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.babadle-kare { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 2px solid var(--cizgi-koyu); border-radius: 8px; font-size: clamp(20px, 6vw, 30px); font-weight: 800; text-transform: none; user-select: none; }
.babadle-kare.dolu { border-color: var(--secili-zemin); animation: kare-bas .1s; }
@keyframes kare-bas { 50% { transform: scale(1.08); } }
.babadle-kare.donuyor { animation: kare-don .5s ease-in-out both; }
@keyframes kare-don { 50% { transform: rotateX(90deg); } }
/* Bulmaca renkleri: tanınan Wordle renkleri değil, sitenin paleti (yeşil = kiremit değil, ayırt edilebilir olsun diye zeytin) */
.babadle-kare.yesil, .babadle-tus[data-durum="yesil"], .babadle-ornek.yesil { background: var(--babadle-yesil); border-color: var(--babadle-yesil); color: #fff; }
.babadle-kare.sari, .babadle-tus[data-durum="sari"], .babadle-ornek.sari { background: var(--babadle-sari); border-color: var(--babadle-sari); color: #2a1e16; }
.babadle-kare.gri, .babadle-tus[data-durum="gri"], .babadle-ornek.gri { background: var(--babadle-gri); border-color: var(--babadle-gri); color: #fff; }
.babadle-satir.salla { animation: salla .35s; }
@keyframes salla { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.babadle-klavye { display: flex; flex-direction: column; gap: 6px; width: min(100%, 520px); user-select: none; }
.babadle.bitti .babadle-klavye { display: none; }
.babadle-klavye-satir { display: flex; justify-content: center; gap: 4px; }
.babadle-tus { flex: 1 1 0; min-width: 0; max-width: 44px; height: 54px; padding: 0; border: none; border-radius: 6px; background: var(--babadle-tus); color: inherit; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.babadle-tus.genis { flex: 1.6 1 0; max-width: 72px; font-size: 13px; }
.babadle-tus:active { transform: scale(.94); }
.babadle-sonuc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px; border-radius: 22px; background: var(--kagit); border: 1px solid var(--cizgi); text-align: center; }
.babadle-sonuc[hidden] { display: none; }
.babadle-sonuc-baslik { font-family: var(--serif); font-weight: 800; font-size: 24px; line-height: 1.2; }
.babadle-tam-soz { font-family: var(--serif); font-style: italic; font-size: 20px; color: inherit; }
.babadle-rakamlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.babadle-rakamlar div { display: flex; flex-direction: column; align-items: center; }
.babadle-rakamlar strong { font-family: var(--serif); font-weight: 800; font-size: 28px; }
.babadle-rakamlar span { font-size: 12px; opacity: .75; }
.babadle-dagilim { display: flex; flex-direction: column; gap: 4px; width: 100%; margin-top: 10px; }
.babadle-dagilim > div { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.babadle-cubuk { display: inline-block; min-width: 24px; padding: 2px 8px; border-radius: 4px; background: var(--babadle-gri); color: #fff; text-align: right; }
.babadle-cubuk.bu { background: var(--babadle-yesil); }
.babadle-cubuk[data-oran="1"] { width: 10%; } .babadle-cubuk[data-oran="2"] { width: 20%; } .babadle-cubuk[data-oran="3"] { width: 30%; }
.babadle-cubuk[data-oran="4"] { width: 40%; } .babadle-cubuk[data-oran="5"] { width: 50%; } .babadle-cubuk[data-oran="6"] { width: 60%; }
.babadle-cubuk[data-oran="7"] { width: 70%; } .babadle-cubuk[data-oran="8"] { width: 80%; } .babadle-cubuk[data-oran="9"] { width: 90%; }
.babadle-cubuk[data-oran="10"] { width: 100%; }
.babadle-dugmeler { display: flex; flex-direction: column; gap: 8px; width: min(100%, 320px); }
.babadle-dugmeler .dugme { justify-content: center; }
.babadle-bildirim { align-self: center; color: inherit; }
.babadle-geri-sayim { font-size: 14px; }
.babadle-geri-sayim strong { font-variant-numeric: tabular-nums; }
.babadle-mini { flex: none; display: grid; grid-template-columns: repeat(5, 9px); gap: 3px; }
.babadle-mini i { width: 9px; height: 9px; border-radius: 2px; background: var(--babadle-gri); }
.babadle-mini i.y { background: var(--babadle-yesil); }
.babadle-mini i.s { background: var(--babadle-sari); }
.babadle-nasil { width: 100%; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--cizgi); font-size: 14px; line-height: 1.55; }
.babadle-nasil summary { cursor: pointer; font-weight: 700; }
.babadle-nasil ul { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.babadle-ornek { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: 6px; border-radius: 6px; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .babadle-kare.donuyor, .babadle-kare.dolu, .babadle-satir.salla { animation: none; } }
/* Günün sözü bildirimi düğmeleri (ana sayfa günün sözü kartı + alt bilgi) */
.zil { width: 18px; height: 18px; flex: none; }
.gunun-bildirim, .alt-bildirim { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px dashed currentColor; background: none; color: inherit; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; opacity: .85; }
.gunun-bildirim:hover, .alt-bildirim:hover { opacity: 1; }
.gunun-bildirim { margin-top: 6px; color: var(--koyu-soluk); }
.gunun-bildirim.acik, .alt-bildirim.acik { border-style: solid; opacity: .7; }
.alt-bildirim { margin: 4px 0 8px; }
/* Babamın Yılı (/babamin-yili): seçim ekranları + tam ekran hikâye */
.yil { max-width: 860px; margin: 0 auto; padding: 32px var(--kenar) 0; }
.yil-adim { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.yil-adim h1 { font-family: var(--serif); font-weight: 800; font-size: clamp(32px, 7vw, 58px); line-height: 1.05; }
.yil-adim h2 { font-family: var(--serif); font-weight: 800; font-size: clamp(24px, 5vw, 36px); line-height: 1.15; }
.yil-sayi { display: block; color: var(--kiremit); font-size: 1.5em; }
.yil-havuz { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 6px 0 90px; }
.yil-soz { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--cizgi-koyu); background: var(--kagit); color: inherit; font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.3; cursor: pointer; transition: transform .1s; }
.yil-soz:active { transform: scale(.96); }
.yil-soz[aria-pressed="true"] { background: var(--kiremit); border-color: var(--kiremit); color: var(--vurgu-yazi); }
.yil-soz[aria-pressed="true"]::before { content: "✓ "; font-style: normal; }
.yil-alt-cubuk { position: sticky; bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: 420px; padding: 10px 10px 10px 20px; border-radius: 999px; background: var(--secili-zemin); color: var(--secili-yazi); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.yil-alt-cubuk .dugme:disabled { opacity: .5; }
.yil-kart { width: min(100%, 420px); height: auto; border-radius: 18px; box-shadow: 0 16px 40px rgba(0, 0, 0, .25); }
.yil-paylas { display: flex; flex-direction: column; gap: 8px; width: min(100%, 420px); }
.yil-paylas .dugme { justify-content: center; }
/* Hikâye: renkler hikâyenin kendi paleti (görsel gibi), site temasından bağımsız */
body.yil-hikaye-acik { overflow: hidden; }
.yil-hikaye { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; justify-content: center; padding: 70px 28px 60px; background: #3B2A20; color: #F6EFE3; transition: background .4s; }
.yil-hikaye[hidden] { display: none; }
.yil-hikaye[data-tema="kiremit"] { background: #B8472F; color: #FFFBF4; }
.yil-hikaye[data-tema="seftali"] { background: #F2C9A8; color: #3B2A20; }
.yil-hikaye[data-tema="krem"] { background: #F6EFE3; color: #3B2A20; }
.yil-cubuklar { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; gap: 4px; }
.yil-cubuklar span { flex: 1; height: 4px; border-radius: 2px; background: currentColor; opacity: .25; position: relative; overflow: hidden; }
.yil-cubuklar span.dolu { opacity: 1; }
.yil-cubuklar span.akan { opacity: 1; background: transparent; box-shadow: inset 0 0 0 10px rgba(127, 127, 127, .35); }
.yil-cubuklar span.akan::after { content: ""; position: absolute; inset: 0; background: currentColor; transform-origin: left; animation: yil-akis 5.5s linear forwards; }
@keyframes yil-akis { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.yil-kapat { position: absolute; top: 28px; right: 16px; z-index: 2; width: 44px; height: 44px; border: none; background: none; color: inherit; font-size: 34px; line-height: 1; cursor: pointer; }
.yil-sahne { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; text-align: center; pointer-events: none; animation: yil-sahne-gel .45s ease-out; }
@keyframes yil-sahne-gel { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.yil-biyik { width: 120px; margin: 0 auto; fill: currentColor; opacity: .9; }
.yil-ust { font-size: 18px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.yil-buyuk { font-family: var(--serif); font-weight: 800; font-size: clamp(44px, 12vw, 92px); line-height: 1.02; }
.yil-buyuk.yil-soz-buyuk { font-weight: 600; font-style: italic; font-size: clamp(32px, 8vw, 64px); line-height: 1.12; }
.yil-alt { font-size: 19px; line-height: 1.45; opacity: .9; }
.yil-geri, .yil-ileri { position: absolute; top: 0; bottom: 0; border: none; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.yil-geri { left: 0; width: 30%; }
.yil-ileri { right: 0; width: 70%; }
.yil-geri:focus-visible, .yil-ileri:focus-visible { outline: 3px solid currentColor; outline-offset: -6px; }
@media (prefers-reduced-motion: reduce) { .yil-sahne { animation: none; } }
/* Türkiye Baba Haritası (/baba-haritasi) ve oy sonrası şehir sorusu */
.harita { max-width: 1100px; margin: 0 auto; padding: 32px var(--kenar) 0; display: flex; flex-direction: column; gap: 22px; }
.harita-ozet { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.harita-ozet > div { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 130px; padding: 14px 18px; border-radius: 18px; background: var(--kagit); border: 1px solid var(--cizgi); }
.harita-ozet strong { font-family: var(--serif); font-weight: 800; font-size: 28px; }
.harita-ozet span { font-size: 13px; opacity: .75; }
.harita-ozet .harita-birinci { max-width: 380px; text-align: center; }
.harita-birinci a { font-family: var(--serif); font-style: italic; font-size: 18px; color: inherit; }
.harita-cizim { margin: 0; padding: 18px; border-radius: 24px; background: var(--koyu-zemin); }
.harita-cizim svg { display: block; width: 100%; height: auto; }
.harita-kaydir { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.harita-kaydir-ipucu { display: none; margin-top: 6px; color: var(--koyu-soluk); font-size: 12px; text-align: center; }
@media (max-width: 760px) {
  .harita-cizim { padding: 12px 0 12px 12px; }
  .harita-kaydir svg { width: 760px; max-width: none; }
  .harita-kaydir-ipucu { display: block; }
  .harita-ozet > div { min-width: 0; flex: 1 1 40%; }
  .harita-ozet .harita-birinci { flex-basis: 100%; }
}
.harita-il circle { fill: var(--koyu-kenar); stroke: rgba(255, 255, 255, .18); stroke-width: 1; transition: transform .15s; transform-box: fill-box; transform-origin: center; }
.harita-il text { fill: var(--koyu-soluk); font-family: var(--sans); font-size: 10px; font-weight: 700; pointer-events: none; }
.harita-il.kademe-1 circle { fill: var(--kiremit); fill-opacity: .35; }
.harita-il.kademe-2 circle { fill: var(--kiremit); fill-opacity: .6; }
.harita-il.kademe-3 circle { fill: var(--kiremit); fill-opacity: .8; }
.harita-il.kademe-4 circle { fill: var(--kiremit); }
.harita-il:not(.kademe-0) text { fill: var(--vurgu-yazi); }
.harita-il:hover circle, .harita-il:focus circle { transform: scale(1.35); stroke: var(--koyu-yazi); stroke-width: 2; }
.harita-il:focus { outline: none; }
.harita-lejant { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 10px; color: var(--koyu-soluk); font-size: 13px; }
.harita-lejant span { display: inline-flex; align-items: center; gap: 6px; }
.harita-lejant i { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--koyu-kenar); border: 1px solid rgba(255, 255, 255, .18); }
.harita-lejant i.kademe-1 { background: var(--kiremit); opacity: .45; }
.harita-lejant i.kademe-2 { background: var(--kiremit); opacity: .7; }
.harita-lejant i.kademe-4 { background: var(--kiremit); }
.harita-cagri { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.harita-cagri p { flex-basis: 100%; }
.harita-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 10px; }
.harita-kart { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: var(--kagit); border: 1px solid var(--cizgi); scroll-margin-top: 20px; }
.harita-kart:target { border-color: var(--kiremit); box-shadow: 0 0 0 2px var(--kiremit); }
.harita-kart.bos { opacity: .7; }
.plaka { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 28px; padding: 0 6px; border-radius: 6px; border: 2px solid currentColor; font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }
.harita-il-ad { font-weight: 700; }
.harita-il-ad small { font-weight: 400; opacity: .7; margin-left: 4px; }
.harita-soz { display: block; margin-top: 2px; font-family: var(--serif); font-style: italic; color: inherit; line-height: 1.35; }
.harita-bekle { margin-top: 2px; font-size: 13px; opacity: .7; }
.il-sorusu { position: fixed; z-index: 50; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(440px, calc(100% - 32px)); display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 20px; background: var(--kagit); border: 1px solid var(--cizgi-koyu); box-shadow: 0 16px 40px rgba(0, 0, 0, .25); animation: il-gel .25s ease-out; }
@keyframes il-gel { from { opacity: 0; transform: translate(-50%, 16px); } }
@media (prefers-reduced-motion: reduce) { .il-sorusu { animation: none; } }
.il-baslik { font-family: var(--serif); font-weight: 800; font-size: 20px; }
.il-aciklama { font-size: 14px; line-height: 1.45; opacity: .85; }
.il-satir { display: flex; gap: 8px; }
.il-satir select { flex: 1; min-width: 0; min-height: 44px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--cizgi-koyu); background: var(--krem); color: inherit; font: inherit; font-size: 16px; }
.oy-onerisi .dugme { margin-top: 4px; }
/* Oy anı: ses çubukları kısa bir "yükselme" yapar */
.ses-olcer.ses-yukseldi i { animation: ses-yukseldi .7s ease-out; }
.ses-olcer.ses-yukseldi i:nth-child(2) { animation-delay: .06s; } .ses-olcer.ses-yukseldi i:nth-child(3) { animation-delay: .12s; }
.ses-olcer.ses-yukseldi i:nth-child(4) { animation-delay: .18s; } .ses-olcer.ses-yukseldi i:nth-child(5) { animation-delay: .24s; }
@keyframes ses-yukseldi { 30% { transform: scaleY(1.5); } 60% { transform: scaleY(.7); } }
@media (prefers-reduced-motion: reduce) { .ses-olcer.ses-yukseldi i { animation: none; } }
.il-hayir { align-self: center; padding: 6px; border: none; background: none; color: inherit; font: inherit; font-size: 13px; opacity: .7; cursor: pointer; text-decoration: underline; }
/* Konu sayfaları (/babaya-dogum-gunu-mesajlari ...) */
.konu { max-width: 860px; margin: 0 auto; padding: 36px var(--kenar) 0; display: flex; flex-direction: column; gap: 34px; }
.konu-ust { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.konu-ust h1 { font-family: var(--serif); font-weight: 800; font-size: clamp(30px, 6vw, 48px); line-height: 1.1; }
.konu-ust .aciklama { max-width: 640px; line-height: 1.6; }
.konu-icindekiler { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.konu-icindekiler a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--cizgi-koyu); color: inherit; text-decoration: none; font-size: 14px; font-weight: 600; }
.konu-icindekiler a:hover { border-color: var(--kiremit); }
.konu-bolum { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 20px; }
.konu-bolum h2 { font-family: var(--serif); font-weight: 800; font-size: clamp(22px, 4vw, 30px); }
.konu-bolum > p { line-height: 1.6; }
.konu-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.konu-kart { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 20px; border-radius: 20px; background: var(--kagit); border: 1px solid var(--cizgi); }
.konu-kart p { font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.45; }
.konu-dugmeler { display: flex; gap: 8px; }
.konu-dugmeler .dugme { min-height: 36px; padding: 0 14px; font-size: 13px; }
.konu-sozluk { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.konu-sozluk div { padding: 18px 20px; border-radius: 18px; background: var(--kagit); border: 1px solid var(--cizgi); }
.konu-sozluk dt { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 19px; line-height: 1.4; }
.konu-sozluk dd { margin: 6px 0 0; line-height: 1.55; opacity: .85; }
.konu-sozler { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.konu-sozler a { font-family: var(--serif); font-style: italic; font-size: 18px; color: inherit; }
.konu-sss { padding: 14px 18px; border-radius: 16px; border: 1px solid var(--cizgi); }
.konu-sss summary { cursor: pointer; font-weight: 700; }
.konu-sss p { margin-top: 8px; line-height: 1.6; }
.konu-diger h2 { font-family: var(--serif); font-weight: 800; font-size: 22px; margin-bottom: 10px; }
.konu-diger ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.konu-diger a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--kagit); border: 1px solid var(--cizgi); color: inherit; text-decoration: none; font-weight: 600; font-size: 14px; }
/* Hazır duvar kâğıtları galerisi (/duvar-kagitlari) ve söz sayfasındaki duvar kâğıdı */
.galeri { max-width: 1240px; margin: 0 auto; padding: 32px var(--kenar) 0; display: flex; flex-direction: column; gap: 22px; }
.galeri-kategoriler { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.galeri-kategoriler a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--cizgi-koyu); font-size: 14px; font-weight: 600; text-decoration: none; color: inherit; }
.galeri-kategoriler a[aria-current="page"] { background: var(--secili-zemin); border-color: var(--secili-zemin); color: var(--secili-yazi); }
.galeri-izgara { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 22px; }
.galeri-kart { display: flex; flex-direction: column; gap: 10px; }
.galeri-gorsel { display: block; border-radius: 22px; overflow: hidden; background: var(--koyu-zemin); box-shadow: 0 10px 26px rgba(0, 0, 0, .16); transition: transform .15s; }
.galeri-gorsel:hover { transform: translateY(-3px); }
.galeri-gorsel img { display: block; width: 100%; height: auto; aspect-ratio: 480 / 1040; }
.galeri-soz { font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.3; }
.galeri-soz a { color: inherit; text-decoration: none; }
.galeri-dugmeler { display: flex; flex-wrap: wrap; gap: 6px; }
.galeri-dugmeler .dugme { min-height: 36px; padding: 0 12px; font-size: 13px; }
.galeri-sayfalar { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.galeri-sayfalar a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; border-radius: 12px; border: 1px solid var(--cizgi-koyu); color: inherit; text-decoration: none; font-weight: 600; }
.galeri-sayfalar a[aria-current="page"] { background: var(--secili-zemin); color: var(--secili-yazi); border-color: var(--secili-zemin); }
.galeri-metin { max-width: 760px; margin: 10px auto 0; display: flex; flex-direction: column; gap: 10px; line-height: 1.6; }
.galeri-metin h2 { font-family: var(--serif); font-weight: 800; font-size: 24px; }
@media (max-width: 520px) { .galeri-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .galeri-soz { font-size: 14px; } }
.soz-duvar { display: flex; gap: 16px; align-items: center; padding: 14px; border-radius: 20px; border: 1px solid var(--cizgi); }
.soz-duvar img { flex: none; width: 92px; height: auto; border-radius: 14px; box-shadow: 0 6px 16px rgba(0, 0, 0, .15); }
.soz-duvar div { display: flex; flex-direction: column; gap: 8px; }
.soz-duvar .paylas-izgara { display: flex; flex-wrap: wrap; gap: 6px; }
.soz-duvar .dugme { min-height: 36px; padding: 0 12px; font-size: 13px; }
/* Duvar kâğıdı stüdyosu (/duvar-kagidi): solda büyük sahne, sağda sekmeli araç paneli */
.duvar { max-width: 1480px; margin: 0 auto; padding: 24px var(--kenar) 0; display: flex; flex-direction: column; gap: 18px; }
.duvar-ust { display: flex; flex-direction: column; gap: 6px; text-align: center; align-items: center; }
.duvar-ust h1 { font-family: var(--serif); font-weight: 800; font-size: clamp(26px, 4vw, 38px); line-height: 1.1; }
.duvar-ust .aciklama { max-width: 560px; }
.duvar-not { text-align: center; }

.studyo { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; height: calc(100vh - 150px); min-height: 620px; }
.studyo-sahne { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 28px; border-radius: 24px; background: var(--koyu-zemin); border: 1px solid var(--koyu-kenar); overflow: hidden; min-height: 0; }
.studyo-sahne canvas { display: block; max-width: 100%; max-height: calc(100% - 34px); width: auto; height: auto; border-radius: 34px; box-shadow: 0 0 0 7px #0d0907, 0 24px 60px rgba(0, 0, 0, .45); touch-action: none; cursor: grab; }
.studyo-sahne canvas:active { cursor: grabbing; }
.studyo-sahne[data-cihaz="yatay"] canvas { border-radius: 8px; box-shadow: 0 0 0 10px #0d0907, 0 24px 60px rgba(0, 0, 0, .45); }
.studyo-sahne.surukle-uzerinde { outline: 3px dashed var(--kiremit); outline-offset: -10px; }
.studyo-ipucu { color: var(--koyu-soluk); font-size: 13px; text-align: center; opacity: .8; }

.studyo-panel { display: flex; flex-direction: column; min-height: 0; border-radius: 24px; background: var(--kagit); border: 1px solid var(--cizgi); overflow: hidden; }
.studyo-sekmeler { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--cizgi); }
.studyo-sekmeler button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px 10px; border: none; border-bottom: 3px solid transparent; background: none; color: inherit; font: inherit; font-size: 18px; cursor: pointer; opacity: .65; }
.studyo-sekmeler button span { font-size: 12px; font-weight: 700; }
.studyo-ikon { width: 22px; height: 22px; flex: none; }
.studyo-ikon .ikon-dolu { fill: currentColor; stroke: none; }
.studyo-sekmeler button[aria-selected="true"] { color: var(--kiremit); }
.studyo-parca span .studyo-ikon, .studyo-alt .studyo-ikon, .studyo-kucuk .studyo-ikon { width: 18px; height: 18px; margin-right: 6px; }
.studyo-kucuk button { display: inline-flex; align-items: center; }
.studyo-dosya-ikon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--krem); color: var(--kiremit); }
.studyo-dosya-ikon .studyo-ikon { width: 28px; height: 28px; }
.studyo-guven { display: flex; align-items: flex-start; gap: 8px; }
.studyo-guven .studyo-ikon { width: 18px; height: 18px; color: var(--kiremit); margin-top: 1px; }
.studyo-sekmeler button[aria-selected="true"] { opacity: 1; border-bottom-color: var(--kiremit); }
.studyo-sekmeler button:focus-visible { outline: 3px solid var(--kiremit); outline-offset: -3px; }
.studyo-icerik { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 18px 20px; }
.studyo-bolum { display: flex; flex-direction: column; gap: 10px; }
.studyo-bolum[hidden], .studyo-panel [hidden] { display: none !important; }
.studyo-etiket { margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.studyo-etiket small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.studyo-bolum select, .studyo-bolum textarea, .studyo-bolum input[type="text"], .studyo-bolum input:not([type]) { width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--cizgi-koyu); background: var(--krem); color: inherit; font: inherit; font-size: 16px; }
.studyo-bolum textarea { resize: vertical; font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.35; }

.studyo-temalar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.studyo-tema { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 2px; border: 1px solid transparent; border-radius: 14px; background: none; color: inherit; font: inherit; font-size: 11px; font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer; }
.studyo-tema:hover, .studyo-tema:focus-visible { border-color: var(--cizgi-koyu); background: var(--krem); }
.studyo-tema .duvar-renk { width: 46px; height: 46px; border-radius: 14px; }
.duvar-renk { display: inline-block; border: 1px solid rgba(0, 0, 0, .15); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
/* Renk örnekleri duvar kâğıdının kendi renkleridir; site temasından bağımsız, karanlık modda da aynı */
.duvar-renk.tema-krem { background: #F6EFE3; }
.duvar-renk.tema-kahve { background: #3B2A20; }
.duvar-renk.tema-desen { background: #3B2A20 radial-gradient(circle at 50% 55%, #B8472F 0 18%, transparent 19%); }
.duvar-renk.tema-gunbatimi { background: linear-gradient(160deg, #F2C9A8, #B8472F); }
.duvar-renk.tema-gece { background: linear-gradient(160deg, #3B2A20, #0E0A08); }
.duvar-renk.tema-kiremit { background: #B8472F; }
.duvar-renk.tema-seftali { background: #F2C9A8; }
.duvar-renk.tema-siyah { background: #111111; }

/* Parçalı seçim (segmented control) */
.studyo-parca { display: flex; padding: 4px; gap: 4px; border-radius: 14px; background: var(--krem); border: 1px solid var(--cizgi); }
.studyo-parca label { flex: 1; position: relative; }
.studyo-parca input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.studyo-parca span { display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 6px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.studyo-parca input:checked + span { background: var(--secili-zemin); color: var(--secili-yazi); }
.studyo-parca input:focus-visible + span { outline: 3px solid var(--kiremit); outline-offset: 1px; }
.studyo-fontlar span { font-size: 15px; }
.font-ornek-italik { font-family: var(--serif); font-style: italic; }
.font-ornek-kalin { font-family: var(--serif); font-weight: 800; }

.studyo-renkler { display: flex; gap: 10px; }
.studyo-renkler label { flex: 1; display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 12px; border: 1px solid var(--cizgi); font-size: 14px; font-weight: 600; cursor: pointer; }
.studyo-renkler input[type="color"] { width: 38px; height: 38px; padding: 0; border: none; border-radius: 10px; background: none; cursor: pointer; }

.studyo-kaydiricilar { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.studyo-kaydiricilar label { display: grid; grid-template-columns: 92px 1fr 46px; align-items: center; gap: 10px; min-height: 40px; font-size: 14px; font-weight: 600; }
.studyo-kaydiricilar input[type="range"] { width: 100%; accent-color: var(--kiremit); }
.studyo-kaydiricilar output { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; opacity: .7; }

.studyo-anahtarlar { display: flex; flex-direction: column; margin-top: 4px; border-top: 1px solid var(--cizgi); }
.studyo-anahtarlar label { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; border-bottom: 1px solid var(--cizgi); font-size: 15px; font-weight: 600; cursor: pointer; }
.studyo-anahtarlar small { display: block; font-weight: 400; font-size: 12px; opacity: .7; }
.studyo-anahtarlar input[type="checkbox"] { min-width: 46px; min-height: 28px; appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 46px; height: 28px; margin: 0; border-radius: 999px; background: var(--cizgi-koyu); cursor: pointer; transition: background .15s; }
.studyo-anahtarlar input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s; }
.studyo-anahtarlar input:checked { background: var(--kiremit); }
.studyo-anahtarlar input:checked::after { transform: translateX(18px); }
.studyo-anahtarlar input:focus-visible { outline: 3px solid var(--kiremit); outline-offset: 2px; }

.studyo-foto { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.studyo-dosya { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px; border: 2px dashed var(--cizgi-koyu); border-radius: 16px; cursor: pointer; }
.studyo-dosya:hover, .studyo-dosya:focus-within { border-color: var(--kiremit); }

.studyo-dosya strong { display: block; font-size: 16px; }
.studyo-dosya small { display: block; font-size: 13px; opacity: .7; }
.studyo-guven { font-size: 13px; padding: 10px 12px; border-radius: 12px; background: var(--krem); }

.studyo-cihazlar { display: flex; flex-direction: column; gap: 8px; }
.studyo-cihazlar label { position: relative; }
.studyo-cihazlar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.studyo-cihazlar span { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 50px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--cizgi); font-size: 15px; font-weight: 600; cursor: pointer; }
.studyo-cihazlar small { font-size: 12px; font-weight: 400; opacity: .7; font-variant-numeric: tabular-nums; }
.studyo-cihazlar input:checked + span { border-color: var(--kiremit); box-shadow: inset 0 0 0 1px var(--kiremit); }
.studyo-cihazlar input:focus-visible + span { outline: 3px solid var(--kiremit); outline-offset: 2px; }

.studyo-alt { display: flex; flex-direction: column; gap: 8px; padding: 14px 20px 16px; border-top: 1px solid var(--cizgi); background: var(--kagit); }
.studyo-alt .dugme { width: 100%; justify-content: center; }
.studyo-alt .dugme small { font-weight: 400; opacity: .8; margin-left: 6px; font-variant-numeric: tabular-nums; }
.studyo-kucuk { display: flex; justify-content: center; gap: 18px; }
.studyo-kucuk button { padding: 6px 4px; border: none; background: none; color: inherit; font: inherit; font-size: 14px; font-weight: 600; opacity: .75; cursor: pointer; }
.studyo-kucuk button:hover { opacity: 1; }

@media (max-width: 900px) {
  .studyo { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .studyo-sahne { padding: 18px; height: 62vh; }
  .studyo-sahne[data-cihaz="yatay"] { height: auto; }
  .studyo-panel { overflow: visible; }
  .studyo-sekmeler { position: sticky; top: 0; z-index: 2; background: var(--kagit); border-radius: 24px 24px 0 0; }
  .studyo-icerik { flex: none; overflow: visible; }
  .studyo-alt { position: sticky; bottom: 0; z-index: 2; border-radius: 0 0 24px 24px; box-shadow: 0 -8px 20px rgba(0, 0, 0, .12); }
}

.bingo { max-width: 620px; margin: 0 auto; padding: 36px var(--kenar) 0; display: flex; flex-direction: column; gap: 18px; }
.bingo-ust { display: flex; flex-direction: column; gap: 8px; text-align: center; align-items: center; }
.bingo-etiket { display: inline-block; padding: 4px 14px; border-radius: 999px; background: var(--kiremit); color: var(--vurgu-yazi); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.bingo-ust h1 { font-family: var(--serif); font-weight: 800; font-size: clamp(28px, 6vw, 44px); line-height: 1.1; }
.bingo-kart { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px; border-radius: 22px; background: var(--koyu-zemin); border: 1px solid var(--koyu-kenar); }
.bingo-hucre { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; padding: 8px; border: none; border-radius: 14px; background: rgba(255, 255, 255, .07); color: var(--koyu-yazi); font-family: var(--sans); font-weight: 600; font-size: clamp(12px, 3.4vw, 16px); line-height: 1.25; text-align: center; cursor: pointer; transition: background .15s, transform .1s; -webkit-tap-highlight-color: transparent; }
.bingo-hucre:hover { background: rgba(255, 255, 255, .12); }
.bingo-hucre:active { transform: scale(.96); }
.bingo-hucre:focus-visible { outline: 3px solid var(--seftali); outline-offset: 2px; }
.bingo-hucre[aria-pressed="true"] { background: var(--kiremit); color: var(--vurgu-yazi); }
.bingo-soz { position: relative; z-index: 1; overflow-wrap: anywhere; }
.bingo-damga { position: absolute; top: 6px; right: 6px; width: 38%; opacity: 0; transform: scale(.4) rotate(-12deg); transition: opacity .15s; pointer-events: none; }
.bingo-damga svg { width: 100%; height: auto; display: block; }
.bingo-damga .biyik path { fill: rgba(246, 239, 227, .6); }
.bingo-hucre[aria-pressed="true"] .bingo-damga { opacity: 1; transform: none; }
.bingo-hucre.damga-anim .bingo-damga { animation: bingo-damga .32s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bingo-damga { from { transform: scale(1.8) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
.bingo-sonuc { text-align: center; display: flex; flex-direction: column; gap: 2px; }
.bingo-skor { font-family: var(--serif); font-weight: 800; font-size: 54px; line-height: 1; color: var(--kiremit); }
.bingo-unvan { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 20px; }
.bingo-bingo { font-family: var(--serif); font-weight: 800; font-size: 28px; color: var(--kiremit); animation: bingo-zipla .5s ease; }
@keyframes bingo-zipla { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: none; } }
.bingo-tamam .bingo-kart { box-shadow: 0 0 0 3px var(--seftali); }
.bingo-dugmeler { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bingo-dugmeler [data-bingo-paylas], .bingo-dugmeler [data-bingo-whatsapp] { grid-column: 1 / -1; }
.bingo-dugmeler .dugme { border-radius: 14px; min-height: 50px; text-align: center; }
.bingo-alt { display: flex; gap: 10px; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .bingo-hucre.damga-anim .bingo-damga, .bingo-bingo { animation: none; } }

/* Kaydır, oyla */
.kaydir { max-width: 520px; margin: 0 auto; padding: 36px var(--kenar) 0; display: flex; flex-direction: column; gap: 18px; }
.kaydir-deste { position: relative; min-height: 380px; display: grid; }
.kaydir-kart, .kaydir-son { grid-area: 1 / 1; }
.kaydir-kart { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 48px 28px 28px; border-radius: 28px; background: var(--koyu-zemin); color: var(--koyu-yazi); border: 1px solid var(--koyu-kenar); box-shadow: 0 14px 34px rgba(0, 0, 0, .18); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; transition: transform .26s ease, opacity .26s ease; }
.kaydir-kart[hidden], .kaydir-son[hidden], .kaydir-dugmeler[hidden], .kaydir-sayac[hidden] { display: none; }
.kaydir-kart.surukleniyor { transition: none; cursor: grabbing; }
.kaydir-kart.ucuyor-sag { transform: translateX(140%) rotate(18deg); opacity: 0; }
.kaydir-kart.ucuyor-sol { transform: translateX(-140%) rotate(-18deg); opacity: 0; }
.kaydir-metin { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: clamp(26px, 6.5vw, 34px); line-height: 1.25; }
.kaydir-alt { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; font-size: 14px; color: var(--koyu-soluk); }
.kaydir-ac { font-size: 14px; color: var(--seftali); }
.kaydir-damga { position: absolute; top: 18px; padding: 6px 12px; border: 3px solid; border-radius: 10px; font-weight: 800; font-size: 15px; letter-spacing: .06em; opacity: 0; pointer-events: none; }
.kaydir-damga-evet { left: 18px; color: var(--seftali); transform: rotate(-10deg); }
.kaydir-damga-hayir { right: 18px; color: var(--koyu-soluk); transform: rotate(10deg); }
.kaydir-son { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 32px 24px; border-radius: 28px; background: var(--kagit); border: 1px solid var(--cizgi); }
.kaydir-son h2 { font-family: var(--serif); font-weight: 800; font-size: 28px; }
.kaydir-son-dugmeler { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 300px; margin-top: 8px; }
.kaydir-son-dugmeler .dugme { justify-content: center; }
.kaydir-dugmeler { display: flex; justify-content: center; gap: 28px; }
.kaydir-dugme { width: 76px; height: 76px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 26px; line-height: 1; cursor: pointer; border: 2px solid; background: var(--kagit); transition: transform .1s; }
.kaydir-dugme span { font-size: 12px; font-weight: 700; }
.kaydir-dugme:active { transform: scale(.92); }
.kaydir-hayir { color: var(--kahve-orta); border-color: var(--cizgi); }
.kaydir-evet { color: var(--vurgu-yazi); background: var(--kiremit); border-color: var(--kiremit); }
.kaydir-sayac { text-align: center; font-weight: 600; color: var(--kiremit); }
@media (prefers-reduced-motion: reduce) { .kaydir-kart { transition: none; } }

/* Hangi baba testi */
.test { max-width: 620px; margin: 0 auto; padding: 36px var(--kenar) 0; display: flex; flex-direction: column; gap: 18px; }
.test-ust { display: flex; flex-direction: column; gap: 8px; text-align: center; align-items: center; }
.test-ust h1 { font-family: var(--serif); font-weight: 800; font-size: clamp(28px, 6vw, 44px); line-height: 1.1; }
.test-arkadas { font-size: 17px; color: var(--kahve-orta); }
.test-arkadas strong { color: var(--kiremit); }
.test-kutu, .test-sonuc { background: var(--koyu-zemin); color: var(--koyu-yazi); border: 1px solid var(--koyu-kenar); border-radius: 24px; padding: clamp(20px, 4vw, 32px); display: flex; flex-direction: column; gap: 18px; }
.test-kutu[hidden], .test-sonuc[hidden], .test-soru[hidden], .test-tip[hidden] { display: none; }
.test-ilerleme { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.test-ilerleme span { display: block; height: 100%; width: 0; background: var(--kiremit); transition: width .25s ease; }
.test-soru { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.test-soru legend { font-family: var(--serif); font-weight: 700; font-size: clamp(22px, 5vw, 28px); line-height: 1.25; padding: 0; margin-bottom: 16px; }
.test-sayac { display: block; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--seftali); margin-bottom: 6px; }
.test-secenekler { display: flex; flex-direction: column; gap: 10px; }
.test-secenek { text-align: left; min-height: 56px; padding: 14px 18px; border-radius: 16px; border: 1px solid var(--koyu-kenar); background: rgba(255, 255, 255, .06); color: var(--koyu-yazi); font-family: var(--sans); font-size: 16px; font-weight: 500; line-height: 1.35; cursor: pointer; transition: background .15s, border-color .15s; -webkit-tap-highlight-color: transparent; }
.test-secenek:hover { border-color: var(--seftali); }
.test-secenek.secili { background: var(--kiremit); border-color: var(--kiremit); color: var(--vurgu-yazi); }
.test-geri { align-self: flex-start; background: none; border: none; color: var(--seftali); font-size: 14px; font-weight: 600; cursor: pointer; padding: 4px 0; }
.test-tip { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; font-size: 16px; line-height: 1.55; color: var(--koyu-soluk); }
.test-sonuc-etiket { font-size: 14px; font-weight: 600; color: var(--seftali); }
.test-tip h2 { font-family: var(--serif); font-weight: 800; font-size: clamp(30px, 7vw, 42px); line-height: 1.1; color: var(--koyu-yazi); }
.test-imza-soz { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 22px; color: var(--seftali); }
.test-sonuc .bingo-dugmeler [data-test-paylas], .test-sonuc .bingo-dugmeler [data-test-whatsapp] { grid-column: 1 / -1; }
.test-sonuc .bingo-alt { flex-wrap: wrap; }
.test-sonuc .bingo-alt .dugme { color: var(--koyu-yazi); border-color: var(--koyu-kenar); }

/* İletişim formu */
.iletisim-form { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }
.iletisim-form textarea { font-family: var(--sans); font-style: normal; font-size: 16px; min-height: 150px; }
input[type="email"] { width: 100%; min-height: 50px; padding: 0 18px; border: 1.5px solid var(--cizgi-koyu); border-radius: 16px; background: var(--kagit); color: var(--kahve); font-family: var(--sans); font-size: 16px; }
input[type="email"]:focus { outline: none; border-color: var(--kiremit); box-shadow: 0 0 0 3px rgba(184, 71, 47, .2); }
.konu-secenekler { display: flex; flex-direction: column; gap: 8px; }
.konu-secenek { position: relative; cursor: pointer; }
.konu-secenek input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.konu-secenek span { display: block; padding: 12px 16px 12px 44px; border: 1px solid var(--cizgi-koyu); border-radius: 14px; background: var(--kagit); font-size: 15px; position: relative; }
.konu-secenek span::before { content: ""; position: absolute; left: 16px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; border: 2px solid var(--cizgi-koyu); }
.konu-secenek input:checked + span { border-color: var(--kiremit); background: var(--etiket-zemin); }
.konu-secenek input:checked + span::before { border-color: var(--kiremit); background: var(--kiremit); box-shadow: inset 0 0 0 3px var(--kagit); }
.konu-secenek input:focus-visible + span { outline: 3px solid var(--kiremit); outline-offset: 3px; }
.bildir-baglanti { font-size: 13px; color: var(--kahve-acik); }
.bildir-baglanti a { color: var(--kahve-acik); }

/* Hakkımızda */
.hakkimizda .biyik-buyuk { margin-bottom: -4px; }
.hakkimizda-giris { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: clamp(20px, 2.4vw, 24px); line-height: 1.45; color: var(--kahve); }
.hakkimizda-rakam { padding: 16px 20px; border-radius: 16px; background: var(--etiket-zemin); }
.hakkimizda-cagri { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 18px; padding: 22px 24px; border-radius: 20px; background: var(--kiremit); color: var(--vurgu-yazi); }
.hakkimizda-cagri strong { color: var(--vurgu-yazi); font-family: var(--serif); font-size: 20px; }
.hakkimizda-cagri .dugme { background: var(--kagit); color: var(--kahve); }

/* 404 */
.sayfa-yok { gap: 14px; }
.sayfa-yok-kod { font-family: var(--serif); font-weight: 800; font-size: 64px; line-height: 1; color: var(--kiremit); }
.sayfa-yok .ara-form { width: 100%; max-width: 480px; }
.sayfa-yok-soz { max-width: 520px; margin: 0 auto; }
.sayfa-yok-soz .izgara { grid-template-columns: 1fr; }

/* Yönetim: mesajlar */
.mesaj-kart { display: flex; flex-direction: column; gap: 10px; padding: 18px; background: var(--kagit); border: 1px solid var(--cizgi); border-radius: 16px; }
.mesaj-kart.durum-yeni { border-color: var(--kiremit); }
.mesaj-kart.durum-cozuldu { opacity: .75; }
.mesaj-ust { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mesaj-metin { font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.mesaj-soz { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--etiket-zemin); }
.mesaj-kart .yonetim-dugmeler .dugme { min-height: 38px; padding: 0 14px; font-size: 13px; }

/* Hata kaydı */
.hata-mesaj { font-family: ui-monospace, Consolas, monospace; font-size: 14px; overflow-wrap: anywhere; color: var(--kahve); }
.hata-kart code, .yonetim-bilgi code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; padding: 1px 6px; border-radius: 6px; background: var(--etiket-zemin); }
.hata-ayrinti { max-width: 100%; overflow-x: auto; padding: 14px; border-radius: 12px; background: var(--etiket-zemin); color: var(--kahve); font-family: ui-monospace, Consolas, monospace; font-size: 12px; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; }
.yonetim-menu .menu-hata { color: var(--kiremit); }

/* İki adımlı giriş */
.kod-kutusu { font-family: ui-monospace, Consolas, monospace; font-size: 22px !important; letter-spacing: .25em; text-align: center; }
.kurulum-adimlari { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; line-height: 1.6; }
.kurulum-anahtari { margin: 8px 0; }
.kurulum-anahtari code { display: inline-block; font-size: 18px; letter-spacing: .08em; padding: 8px 12px; user-select: all; }
.yedek-kodlar { padding: 16px 18px; border: 2px dashed var(--kiremit); border-radius: 16px; background: var(--etiket-zemin); }
.yedek-kodlar ol { margin: 10px 0 0; padding-left: 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px 20px; }
.yedek-kodlar code { font-size: 16px; letter-spacing: .06em; user-select: all; }

/* İşlem geçmişi */
.gecmis-tablo { margin-top: 14px; }
.analiz-tablo.gecmis-tablo td, .analiz-tablo.gecmis-tablo th { padding-right: 14px; }
.gecmis-zaman { white-space: nowrap; color: var(--kahve-acik); font-size: 13px; }
.gecmis-tablo .supheli, .gecmis-tablo .rozet { display: inline-block; font-size: 12px; line-height: 1.3; padding: 3px 9px; white-space: normal; }
.gecmis-tablo td:nth-child(2) { min-width: 120px; }
@media (max-width: 700px) { .gecmis-tablo th:nth-child(4), .gecmis-tablo td:nth-child(4) { display: none; } }

/* Tüm kategoriler sayfası */
.kategori-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.kategori-kutu { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; border: 1px solid var(--cizgi); border-radius: 20px; background: var(--kagit); text-decoration: none; }
.kategori-kutu:hover { border-color: var(--kiremit); }
.kategori-kutu-ad { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 22px; }
.kategori-kutu-sayi { font-size: 14px; color: var(--kahve-acik); }

/* Uzun metin sayfaları (gizlilik vb.) */
.metin-sayfa { max-width: 760px; margin: 0 auto; padding: 48px var(--kenar) 0; display: flex; flex-direction: column; gap: 14px; line-height: 1.7; color: var(--kahve-orta); }
.metin-sayfa h1 { font-family: var(--serif); font-weight: 800; font-size: clamp(30px, 4.5vw, 46px); line-height: 1.1; color: var(--kahve); }
.metin-sayfa h2 { font-family: var(--serif); font-weight: 800; font-size: 22px; color: var(--kahve); margin-top: 18px; }
.metin-sayfa ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.metin-sayfa strong { color: var(--kahve); }
.metin-sayfa a { color: var(--kiremit); }
.metin-sayfa .ipucu { text-align: left; }
.metin-sayfa code { font-family: ui-monospace, Consolas, monospace; font-size: .9em; padding: 1px 6px; border-radius: 6px; background: var(--etiket-zemin); }
.yasal-onizleme { padding: 12px 16px; border-radius: 14px; background: var(--seftali); color: #3B2A20; font-size: 15px; }
.yasal-onizleme strong, .yasal-onizleme a { color: #3B2A20; }

/* Yönetim: yasal sayfalar */
.yasal-ust { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.yasal-ust h2 { margin: 0; }
.rozet.rozet-yayinda { font-size: 13px; background: var(--kiremit); }
.rozet.rozet-taslak { font-size: 13px; background: var(--etiket-zemin); color: var(--kahve-orta); }
textarea.yasal-metin { min-height: 420px; font-family: ui-monospace, Consolas, monospace; font-style: normal; font-size: 14px; line-height: 1.6; }
.yasal-uyari { background: var(--etiket-zemin); border-left: 4px solid var(--kiremit); }
.yasal-yardim { padding: 12px 16px; border: 1px solid var(--cizgi); border-radius: 14px; background: var(--kagit); font-size: 14px; }
.yasal-yardim summary { cursor: pointer; font-weight: 600; }
.yasal-yardim ul { margin: 10px 0 6px; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.yasal-yardim code { font-family: ui-monospace, Consolas, monospace; font-size: 13px; padding: 1px 6px; border-radius: 6px; background: var(--etiket-zemin); }
.yasal-kaldir { margin-top: -4px; }

/* Ana sayfada Babalar Günü duyurusu (45 gün kala görünür) */
.bg-duyuru { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 var(--kenar) 40px; padding: 20px 24px; border-radius: 20px; background: var(--etiket-zemin); border: 1px solid var(--cizgi-koyu); text-decoration: none; color: var(--kahve-orta); }
.bg-duyuru strong { display: block; font-family: var(--serif); font-size: 22px; color: var(--kahve); }
.bg-duyuru:hover { border-color: var(--kiremit); color: var(--kahve-orta); }
@media (max-width: 640px) { .bg-duyuru { flex-direction: column; align-items: flex-start; } }

/* Babalar Günü sayfası */
.bg-giris { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 56px var(--kenar) 32px; }
.bg-giris h1 { font-family: var(--serif); font-weight: 800; font-size: clamp(34px, 5.5vw, 64px); line-height: 1.05; max-width: 820px; }
.bg-giris .aciklama { max-width: 620px; }
.bg-sayac { display: inline-block; background: var(--etiket-zemin); color: var(--kahve-orta); border-radius: 999px; padding: 8px 18px; font-size: 15px; }
.bg-sayac strong { color: var(--kiremit); }
.bg-tarih { white-space: nowrap; }
.bg-tarih::before { content: "· "; }
@media (max-width: 640px) { .bg-tarih { display: block; font-size: 13px; } .bg-tarih::before { content: none; } }
.babana { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; padding: 24px var(--kenar) 0; align-items: start; }
.babana-form { display: flex; flex-direction: column; gap: 22px; }
.babana-form h2 { font-family: var(--serif); font-weight: 800; font-size: clamp(26px, 3vw, 36px); }
.mesajlar { border: none; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.mesajlar legend { font-size: 15px; font-weight: 600; margin-bottom: 10px; padding: 0; }
.mesaj-secenek { position: relative; display: block; cursor: pointer; }
.mesaj-secenek input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mesaj-secenek span { display: block; padding: 14px 18px 14px 48px; border: 1px solid var(--cizgi-koyu); border-radius: 16px; background: var(--kagit); font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 17px; line-height: 1.35; position: relative; transition: border-color .15s, background .15s; }
.mesaj-secenek span::before { content: ""; position: absolute; left: 18px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 2px solid var(--cizgi-koyu); background: var(--kagit); }
.mesaj-secenek:hover span { border-color: var(--kiremit); }
.mesaj-secenek input:checked + span { border-color: var(--kiremit); background: var(--etiket-zemin); }
.mesaj-secenek input:checked + span::before { border-color: var(--kiremit); background: var(--kiremit); box-shadow: inset 0 0 0 3px var(--kagit); }
.mesaj-secenek input:focus-visible + span { outline: 3px solid var(--kiremit); outline-offset: 3px; }
.babana-yan { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 24px; }
.babana-onizleme { align-items: center; text-align: center; gap: 18px; }
.babana-ust { font-size: 14px; font-weight: 600; color: var(--seftali); letter-spacing: .04em; }
.babana-onizleme .paylasim-metin { font-size: clamp(24px, 2.4vw, 32px); }
.babana-not { font-size: 16px; color: var(--koyu-soluk); overflow-wrap: anywhere; }
.babana-onizleme .paylasim-alt { width: 100%; }
.babana-dugmeler .babana-whatsapp { grid-column: 1 / -1; }
.babana-dugmeler [data-babana-paylas][hidden] + [data-babana-indir] { grid-column: 1 / -1; } /* tek kalırsa tam genişlik */
.tanitim + .sozler { margin-top: 56px; }
@media (max-width: 900px) {
  .babana { grid-template-columns: 1fr; gap: 28px; }
  .babana-yan { position: static; }
}

.ekle-onizleme { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 24px; }
.onizleme-etiket { font-size: 15px; font-weight: 600; }
@media (max-width: 900px) { .ekle { grid-template-columns: 1fr; gap: 32px; padding-top: 32px; } .ekle-onizleme { position: static; order: 2; } }

.bildirim { border-radius: 16px; padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; }
.bildirim-basari { background: var(--basari-zemin); color: var(--basari-yazi); }
.bildirim-basari a { color: var(--basari-yazi); font-weight: 600; }
.bildirim-hata { background: var(--hata-zemin); color: var(--hata-yazi); }

/* Paylaşım kartı */
.paylasim-karti { background: var(--koyu-zemin); color: var(--koyu-yazi); border: 1px solid var(--koyu-kenar); border-radius: 28px; padding: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; gap: 24px; }
.paylasim-metin { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.22; overflow-wrap: anywhere; }
.paylasim-alt { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--seftali); flex-wrap: wrap; }
.paylasim-site { font-family: var(--serif); font-weight: 800; font-size: 18px; color: var(--koyu-yazi); }
.paylasim-karti-buyuk { padding: clamp(32px, 4.5vw, 64px) clamp(26px, 4vw, 56px); justify-content: space-between; min-height: 460px; gap: 40px; }
.paylasim-karti-buyuk .paylasim-metin { font-size: clamp(32px, 4.2vw, 58px); line-height: 1.12; }
/* "Bıyık Baba okusun" düğmesi (koyu kartın içinde) */
.ses-dugme { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 20px 0 8px; border: none; border-radius: 999px; background: var(--kiremit); color: var(--vurgu-yazi); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .1s; }
.ses-dugme:active { transform: scale(.97); }
.ses-dugme:focus-visible { outline: 3px solid var(--koyu-yazi); outline-offset: 3px; }
.ses-ikon { position: relative; width: 32px; height: 32px; border-radius: 50%; background: var(--vurgu-yazi); }
.ses-ikon::before { content: ""; position: absolute; top: 9px; left: 12px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--kiremit); }
.ses-dugme.caliyor .ses-ikon::before { top: 10px; left: 10px; width: 4px; height: 12px; border: none; background: var(--kiremit); box-shadow: 8px 0 0 var(--kiremit); }
.ses-dugme.caliyor .ses-ikon { animation: ses-nabiz 1.2s ease-in-out infinite; }
@keyframes ses-nabiz { 50% { box-shadow: 0 0 0 6px rgba(255, 251, 244, .25); } }
@media (prefers-reduced-motion: reduce) { .ses-dugme.caliyor .ses-ikon { animation: none; } }
@media (max-width: 800px) { .paylasim-karti-buyuk { min-height: 0; } }

/* Tek söz */
.tek { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; padding: 56px var(--kenar) 0; align-items: start; }
.tek-yan { display: flex; flex-direction: column; gap: 28px; }
.sayac-kutusu { background: var(--kagit); border: 1px solid var(--cizgi); border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; font-size: 17px; color: var(--kahve-orta); }
.buyuk-sayi { font-family: var(--serif); font-weight: 800; font-size: clamp(44px, 5vw, 64px); line-height: 1; color: var(--kiremit); }
.sayac-kutusu .oy { width: 100%; justify-content: center; min-height: 58px; font-size: 18px; margin-top: 6px; }
.sayac-kutusu .oy-sayi { display: none; }
.paylas { display: flex; flex-direction: column; gap: 12px; }
.paylas-baslik { font-size: 15px; font-weight: 600; }
.paylas-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.paylas-izgara .dugme { border-radius: 14px; min-height: 50px; }
.paylas-izgara .gorsel-paylas { grid-column: 1 / -1; }
[data-gorsel] .dugme[aria-busy="true"] { opacity: .6; cursor: progress; }
.ig-adim { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--cizgi-koyu); border-radius: 16px; background: var(--kagit); }
.ig-adim[hidden] { display: none; }
.ig-aciklama { font-size: 14px; line-height: 1.5; white-space: normal; user-select: all; -webkit-user-select: all; }
.ig-adim .dugme { border-radius: 14px; min-height: 50px; }
@media (max-width: 800px) {
  .tek { grid-template-columns: 1fr; gap: 26px; padding-top: 24px; }
  .sayac-kutusu { align-items: center; text-align: center; background: transparent; border: none; padding: 0; }
}

/* Bildirim balonu */
.balon { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--secili-zemin); color: var(--secili-yazi); padding: 12px 20px; border-radius: 999px; font-weight: 600; z-index: 20; }

/* Yönetim */
.yonetim-icerik { padding: 40px var(--kenar); display: flex; flex-direction: column; gap: 24px; max-width: 1100px; }
.yonetim h1, .yonetim h2 { font-family: var(--serif); font-weight: 800; }
.yonetim h1 { font-size: 36px; }
.yonetim h2 { font-size: 26px; margin-top: 24px; }
.rozet { display: inline-block; background: var(--kiremit); color: var(--vurgu-yazi); font-family: var(--sans); font-size: 16px; padding: 2px 12px; border-radius: 999px; vertical-align: middle; }
.yonetim-liste { display: flex; flex-direction: column; gap: 12px; }
.yonetim-menu { display: flex; gap: 22px; font-weight: 600; }
.yonetim-menu a { text-decoration: none; }
.yonetim-bolum { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; }
.yonetim-bolum h3 { font-family: var(--serif); font-weight: 800; font-size: 22px; margin: 16px 0 0; }
.yonetim-form { display: flex; flex-direction: column; gap: 18px; max-width: 640px; }
.reklam-yeri-ayar { padding: 16px; border: 1px solid var(--cizgi); border-radius: 16px; background: var(--kagit); gap: 10px; }
.ipucu.sola { text-align: left; }

/* Yönetim: söz listesi */
.yonetim-menu .rozet { font-size: 12px; padding: 1px 8px; }
.yonetim-baslik { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.yonetim-ara { display: flex; gap: 8px; flex: 1; max-width: 560px; }
.yonetim-ara input { flex: 1; }
input[type="search"], select { min-height: 46px; padding: 0 14px; border: 1.5px solid var(--cizgi-koyu); border-radius: 14px; background: var(--kagit); color: var(--kahve); font-family: var(--sans); font-size: 15px; }
input[type="search"]:focus, select:focus { outline: none; border-color: var(--kiremit); }
.yonetim-sekmeler { margin-top: 20px; }
.sekme-sayi { font-weight: 400; opacity: .75; margin-left: 4px; }
.yonetim-kategoriler { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.yonetim-kategoriler a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 999px; background: var(--etiket-zemin); text-decoration: none; font-size: 14px; font-weight: 600; color: var(--kahve-orta); }
.yonetim-kategoriler a[aria-current="page"] { background: var(--kiremit); color: var(--vurgu-yazi); }
.yonetim-arac-cubugu { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 20px 0 10px; }
.yonetim-sirala { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.toplu-cubuk { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 12px; background: var(--krem); border: 1px solid var(--cizgi); border-radius: 16px; }
.toplu-hepsi { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.toplu-dugmeler { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.toplu-dugmeler .dugme { min-height: 40px; padding: 0 14px; font-size: 14px; }
.toplu-tasi { display: flex; gap: 6px; }
.toplu-tasi select { min-height: 40px; }
input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--kiremit); }
.yonetim-soz { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; padding: 16px; background: var(--kagit); border: 1px solid var(--cizgi); border-radius: 16px; }
.yonetim-soz.secili { border-color: var(--kiremit); background: var(--etiket-zemin); }
.yonetim-soz.durum-reddedildi .kart-soz { opacity: .6; text-decoration: line-through; }
.yonetim-sec { padding-top: 4px; cursor: pointer; }
.yonetim-soz-icerik { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.yonetim-soz .kart-soz { font-size: 18px; }
.yonetim-rakamlar { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--kahve-acik); }
.yonetim-soz-baglantilar { display: flex; flex-direction: column; gap: 6px; }
.yonetim-soz-baglantilar .dugme { min-height: 36px; padding: 0 12px; font-size: 13px; }
.sayfalama { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 20px; }
@media (max-width: 700px) {
  .yonetim-soz { grid-template-columns: auto 1fr; }
  .yonetim-soz-baglantilar { grid-column: 2; flex-direction: row; }
  .toplu-dugmeler { margin-left: 0; }
}

.dugme.onay-bekliyor, .dugme.onay-bekliyor:hover { background: var(--kiremit); border-color: var(--kiremit); color: var(--vurgu-yazi); }
.supheli { align-self: flex-start; display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--hata-zemin); color: var(--hata-yazi); font-size: 12px; font-weight: 600; }

/* Yönetim: hızlı onay */
.hizli-kart { display: flex; flex-direction: column; gap: 14px; max-width: 760px; margin: 18px 0; padding: clamp(22px, 4vw, 40px); background: var(--kagit); border: 1px solid var(--cizgi); border-radius: 24px; }
.hizli-etiketler { display: flex; gap: 8px; flex-wrap: wrap; }
.hizli-etiketler a.supheli { text-decoration: none; }
.hizli-metin { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: clamp(26px, 3.6vw, 40px); line-height: 1.2; overflow-wrap: anywhere; }
.hizli-kategori { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.hizli-dugmeler { display: flex; gap: 10px; flex-wrap: wrap; }
.hizli-dugmeler .dugme { min-height: 52px; padding: 0 22px; }
kbd { font-family: var(--sans); font-size: 11px; font-weight: 700; padding: 1px 6px; margin-left: 6px; border: 1px solid currentColor; border-radius: 5px; opacity: .7; }
.hizli-geri { margin-bottom: 18px; }
.hizli-kelimeler summary { cursor: pointer; }
.hizli-kelimeler textarea { min-height: 160px; font-family: var(--sans); font-style: normal; font-size: 15px; }

/* Yönetim: günün sözü */
.gunun-satir { grid-template-columns: 150px 1fr auto; align-items: center; }
.gunun-satir.planli { border-color: var(--kiremit); }
.gunun-tarih { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.gunun-islem { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.gunun-form { display: flex; gap: 6px; }
.gunun-form input[type="text"] { width: 110px; min-height: 40px; }
.gunun-form input[type="date"] { width: auto; min-height: 40px; padding: 6px 12px; }
.gunun-form .dugme { min-height: 40px; padding: 0 14px; font-size: 14px; }
@media (max-width: 700px) { .gunun-satir { grid-template-columns: 1fr; } .gunun-islem { justify-content: flex-start; } }

/* Yönetim: analiz */
.analiz-kartlar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 18px; }
@media (max-width: 1100px) { .analiz-kartlar { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .analiz-kartlar { grid-template-columns: repeat(2, 1fr); } }
.grafik-hat-kesik { stroke-dasharray: 5 5; opacity: .7; }
.analiz-kart { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--cizgi); border-radius: 16px; background: var(--kagit); text-decoration: none; color: var(--kahve); }
.analiz-kart:hover { border-color: var(--kiremit); }
.analiz-kart.secili { border: 2px solid var(--kiremit); padding: 13px 15px; }
.analiz-kart-ad { font-size: 13px; color: var(--kahve-orta); }
.analiz-kart strong { font-family: var(--serif); font-weight: 800; font-size: 28px; line-height: 1.1; }
.degisim { font-size: 13px; font-weight: 600; color: var(--kahve-acik); }
.degisim.artis { color: var(--basari-yazi); }
.degisim.azalis { color: var(--kiremit); }
.analiz-bolum { margin-top: 22px; padding: 18px 20px; border: 1px solid var(--cizgi); border-radius: 20px; background: var(--kagit); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.analiz-bolum h2 { font-family: var(--serif); font-weight: 800; font-size: 20px; margin: 0; }
.analiz-bolum h3 { font-size: 15px; margin: 8px 0 0; }
.analiz-bolum-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.analiz-bolum-ust .yonetim-kategoriler { margin: 0; }
.analiz-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0 18px; }
.grafik { width: 100%; height: auto; overflow: visible; }
.grafik-cizgi { stroke: var(--cizgi); stroke-width: 1; }
.grafik-yazi { fill: var(--kahve-acik); font-family: var(--sans); font-size: 11px; }
.grafik-hat { fill: none; stroke: var(--kiremit); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.grafik-alan { fill: var(--kiremit); opacity: .12; }
.grafik-nokta { fill: var(--kagit); stroke: var(--kiremit); stroke-width: 2; }
.grafik-nokta:hover { fill: var(--kiremit); }
.analiz-tablo { width: 100%; border-collapse: collapse; font-size: 14px; }
.analiz-tablo th { text-align: left; font-size: 12px; font-weight: 600; color: var(--kahve-acik); padding: 0 0 6px; }
.analiz-tablo td { padding: 8px 0; border-top: 1px solid var(--cizgi); vertical-align: top; }
.analiz-tablo .sayi { text-align: right; white-space: nowrap; padding-left: 12px; }
.analiz-tablo .vurgu { font-weight: 700; color: var(--kiremit); }
.analiz-tablo .soluk, .soluk { color: var(--kahve-acik); font-size: 12px; }
.analiz-sozler td:first-child a { color: var(--kahve); text-decoration: none; font-family: var(--serif); font-style: italic; font-weight: 600; }
.analiz-sozler td:first-child a:hover { color: var(--kiremit); }
.cubuk { display: block; width: 100%; height: 6px; margin-top: 6px; }
.cubuk-zemin { fill: var(--etiket-zemin); }
.cubuk-dolu { fill: var(--kiremit); }
@media (max-width: 700px) { .analiz-izgara { grid-template-columns: 1fr; } .analiz-sozler th:nth-child(n+3), .analiz-sozler td:nth-child(n+3) { display: none; } }

/* Yönetim: tek söz */
.soz-duzenle { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: start; margin-top: 16px; }
.soz-duzenle textarea { min-height: 110px; }
.soz-rakamlar { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--kagit); border: 1px solid var(--cizgi); border-radius: 20px; }
.soz-rakamlar h2, .soz-rakamlar h3 { font-family: var(--serif); font-weight: 800; font-size: 20px; margin: 0; }
.soz-rakamlar h3 { font-size: 16px; margin-top: 6px; }
.rakam-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rakam-kart { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; background: var(--etiket-zemin); font-size: 13px; color: var(--kahve-orta); }
.rakam-kart strong { font-size: 24px; color: var(--kahve); font-family: var(--serif); }
.rakam-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rakam-liste li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--cizgi); font-size: 14px; }
.soz-sil { margin-top: 8px; }
.yonetim-dugmeler.sola { justify-content: flex-start; }
.rozet-beklemede { background: var(--seftali); color: #3B2A20; }
.rozet-reddedildi { background: var(--cizgi-koyu); color: var(--kahve); }
@media (max-width: 900px) { .soz-duzenle { grid-template-columns: 1fr; } }
.kategori-duzenle { display: flex; flex-direction: column; gap: 14px; }
.kategori-duzenle .yonetim-dugmeler { justify-content: flex-start; }
.kategori-sil { margin: -4px 0 8px; }
.alan-cift { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
input[type="date"], input[type="file"] { width: 100%; min-height: 50px; padding: 12px 18px; border: 1.5px solid var(--cizgi-koyu); border-radius: 16px; background: var(--kagit); color: var(--kahve); font-family: var(--sans); font-size: 15px; }
.yonetim-kart { background: var(--kagit); border: 1px solid var(--cizgi); border-radius: 18px; padding: 20px; display: grid; grid-template-columns: 1fr auto; gap: 6px 20px; align-items: center; }
.yonetim-kart .kart-soz { font-size: 21px; }
.yonetim-bilgi { font-size: 14px; color: var(--kahve-acik); grid-column: 1; }
.yonetim-dugmeler { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 8px; }
.yonetim-dugmeler form { margin: 0; }
.giris { max-width: 440px; margin: 40px auto; display: flex; flex-direction: column; gap: 20px; }
.giris form { display: flex; flex-direction: column; gap: 18px; }
.ust form { margin: 0; }
@media (max-width: 640px) { .yonetim-kart { grid-template-columns: 1fr; } .yonetim-dugmeler { grid-column: 1; grid-row: auto; } }


/* =====================================================================
   MODERN TASARIM KATMANI (2026-10-08). Marka aynı (bıyık, renkler, Fraunces/Work Sans);
   yenilenen: zemin ışıması, gölgeli yüzeyler, düğmeler, kartlar, vitrin, oyunlar, alt bilgi.
   Renkler değişkenden (karanlık mod karşılıkları üstte iki blokta). Yönetim paneli aşağıda kendi bloğunda.
   ===================================================================== */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
::selection { background: var(--seftali); color: #3B2A20; }
body:not(.yonetim) { background: radial-gradient(1100px 620px at 92% -8%, var(--isima-1), transparent 62%), radial-gradient(900px 520px at -12% 4%, var(--isima-2), transparent 60%), var(--krem); background-repeat: no-repeat; }
h1, h2 { letter-spacing: -.015em; }

/* Düğmeler */
.dugme { gap: 8px; min-height: 46px; transition: background .18s, color .18s, border-color .18s, box-shadow .2s, transform .15s; }
.dugme:active { transform: scale(.97); }
.dugme .ikon { width: 18px; height: 18px; }
.dugme-vurgu { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 20px -10px rgba(184, 71, 47, .75); }
.dugme-vurgu:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 14px 26px -12px rgba(184, 71, 47, .85); }
.dugme-cizgi { border-color: var(--ince-kenar); background: var(--kagit); box-shadow: var(--golge-1); }
.dugme-cizgi:hover { border-color: var(--kiremit); color: var(--kiremit); }
.dugme-buyuk { min-height: 54px; padding: 0 26px; font-size: 16px; }
.tema-dugme { width: 42px; height: 42px; border: 1px solid transparent; background: var(--yumusak-vurgu); }
.tema-dugme:hover { border-color: transparent; background: var(--kiremit); color: var(--vurgu-yazi); }

/* Sayfa başlığı rozeti (çoğu sayfanın üstünde) */
.bingo-etiket { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: var(--yumusak-vurgu); color: var(--kiremit); font-size: 12px; letter-spacing: .1em; }

/* Vitrin (ana sayfa girişi) */
.vitrin { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(36px, 6vw, 88px) var(--kenar) clamp(32px, 4.5vw, 64px); }
.vitrin-sol { display: flex; flex-direction: column; align-items: flex-start; }
.vitrin-rozet { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 12px; border-radius: 999px; background: var(--kagit); border: 1px solid var(--ince-kenar); box-shadow: var(--golge-1); color: var(--kahve-orta); font-size: 13.5px; font-weight: 600; }
.vitrin-rozet .biyik { width: 26px; height: auto; }
.vitrin-baslik { margin-top: 22px; font-family: var(--serif); font-weight: 800; font-size: clamp(44px, 6.6vw, 88px); line-height: .98; letter-spacing: -.03em; }
.vitrin-baslik em { font-style: italic; font-weight: 600; color: var(--kiremit); }
.vitrin-metin { margin-top: 20px; max-width: 540px; color: var(--kahve-orta); font-size: 18px; line-height: 1.6; }
.vitrin-dugmeler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.vitrin-rakamlar { display: flex; flex-wrap: wrap; gap: 14px clamp(22px, 4vw, 48px); margin: 36px 0 0; }
.vitrin-rakamlar div { display: flex; flex-direction: column; }
.vitrin-rakamlar dd { margin: 0; font-family: var(--serif); font-weight: 800; font-size: 32px; line-height: 1; }
.vitrin-rakamlar dt { margin-top: 6px; color: var(--kahve-acik); font-size: 13.5px; }
.vitrin .gunun-sozu { position: relative; overflow: hidden; border-radius: 32px; padding: clamp(28px, 3.4vw, 44px); background: radial-gradient(120% 90% at 100% 0%, rgba(242, 201, 168, .22), transparent 55%), var(--koyu-zemin); box-shadow: 0 34px 70px -28px rgba(59, 42, 32, .6); transform: rotate(1.2deg); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.vitrin .gunun-sozu:hover { transform: rotate(0); }
.vitrin .gunun-sozu::before { content: "\201D"; position: absolute; right: 26px; top: 14px; font-family: var(--serif); font-style: italic; font-weight: 800; font-size: 150px; line-height: 1; color: var(--seftali); opacity: .14; pointer-events: none; }
.gunun-etiket { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 13px; }
.gunun-nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--nokta); box-shadow: 0 0 0 0 var(--nokta); animation: nabiz 2s infinite; }
@keyframes nabiz { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.vitrin .gunun-metin { font-size: clamp(28px, 3vw, 42px); }
@media (max-width: 900px) {
  .vitrin { grid-template-columns: 1fr; }
  .vitrin .gunun-sozu { transform: none; }
}
/* Telefonda vitrin KISA: ilk ekranda başlık + söz ekle + günün sözü (oy düğmesiyle) görünsün, altında oyun şeridi ve sözler görünsün.
   Gizlenenler (display:none; metin HTML'de durur): rozet, açıklama paragrafı (aynı metin meta açıklamada ve alttaki tanıtım bölümünde var),
   ikinci düğme "Günün bulmacası" (altta koyu Babadle kartı + menüde yeşil nokta aynı işi yapıyor) ve günün sözü kartındaki bildirim
   düğmesi (alt bilgide aynısı var). Rakamlar zaten sadece 500+ oyda çıkıyor (index.php). */
@media (max-width: 640px) {
  .vitrin { gap: 20px; padding: 20px var(--kenar) 8px; text-align: left; }
  .vitrin-rozet, .vitrin-metin, .vitrin-dugmeler .dugme-cizgi { display: none; }
  .vitrin-baslik { margin-top: 0; font-size: 40px; }
  .vitrin-dugmeler { margin-top: 18px; }
  .vitrin-dugmeler .dugme { flex: 1 1 auto; justify-content: center; }
  .vitrin-rakamlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; margin-top: 20px; }
  .vitrin-rakamlar dd { font-size: 26px; }
  .vitrin-rakamlar dt { font-size: 12px; }
  .vitrin .gunun-sozu { gap: 14px; padding: 18px 16px; border-radius: 26px; }
  .vitrin .gunun-metin { font-size: 26px; }
  .vitrin .gunun-bildirim { display: none; }
  /* Oy düğmesi ve Paylaş tek satıra sığsın (dar telefonda sığmazsa kendiliğinden alt alta iner) */
  .vitrin .gunun-dugmeler { gap: 8px; }
  .vitrin .gunun-dugmeler .oy.buyuk { min-height: 46px; padding: 0 13px; font-size: 14px; }
  .vitrin .gunun-dugmeler .dugme { min-height: 46px; padding: 0 14px; font-size: 14px; }
  .oyun-bolum { margin-bottom: 16px; }
  .sozler-ust { padding-bottom: 12px; }
}
/* Dar telefonda üst çubuktaki "Söz ekle" yuvarlak + olur (vitrinde büyük düğme var) */
@media (max-width: 440px) {
  .ust .ust-ekle { width: 42px; min-height: 42px; padding: 0; }
  .ust .ust-ekle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .logo span { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { .gunun-nokta, .menu-nokta { animation: none; } .vitrin .gunun-sozu { transform: none; } }

/* Bölüm başlıkları */
.bolum-ust { display: flex; flex-direction: column; gap: 6px; margin: 0 0 20px; }
.bolum-ust h2, .sozler-ust h2 { font-family: var(--serif); font-weight: 800; font-size: clamp(28px, 3.2vw, 38px); line-height: 1.1; }
.bolum-ust p { color: var(--kahve-orta); }

/* Oyunlar (ana sayfa): sözlerin hemen üstünde ince bir şerit. Telefonda yana kayar (ikinci kartın ucu görünür, kaydığı anlaşılır),
   geniş ekranda 5 sütun. Söz listesi ilk ekranlarda kalsın diye kasıtlı olarak küçük. */
.oyun-bolum { padding: 0 var(--kenar); margin-bottom: 28px; }
.oyun-baslik { margin-bottom: 8px; color: var(--kahve-acik); font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.oyun-serit { display: flex; gap: 12px; margin: 0 calc(var(--kenar) * -1); padding: 6px var(--kenar) 16px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: var(--kenar); scrollbar-width: none; }
.oyun-serit::-webkit-scrollbar { display: none; }
.oyun-serit li { display: flex; flex: 0 0 auto; scroll-snap-align: start; }
.oyun-kart { position: relative; display: flex; flex: 1; align-items: center; gap: 12px; width: 258px; min-height: 84px; padding: 14px 16px; border-radius: 22px; background: var(--kagit); border: 1px solid var(--ince-kenar); box-shadow: var(--golge-1); color: var(--kahve); text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
.oyun-kart:hover { color: var(--kahve); box-shadow: var(--golge-2); border-color: var(--yumusak-vurgu); }
@media (hover: hover) { .oyun-kart:hover { transform: translateY(-3px); } }
.oyun-simge { flex: none; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: var(--yumusak-vurgu); color: var(--kiremit); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.oyun-simge .ikon { width: 24px; height: 24px; }
.oyun-kart:hover .oyun-simge { transform: rotate(-8deg) scale(1.08); }
.oyun-yazi { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.oyun-kart strong { font-family: var(--serif); font-weight: 800; font-size: 18px; line-height: 1.15; }
.oyun-aciklama { color: var(--kahve-orta); font-size: 13.5px; line-height: 1.35; }
.oyun-one { background: radial-gradient(110% 90% at 100% 0%, rgba(184, 71, 47, .38), transparent 60%), var(--koyu-zemin); border-color: transparent; color: var(--koyu-yazi); }
.oyun-one:hover { color: var(--koyu-yazi); border-color: transparent; }
.oyun-one .oyun-simge { background: var(--kiremit); color: var(--vurgu-yazi); }
.oyun-one .oyun-aciklama { color: var(--koyu-soluk); }
.oyun-rozet { padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: var(--seftali); font-size: 11px; font-weight: 700; }
@media (min-width: 1100px) {
  .oyun-serit { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 6px 0 12px; overflow: visible; }
  .oyun-kart { width: auto; }
}

/* "Babanın Evi" davet kartı: söz listesinin içinde, 12. karttan sonra tam satır. Asıl deneyim /babanin-evi sayfasında. */
.kart.kart-ev { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; justify-content: stretch; gap: clamp(16px, 3vw, 40px); padding: clamp(18px, 2.4vw, 28px); background: radial-gradient(90% 120% at 0% 50%, rgba(242, 201, 168, .35), transparent 60%), var(--kagit); color: var(--kahve); text-decoration: none; }
.kart.kart-ev::before { content: none; }
.kart-ev-resim { display: block; }
.kart-ev-resim img { display: block; width: 100%; height: auto; max-height: 260px; object-fit: contain; }
.kart-ev-yazi { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; color: var(--kahve-orta); }
.kart-ev-baslik { font-family: var(--serif); font-style: italic; font-weight: 800; font-size: clamp(24px, 3vw, 34px); line-height: 1.15; color: var(--kahve); }
@media (max-width: 640px) {
  .kart.kart-ev { grid-template-columns: minmax(0, 1fr); }
  .kart-ev-resim img { max-height: 190px; }
}

/* Söz kartları */
.izgara { gap: 20px; }
.kart { position: relative; overflow: hidden; border: 1px solid var(--ince-kenar); border-radius: 24px; box-shadow: var(--golge-1); transition: transform .2s, box-shadow .2s, border-color .2s; }
.kart::before { content: "\201D"; position: absolute; right: 18px; top: 6px; font-family: var(--serif); font-style: italic; font-weight: 800; font-size: 76px; line-height: 1; color: var(--kiremit); opacity: .11; pointer-events: none; }
/* Üstüne gelince kart hafifçe kalkar (kullanıcı beğendi). Sadece gerçek hover'lı cihazda: dokunmatikte "yapışan hover" kalmasın.
   Kalkma serbest; YAZI ve BOYUT değişimi YASAK (ağırlık/boyut değişince satır kırılımı oynar, kart uzar). */
.kart:hover { box-shadow: var(--golge-2); }
@media (hover: hover) { .kart:hover { transform: translateY(-3px); } }
.kart-soz { position: relative; }
.kart.kart-cagri { background: radial-gradient(120% 100% at 100% 0%, rgba(242, 201, 168, .35), transparent 55%), var(--kiremit); border-color: transparent; }
.kart.kart-cagri::before { color: var(--vurgu-yazi); opacity: .12; }
.etiket { background: var(--yumusak-vurgu); color: var(--kiremit); font-size: 12.5px; font-weight: 700; }
.etiket:hover { color: var(--kiremit-koyu); }
.oy { border-color: transparent; background: var(--yumusak-vurgu); min-height: 40px; }
.oy:hover:not(:disabled) { transform: translateY(-1px); }
.oy.buyuk { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 22px -12px rgba(184, 71, 47, .8); }

/* "Babanın ses tonu": oy arttıkça söz kalınlaşır, yumuşaklığı azalır (Fraunces wght + SOFT eksenleri).
   Fısıltı (1) ince ve yuvarlak; bağırış (5) kalın, keskin, biraz büyük. Kalınlık sadece OY SAYISINA bağlı, hover'da DEĞİŞMEZ:
   ağırlık değişince harf genişliği değişir, satır kırılımı oynar ve kart uzar (kullanıcı şikâyeti 2026-10-09). */
.kart-soz { font-variation-settings: "SOFT" 60; transition: font-weight .35s ease, font-variation-settings .35s ease, letter-spacing .35s ease; }
.kart-soz.ses-1 { font-weight: 380; font-variation-settings: "SOFT" 100; }
.kart-soz.ses-2 { font-weight: 470; font-variation-settings: "SOFT" 80; }
.kart-soz.ses-3 { font-weight: 580; font-variation-settings: "SOFT" 50; }
.kart-soz.ses-4 { font-weight: 720; font-variation-settings: "SOFT" 20; }
.kart-soz.ses-5 { font-weight: 860; font-variation-settings: "SOFT" 0; letter-spacing: -.01em; font-size: clamp(22px, 2.2vw, 27px); }
.ses-olcer { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; margin-left: auto; margin-right: 4px; }
.ses-olcer i { width: 3px; border-radius: 2px; background: var(--cizgi-koyu); }
.ses-olcer i:nth-child(1) { height: 30%; } .ses-olcer i:nth-child(2) { height: 45%; } .ses-olcer i:nth-child(3) { height: 62%; }
.ses-olcer i:nth-child(4) { height: 80%; } .ses-olcer i:nth-child(5) { height: 100%; }
.ses-olcer.ses-1 i:nth-child(-n+1), .ses-olcer.ses-2 i:nth-child(-n+2), .ses-olcer.ses-3 i:nth-child(-n+3),
.ses-olcer.ses-4 i:nth-child(-n+4), .ses-olcer.ses-5 i:nth-child(-n+5) { background: var(--kiremit); }
.kart:hover .ses-olcer i { animation: ses-titre .5s ease-in-out infinite alternate; }
.kart:hover .ses-olcer i:nth-child(2n) { animation-delay: .15s; }
@keyframes ses-titre { to { transform: scaleY(.6); } }
.ses-olcer i { transform-origin: bottom; }
.ses-not { display: flex; align-items: center; gap: 10px; }
.ses-not .ses-olcer { margin: 0; }
@media (prefers-reduced-motion: reduce) { .kart:hover .ses-olcer i { animation: none !important; } }

/* "Işığı aç" açılışı (sadece ana sayfa, ilk ziyaret). Perde HTML'de hazır ama SAKLI; tema.js <html>'e .isik-bekliyor
   ekleyince (ilk çizimden önce) görünür. JS'siz ziyaretçi ve arama motoru perdeyi hiç görmez, içeriği doğrudan okur.
   Perde renkleri sahnenin kendi paleti (karanlık oda + bakalit anahtar), site temasından bağımsız. */
.isik-perde { display: none; position: fixed; inset: 0; z-index: 200; flex-direction: column; align-items: center; justify-content: center; gap: 26px; background: radial-gradient(60% 50% at 50% 46%, #1A120D, #070504 72%); color: #F6EFE3; text-align: center; }
html.isik-bekliyor .isik-perde { display: flex; }
.isik-perde.yandi { animation: isik-yan 1.05s steps(1, end) forwards; }
@keyframes isik-yan {
  0% { background: #070504; } 12% { background: #F6EFE3; } 20% { background: #070504; } 30% { background: #FFF4DE; } 38% { background: #120C09; }
  52% { background: #FFF4DE; opacity: 1; } 100% { background: #FFF4DE; opacity: 0; visibility: hidden; }
}
.isik-perde.yandi > * { animation: isik-icerik .5s ease forwards; }
@keyframes isik-icerik { to { opacity: 0; transform: scale(.96); } }
body.isik-acilis { overflow: hidden; }
.isik-sahne { position: relative; display: flex; align-items: center; justify-content: center; width: 260px; height: 260px; }
.isik-sahne::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(242, 201, 168, .1), transparent); }
/* Bakalit anahtar: krem plaka, iki vida, sallanan klavye */
.isik-anahtar { position: relative; width: 132px; height: 198px; padding: 0; border: none; border-radius: 20px; background: linear-gradient(160deg, #FFF6E6, #E9D9BE 70%, #D8C4A2); box-shadow: inset 0 2px 1px rgba(255, 255, 255, .7), inset 0 -4px 8px rgba(120, 90, 50, .35), 0 24px 50px rgba(0, 0, 0, .7); cursor: pointer; }
.isik-anahtar::before, .isik-anahtar::after { content: ""; position: absolute; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F4EBDD, #A89272); box-shadow: inset 0 0 0 1px rgba(90, 70, 40, .35); }
.isik-anahtar::before { top: 14px; } .isik-anahtar::after { bottom: 14px; }
.isik-klavye { position: absolute; left: 50%; top: 50%; width: 52px; height: 92px; margin: -46px 0 0 -26px; border-radius: 12px; background: linear-gradient(180deg, #D9C7A6, #F6EBD8 48%, #FFF8EC 52%, #E2D1B1); box-shadow: inset 0 0 0 1px rgba(110, 85, 50, .25), 0 10px 12px -6px rgba(0, 0, 0, .45); transform: perspective(300px) rotateX(18deg); transition: transform .12s cubic-bezier(.4, 1.8, .6, 1); }
.isik-anahtar.acik .isik-klavye { transform: perspective(300px) rotateX(-18deg); }
.isik-anahtar:focus-visible { outline: 3px solid #F2C9A8; outline-offset: 6px; }
.isik-baslik { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(26px, 5vw, 40px); font-variation-settings: "SOFT" 100; color: rgba(246, 239, 227, .86); }
.isik-alt { margin-top: -14px; font-size: 14px; color: rgba(246, 239, 227, .5); }
.isik-atla { position: absolute; bottom: 28px; padding: 10px 16px; border: none; border-radius: 999px; background: rgba(246, 239, 227, .08); color: rgba(246, 239, 227, .65); font: inherit; font-size: 14px; cursor: pointer; }
.isik-atla:hover { color: #F6EFE3; background: rgba(246, 239, 227, .14); }
/* Açılıştan sonra tema düğmesi "ışığı kapat" diye göz kırpar */
.tema-dugme.isik-uyari { animation: isik-uyari 1.1s ease-in-out 4; box-shadow: 0 0 0 0 var(--kiremit); }
@keyframes isik-uyari { 50% { box-shadow: 0 0 0 9px transparent; background: var(--kiremit); color: var(--vurgu-yazi); } }
@media (prefers-reduced-motion: reduce) {
  .isik-perde.yandi { animation: isik-sade .4s ease forwards; }
  @keyframes isik-sade { to { opacity: 0; visibility: hidden; } }
  .isik-klavye { transition: none; }
  .tema-dugme.isik-uyari { animation: none; }
}

/* "Babanın Evi" (ana sayfa): her kategori bir oda. Varsayılan hali IŞIKLI ve tam görünür (JS'siz ziyaretçi, Google).
   JS .ev-hazir ekleyince odalar karanlık başlar; ekrana girince .yandi: lamba yanar, eşya çizilir, sözler düşer.
   Oda sahnesi her iki temada koyu (karanlık oda + lamba ışığı); çizgiler şeftali. */
.ev { padding: 0 var(--kenar); margin-bottom: 64px; }
.ev-etiket { align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: var(--yumusak-vurgu); color: var(--kiremit); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ev-ust h1, .ev-ust h2 { font-style: italic; font-weight: 700; }
/* /babanin-evi sayfası: ev artık kendi sayfası (üst boşluk + geri bağlantısı + gerçek h1) */
.ev-sayfa { padding-top: clamp(20px, 3.5vw, 44px); }
.ev-geri { align-self: flex-start; margin-bottom: 6px; color: var(--kiremit); font-weight: 600; text-decoration: none; }
.ev-geri:hover { text-decoration: underline; }
.ev-ust h1 { font-family: var(--serif); font-size: clamp(34px, 5.4vw, 58px); line-height: 1.05; }
.ev-ic { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.ev-plan { position: sticky; top: 96px; padding: 18px; border-radius: 24px; background: var(--kagit); border: 1px solid var(--ince-kenar); box-shadow: var(--golge-1); }
.ev-plan-baslik { margin-bottom: 12px; color: var(--kahve-acik); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ev-plan ol { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; padding: 0; list-style: none; border: 2px solid var(--kahve); border-radius: 6px; overflow: hidden; }
.ev-plan li { border: 1px solid var(--cizgi-koyu); margin: -1px 0 0 -1px; }
.ev-plan a { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-height: 68px; padding: 8px; color: var(--kahve-orta); font-size: 12.5px; font-weight: 600; line-height: 1.2; text-decoration: none; transition: background .3s, color .3s; }
.ev-plan a span { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--kahve-acik); }
.ev-plan a::after { content: ""; position: absolute; top: 9px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--cizgi-koyu); transition: background .3s, box-shadow .3s; }
.ev-plan a:hover { color: var(--kahve); background: var(--yumusak-vurgu); }
.ev-plan a.gezildi::after { background: var(--seftali); }
.ev-plan a.aktif { background: var(--koyu-zemin); color: var(--koyu-yazi); }
.ev-plan a.aktif span { color: var(--seftali); }
.ev-plan a.aktif::after { background: #FFE6C2; box-shadow: 0 0 10px 3px rgba(242, 201, 168, .7); }
.ev-odalar { display: flex; flex-direction: column; }
.oda { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; min-height: min(78vh, 640px); padding: 36px 0; scroll-margin-top: 80px; }
.oda + .oda { border-top: 1px dashed var(--cizgi-koyu); }
.oda-sahne { position: relative; overflow: hidden; aspect-ratio: 1; max-width: 440px; width: 100%; border-radius: 32px; background: var(--koyu-zemin); border: 1px solid var(--koyu-kenar); box-shadow: 0 34px 70px -34px rgba(59, 42, 32, .7); }
/* Lambanın ışığı (sahnenin üstünden yayılır) */
.oda-sahne::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 62% at 50% 8%, rgba(255, 226, 186, .34), rgba(242, 201, 168, .1) 55%, transparent 75%); transition: opacity .5s; }
.oda-lamba { position: absolute; top: 0; left: 50%; z-index: 1; width: 2px; height: 34px; margin-left: -1px; background: rgba(243, 234, 220, .35); }
.oda-lamba::after { content: ""; position: absolute; left: 50%; bottom: -16px; width: 30px; height: 18px; margin-left: -15px; border-radius: 30px 30px 4px 4px; background: #5A4334; box-shadow: 0 10px 16px 2px rgba(255, 228, 190, .75), inset 0 -3px 0 #FFE6C2; transition: box-shadow .3s; }
.oda-cizim { position: absolute; inset: 14% 10% 6%; width: 80%; height: 80%; fill: none; stroke: var(--seftali); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: opacity .5s; }
.oda-cizim path { transform-box: fill-box; transform-origin: center; }
/* Işık düğmesi (JS gösterir): odanın ışığını kapatıp açar */
.oda-anahtar { position: absolute; right: 16px; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: none; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--koyu-soluk); font: inherit; font-size: 12.5px; cursor: pointer; transition: background .2s, color .2s; }
.oda-anahtar:hover { background: rgba(255, 255, 255, .14); color: var(--koyu-yazi); }
.oda-anahtar:focus-visible { outline: 3px solid var(--seftali); outline-offset: 3px; }
.oda-anahtar-dugme { position: relative; width: 20px; height: 28px; border-radius: 6px; background: linear-gradient(160deg, #FFF6E6, #D8C4A2); }
.oda-anahtar-dugme::after { content: ""; position: absolute; left: 6px; top: 5px; width: 8px; height: 10px; border-radius: 3px; background: #B8A27E; transition: top .12s; }
.oda-anahtar[aria-pressed="false"] .oda-anahtar-dugme::after { top: 13px; }
/* Karanlık oda (JS'li ilk hal ya da ışığı kapatılmış oda) */
.ev-hazir .oda:not(.yandi) .oda-sahne::before, .oda.kapali .oda-sahne::before { opacity: 0; }
.ev-hazir .oda:not(.yandi) .oda-lamba::after, .oda.kapali .oda-lamba::after { box-shadow: inset 0 -3px 0 #3A2C23; }
.oda.kapali .oda-cizim { opacity: .22; }
/* Eşya kendini çizer (yollar pathLength=1) */
.ev-hazir .oda-cizim path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s cubic-bezier(.6, .1, .3, 1) .2s; }
.ev-hazir .oda:not(.yandi) .oda-cizim path { stroke-dashoffset: 1; transition: none; }
.oda-cizim path:nth-child(2) { transition-delay: .35s; } .oda-cizim path:nth-child(3) { transition-delay: .5s; }
.oda-cizim path:nth-child(4) { transition-delay: .65s; } .oda-cizim path:nth-child(5) { transition-delay: .8s; }
.oda-cizim path:nth-child(6) { transition-delay: .95s; } .oda-cizim path:nth-child(7) { transition-delay: 1.1s; }
.oda-cizim path:nth-child(8) { transition-delay: 1.25s; }
/* Yazılar: oda yanınca sırayla düşer */
.ev-hazir .oda-yazi > *, .ev-hazir .oda-sozler li { transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .3, 1); }
.ev-hazir .oda:not(.yandi) .oda-yazi > *:not(.oda-sozler), .ev-hazir .oda:not(.yandi) .oda-sozler li { opacity: 0; transform: translateY(16px); }
.ev-hazir .oda-yazi > :nth-child(2) { transition-delay: .1s; } .ev-hazir .oda-yazi > :nth-child(3) { transition-delay: .2s; }
.ev-hazir .oda-sozler li:nth-child(1) { transition-delay: .45s; } .ev-hazir .oda-sozler li:nth-child(2) { transition-delay: .65s; }
.ev-hazir .oda-sozler li:nth-child(3) { transition-delay: .85s; } .ev-hazir .oda-git { transition-delay: 1s; }
/* Odanın kendine has hareketi (sadece ışık yanıkken) */
.oda-mutfak.yandi:not(.kapali) .oda-cizim path:nth-child(6) { animation: oda-buhar 2.6s ease-in-out 1.6s infinite; }
@keyframes oda-buhar { 50% { transform: translateY(-5px); opacity: .45; } }
.oda-salon.yandi:not(.kapali) .oda-cizim path:nth-child(2) { fill: rgba(170, 205, 255, .1); animation: oda-tv 3.2s steps(1, end) 1.6s infinite; }
@keyframes oda-tv { 0% { fill: rgba(170, 205, 255, .1); } 30% { fill: rgba(255, 220, 170, .14); } 55% { fill: rgba(170, 205, 255, .06); } 80% { fill: rgba(200, 255, 210, .1); } }
.oda-araba.yandi:not(.kapali) .oda-cizim path:nth-child(7) { animation: oda-sinyal 1s steps(1, end) 1.6s infinite; }
@keyframes oda-sinyal { 50% { stroke: #F0A53A; stroke-width: 5; } }
.oda-cuzdan.yandi:not(.kapali) .oda-cizim path:nth-child(4) { animation: oda-para 3s ease-in-out 1.6s infinite; }
@keyframes oda-para { 50% { transform: translateY(5px); } }
.oda-koltuk.yandi:not(.kapali) .oda-cizim path:nth-child(6) { animation: oda-gazete 4s ease-in-out 1.6s infinite; }
@keyframes oda-gazete { 50% { transform: rotate(-4deg); } }
.oda-antre.yandi:not(.kapali) .oda-cizim path:nth-child(6), .oda-antre.yandi:not(.kapali) .oda-cizim path:nth-child(7) { animation: oda-ayakkabi 5s ease-in-out 1.6s infinite; }
@keyframes oda-ayakkabi { 8% { transform: translateX(-2px); } 16% { transform: none; } }
/* Minyatür oda görseli (inc/ev.php EV_SAHNELERI): gündüz görselinin üstünde gece (ışık kapalı) hâli durur.
   Oda karanlıkken gece görünür; ışık yanınca gece görseli titreyerek kaybolur (lamba yanıyormuş gibi). */
/* Görsellerin zemini şeffaf (scratchpad sahne_seffaf.php): oda sayfanın üstünde süzülür, kart/çerçeve yok */
.oda-sahne.oda-sahne-gorsel { aspect-ratio: 4 / 3; max-width: 560px; overflow: visible; border: none; border-radius: 0; background: none; box-shadow: none; }
.oda-sahne-gorsel::before { display: none; }
.oda-sahne-gorsel > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.oda-sahne-gorsel .oda-gece { opacity: 0; transition: opacity .45s ease; }
.ev-hazir .oda:not(.yandi) .oda-gece, .oda.kapali .oda-gece { opacity: 1; }
.oda.yandi:not(.kapali) .oda-gece { animation: oda-lamba-yan .9s steps(1, end) .25s backwards; }
@keyframes oda-lamba-yan { 0% { opacity: 1; } 18% { opacity: 0; } 30% { opacity: .9; } 48% { opacity: 0; } 62% { opacity: .5; } 76%, 100% { opacity: 0; } }
.oda-sahne-gorsel .oda-anahtar { background: var(--koyu-zemin); color: var(--koyu-yazi); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5); }
.oda-sahne-gorsel .oda-anahtar:hover { background: var(--koyu-zemin); color: var(--seftali); }
/* Ev sesleri düğmesi (JS gösterir; sesler tarayıcıda üretilir, dosya yok) ve açıkken köşedeki kapat düğmesi */
.ev-ses { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 8px; padding: 9px 16px 9px 12px; border: 1px solid var(--ince-kenar); border-radius: 999px; background: var(--kagit); color: var(--kahve); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: var(--golge-1); transition: background .2s, color .2s; }
.ev-ses svg { width: 20px; height: 20px; }
.ev-ses:hover { color: var(--kiremit); }
.ev-ses[aria-pressed="true"] { background: var(--kiremit); border-color: transparent; color: var(--vurgu-yazi); }
.ev-ses[aria-pressed="true"] .ev-ses-kapali, .ev-ses[aria-pressed="false"] .ev-ses-dalga { display: none; }
.ev-ses:focus-visible, .ses-yuzen:focus-visible { outline: 3px solid var(--kiremit); outline-offset: 3px; }
.ses-yuzen { position: fixed; left: 16px; bottom: 16px; z-index: 30; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: none; border-radius: 999px; background: var(--secili-zemin); color: var(--secili-yazi); font: inherit; font-size: 13px; font-weight: 600; box-shadow: var(--golge-2); cursor: pointer; }
.ses-yuzen i { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.ses-yuzen i b { width: 3px; border-radius: 2px; background: var(--kiremit); animation: ses-titre .6s ease-in-out infinite alternate; transform-origin: bottom; }
.ses-yuzen i b:nth-child(1) { height: 50%; } .ses-yuzen i b:nth-child(2) { height: 100%; animation-delay: .2s; } .ses-yuzen i b:nth-child(3) { height: 70%; animation-delay: .4s; }
@media (prefers-reduced-motion: reduce) { .ses-yuzen i b { animation: none; } }

/* Evin kapağı (bölüm başında bütün ev) ve elektrik kesintisi görseli */
.ev-kapak { max-width: 880px; margin: 0 auto 28px; }
.ev-kapak img, .fener-gorsel img { display: block; width: 100%; height: auto; }
.fener-bas { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; margin-bottom: 22px; }
.fener-bas .bolum-ust { margin: 0; }
.fener-gorsel { margin: 0; }
@media (max-width: 760px) { .fener-bas { grid-template-columns: 1fr; } }
.oda-no { color: var(--kiremit); font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.oda-yazi h3 { margin: 6px 0 4px; font-family: var(--serif); font-weight: 800; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.05; letter-spacing: -.02em; }
.oda-alt { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--kahve-orta); font-variation-settings: "SOFT" 100; }
.oda-sozler { display: flex; flex-direction: column; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.oda-sozler li { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 18px; background: var(--kagit); border: 1px solid var(--ince-kenar); box-shadow: var(--golge-1); }
.oda-sozler a { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 19px; line-height: 1.3; color: var(--kahve); text-decoration: none; }
.oda-sozler a:hover { color: var(--kiremit); }
.oda-sozler span { color: var(--kahve-acik); font-size: 13px; }
.oda-git { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--kiremit); font-weight: 700; text-decoration: none; transition: gap .2s; }
.oda-git:hover { gap: 12px; }
@media (max-width: 900px) {
  .ev-ic { grid-template-columns: 1fr; }
  .ev-plan { display: none; }
  .oda { grid-template-columns: 1fr; gap: 20px; min-height: 0; padding: 28px 0; }
  .oda-sahne { max-width: none; aspect-ratio: 16 / 10; }
  .oda-cizim { inset: 18% 22% 4%; width: 56%; height: 78%; }
}
@media (max-width: 460px) {
  .oda-sahne { border-radius: 26px; }
  .oda-sozler a { font-size: 17.5px; }
  .oda-alt { font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .ev-hazir .oda-cizim path, .ev-hazir .oda-yazi > *, .ev-hazir .oda-sozler li, .oda-gece { transition: none !important; animation: none !important; }
  .ev-hazir .oda:not(.yandi) .oda-cizim path { stroke-dashoffset: 0; }
  .ev-hazir .oda:not(.yandi) .oda-yazi > *:not(.oda-sozler), .ev-hazir .oda:not(.yandi) .oda-sozler li { opacity: 1; transform: none; }
  .oda .oda-cizim path { animation: none !important; }
}

/* "Elektrikler kesildi" duvarı (ana sayfa). Varsayılan: duvar aydınlık, sözler okunur (JS'siz/Google).
   JS .fener-hazir ekler + .fener-karanlik katmanı: karanlıkta sadece fenerin (--fx/--fy, CSSOM ile) olduğu yer görünür.
   Bulunan sözler fosforlu kalır (.bulundu, katmanın üstünde). Sigorta kutusu katmanın ALTINDA: fenerle bulunur. */
.fener { padding: 0 var(--kenar); margin-bottom: 64px; }
.fener-duvar { position: relative; overflow: hidden; min-height: 520px; padding: 88px clamp(20px, 5vw, 72px) 120px; border-radius: 32px; border: 1px solid var(--koyu-kenar);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 38px), radial-gradient(90% 70% at 50% 0%, rgba(242, 201, 168, .12), transparent 70%), var(--koyu-zemin);
  box-shadow: 0 34px 70px -34px rgba(59, 42, 32, .7); touch-action: manipulation; }
.fener-sozler { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; align-items: center; margin: 0; padding: 0; list-style: none; }
.fener-sozler li { position: relative; z-index: 1; text-align: center; transition: transform .4s; }
.fener-soz { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 20px; line-height: 1.25; color: var(--koyu-yazi); text-decoration: none; font-variation-settings: "SOFT" 100; transition: color .4s, text-shadow .4s; }
.fener-soz:hover { color: var(--seftali); }
.fener-sozler li:nth-child(3n) .fener-soz { font-size: 25px; font-weight: 800; font-variation-settings: "SOFT" 0; color: var(--seftali); }
.fener-sozler li:nth-child(3n+2) .fener-soz { font-size: 17px; color: var(--koyu-soluk); }
.fener-sozler li:nth-child(4n+1) { transform: rotate(-3deg); } .fener-sozler li:nth-child(4n+2) { transform: rotate(2deg) translateY(10px); }
.fener-sozler li:nth-child(4n+3) { transform: rotate(-1deg) translateY(-8px); } .fener-sozler li:nth-child(4n) { transform: rotate(3deg); }
.fener-karanlik { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(circle var(--fr, 150px) at var(--fx, 50%) var(--fy, 40%), rgba(255, 236, 200, .07) 0%, rgba(12, 8, 5, .2) 50%, rgba(8, 5, 3, .93) 85%, rgba(6, 4, 2, .992) 100%); }
.fener-duvar.elektrik-geldi .fener-karanlik { animation: fener-elektrik 1s steps(1, end) forwards; }
@keyframes fener-elektrik { 0% { opacity: 1; } 15% { opacity: .1; } 30% { opacity: .9; } 45% { opacity: 0; } 60% { opacity: .5; } 100% { opacity: 0; visibility: hidden; } }
/* Fenerle bulunan söz: fosforlu parlar, karanlıkta da görünür */
.fener-sozler li.bulundu { z-index: 3; }
.fener-sozler li.bulundu .fener-soz { color: var(--seftali); text-shadow: 0 0 14px rgba(242, 201, 168, .55), 0 0 2px rgba(242, 201, 168, .8); }
.elektrik-geldi .fener-sozler li.bulundu .fener-soz { text-shadow: none; }
.fener-durum { position: absolute; left: 18px; bottom: 18px; z-index: 4; margin: 0; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .09); color: var(--koyu-yazi); font-size: 13.5px; font-weight: 600; }
/* Sigorta kutusu: her gün başka köşede */
.fener-sigorta { position: absolute; z-index: 1; width: 58px; height: 76px; padding: 0; border: none; background: none; color: var(--koyu-soluk); cursor: pointer; }
.fener-sigorta svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fener-sigorta .fener-kol { transform-box: fill-box; transform-origin: bottom; transition: transform .25s cubic-bezier(.4, 1.8, .6, 1); }
.fener-sigorta:hover, .fener-sigorta:focus-visible { color: var(--seftali); }
.fener-sigorta:focus-visible { outline: 3px solid var(--seftali); outline-offset: 4px; border-radius: 6px; }
.elektrik-geldi .fener-sigorta { color: var(--seftali); }
.elektrik-geldi .fener-sigorta .fener-kol { transform: scaleY(-1); }
.sigorta-1 .fener-sigorta { top: 22px; left: 22px; } .sigorta-2 .fener-sigorta { top: 22px; right: 22px; }
.sigorta-3 .fener-sigorta { bottom: 24px; right: 24px; } .sigorta-4 .fener-sigorta { bottom: 24px; left: 50%; margin-left: -29px; }
.sigorta-5 .fener-sigorta { top: 22px; left: 50%; margin-left: -29px; }
.fener-atla { display: block; margin: 14px auto 0; padding: 8px 14px; border: none; border-radius: 999px; background: none; color: var(--kahve-acik); font: inherit; font-size: 14px; cursor: pointer; }
.fener-atla:hover { color: var(--kahve); background: var(--yumusak-vurgu); }
@media (max-width: 900px) { .fener-sozler { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; } }
@media (max-width: 460px) {
  .fener-duvar { padding: 84px 16px 110px; border-radius: 26px; }
  .fener-soz { font-size: 17px; }
  .fener-sozler li:nth-child(3n) .fener-soz { font-size: 20px; }
  .fener-sozler li:nth-child(3n+2) .fener-soz { font-size: 15px; }
}

/* Özlem finali (ana sayfa sonu). Varsayılan = SON HAL: gece, lamba kısık, telefon yanık, bildirim görünür (JS'siz/Google).
   JS .ozlem-hazir ekler → ilk hal (lamba yanık, telefon karanlık); ekrana girince .yandi: lamba kısılır, telefon yanar,
   "yazıyor…" gelir, sonra "Babam · Eve varınca haber ver." bildirimi düşer. Sahne her temada gece (koyu). */
.ozlem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: center; margin: 24px var(--kenar) 0; padding: clamp(28px, 4.5vw, 64px);
  border-radius: 36px; border: 1px solid var(--koyu-kenar); color: var(--koyu-yazi);
  background: radial-gradient(55% 60% at 22% 18%, rgba(150, 180, 230, .10), transparent 70%), radial-gradient(60% 70% at 100% 100%, rgba(184, 71, 47, .18), transparent 70%), var(--koyu-zemin);
  box-shadow: 0 40px 80px -40px rgba(59, 42, 32, .8); }
/* Sahne: gece salonu görseli (4:3). Üstünde: kısılan ışık katmanı (::before), telefonun ekran ışığı, "yazıyor…" ve bildirim. */
.ozlem-sahne { position: relative; width: 100%; max-width: 560px; aspect-ratio: 4 / 3; justify-self: center; }
/* Görselin zemini şeffaf; "lamba kısılır" = görselin parlaklığı düşer (kare gölge katmanı yok) */
.ozlem-sahne > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; filter: brightness(.78); transition: filter 1.6s ease .2s; }
.ozlem-telefon-isik { position: absolute; z-index: 2; left: 37%; top: 70%; width: 24%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(207, 228, 255, .5), transparent); transform: translate(-50%, -50%); pointer-events: none; transition: opacity .6s ease .9s; }
.yandi .ozlem-telefon-isik { animation: ozlem-nabiz 2.4s ease-in-out 3.4s infinite; }
@keyframes ozlem-nabiz { 50% { opacity: .5; } }
.ozlem-yaziyor { position: absolute; z-index: 3; top: 9%; left: 50%; display: flex; gap: 5px; padding: 12px 16px; border-radius: 999px; background: rgba(255, 251, 244, .12); opacity: 0; transform: translateX(-50%); pointer-events: none; }
.ozlem-yaziyor i { width: 7px; height: 7px; border-radius: 50%; background: var(--koyu-yazi); animation: ozlem-nokta 1s ease-in-out infinite; }
.ozlem-yaziyor i:nth-child(2) { animation-delay: .15s; } .ozlem-yaziyor i:nth-child(3) { animation-delay: .3s; }
@keyframes ozlem-nokta { 50% { transform: translateY(-4px); opacity: .5; } }
.yandi .ozlem-yaziyor { animation: ozlem-yaziyor 1.7s ease 1.1s forwards; }
@keyframes ozlem-yaziyor { 12%, 85% { opacity: 1; } 100% { opacity: 0; } }
.ozlem-bildirim { position: absolute; z-index: 3; top: 5%; left: 4%; right: 4%; display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 14px 18px; border-radius: 22px;
  background: rgba(255, 251, 244, .12); border: 1px solid rgba(255, 251, 244, .16); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6);
  transition: opacity .7s ease 2.8s, transform .7s cubic-bezier(.2, 1.3, .4, 1) 2.8s; }
.ozlem-bildirim-ust { display: flex; align-items: center; gap: 7px; color: var(--koyu-soluk); font-size: 12.5px; }
.ozlem-bildirim-ust b { color: var(--koyu-yazi); }
.ozlem-bildirim-ust svg { color: var(--seftali); }
.ozlem-bildirim-metin { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: clamp(21px, 2.4vw, 27px); line-height: 1.2; color: var(--koyu-yazi); }
/* İlk hal (JS'li, ekrana girmeden önce) */
.ozlem-hazir:not(.yandi) .ozlem-sahne > img { filter: none; transition: none; }
.ozlem-hazir:not(.yandi) .ozlem-telefon-isik { opacity: 0; transition: none; }
.ozlem-hazir:not(.yandi) .ozlem-bildirim { opacity: 0; transform: translateY(-22px) scale(.97); transition: none; }
.ozlem .ev-etiket { background: rgba(242, 201, 168, .14); color: var(--seftali); }
.ozlem-yazi h2 { margin: 12px 0 14px; font-family: var(--serif); font-weight: 800; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -.02em; }
.ozlem-metin { color: var(--koyu-soluk); font-size: 17px; line-height: 1.6; }
.ozlem-metin strong { color: var(--seftali); font-family: var(--serif); font-style: italic; font-size: 1.12em; }
.ozlem-yaz { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(243, 234, 220, .12); }
.ozlem-yaz-baslik { margin-bottom: 12px; font-weight: 700; }
.ozlem-mesajlar { display: flex; flex-wrap: wrap; gap: 8px; }
.ozlem-mesaj { position: relative; cursor: pointer; }
.ozlem-mesaj input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ozlem-mesaj span { display: inline-block; padding: 9px 15px; border-radius: 999px; border: 1px solid rgba(243, 234, 220, .2); color: var(--koyu-yazi); font-size: 14.5px; transition: background .15s, color .15s, border-color .15s; }
.ozlem-mesaj:hover span { border-color: var(--seftali); }
.ozlem-mesaj input:checked + span { background: var(--seftali); border-color: var(--seftali); color: var(--koyu-zemin); font-weight: 600; }
.ozlem-mesaj input:focus-visible + span { outline: 3px solid var(--seftali); outline-offset: 2px; }
.ozlem-dugmeler { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.ozlem-not { margin-top: 10px; color: var(--koyu-soluk); font-size: 13px; opacity: .8; }
.ozlem-kayip { margin-top: 24px; color: var(--koyu-soluk); font-size: 15px; }
.ozlem-kayip a { color: var(--seftali); }
@media (max-width: 900px) {
  .ozlem { grid-template-columns: 1fr; }
  .ozlem-sahne { max-width: 560px; }
}
@media (max-width: 460px) { .ozlem { border-radius: 28px; padding: 26px 18px 30px; } }
@media (prefers-reduced-motion: reduce) {
  .ozlem * { animation: none !important; transition: none !important; }
}


/* KONU SAYFALARI (2026-10-10): telefonda kısa giriş (ilk mesaj ilk ekranda), 44px dokunma alanı, WhatsApp biraz öne çıkar (24 mesajda iki
   aynı düğme yerine: Kopyala çizgili, WhatsApp yumuşak dolgulu). Uzun yazı sayfası: arka plan çizimleri kapalı (konu.php). */
.konu-dugmeler .dugme { min-height: 44px; padding: 0 16px; font-size: 14px; }
.konu-dugmeler a.dugme { background: var(--yumusak-vurgu); border-color: transparent; color: var(--kiremit); }
.konu-dugmeler a.dugme:hover { background: var(--kiremit); color: var(--vurgu-yazi); }
.konu-sozler a { display: inline-block; padding: 9px 0; }
.konu-diger a { min-height: 44px; }
.konu-sss summary { display: flex; align-items: center; min-height: 44px; }
@media (max-width: 640px) {
  .konu-ust { align-items: flex-start; text-align: left; gap: 10px; }
  .konu-ust .biyik { width: 52px; height: auto; }
  .konu-ust .aciklama { font-size: 15px; line-height: 1.55; }
  .konu-icindekiler { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; width: 100%; padding-bottom: 4px; scrollbar-width: none; }
  .konu-icindekiler::-webkit-scrollbar { display: none; }
  .konu-icindekiler a { flex: none; min-height: 44px; }
}

/* Babalar Günü: uzun mesaj listesinde "Daha fazla mesaj" kutusu */
.mesaj-daha { display: flex; flex-direction: column; gap: 10px; }
.mesaj-daha > summary { display: flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--kiremit); font-size: 14px; font-weight: 700; cursor: pointer; list-style: none; }
.mesaj-daha > summary::-webkit-details-marker { display: none; }
.mesaj-daha > summary::before { content: "+"; margin-right: 8px; font-size: 18px; }
.mesaj-daha[open] > summary::before { content: "−"; }
.mesaj-daha[open] > summary { margin-bottom: 0; }
.mesaj-daha .mesaj-secenek { display: block; }

/* SÖZ EKLE (2026-10-10): sakin "kağıt" panel (form düz zemine serilmişti, göz yoruyordu), durum çipleri, telefonda önizleme yazı alanının altında,
   başarı ekranı düğmeleri. Form sayfasında arka plan çizimleri kapalı (ekle.php). */
.ekle-form { padding: clamp(22px, 3vw, 40px); border-radius: 28px; background: var(--kagit); border: 1px solid var(--ince-kenar); box-shadow: var(--golge-1); }
.ekle-form textarea, .ekle-form input[type="text"] { background: var(--krem); }
.ekle h1 { font-size: clamp(28px, 3.4vw, 40px); }
.ekle .aciklama { color: var(--kahve-orta); font-size: 16px; line-height: 1.55; }
.durumlar { display: flex; flex-direction: column; gap: 10px; padding-bottom: 4px; }
.durumlar[hidden] { display: none; }
.durumlar-baslik { font-size: 14px; font-weight: 600; color: var(--kahve-acik); }
.durum-cipler { display: flex; flex-wrap: wrap; gap: 8px; }
.durum-cip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid transparent; background: var(--yumusak-vurgu); color: var(--kiremit); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
.durum-cip:hover { background: var(--kiremit); color: var(--vurgu-yazi); }
.durum-cip[aria-pressed="true"] { background: var(--kiremit); color: var(--vurgu-yazi); }
.basari-dugmeler { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0; }
@media (max-width: 900px) {
  .ekle-form form .ekle-onizleme { gap: 10px; order: 0; }
  .ekle-form form .ekle-onizleme .paylasim-karti { padding: 22px; gap: 14px; border-radius: 22px; }
  .ekle-form form .ekle-onizleme .ipucu { display: none; }
}

/* TEK SÖZ SAYFASI düzeni (2026-10-10): sayfa yolu, paylaşım oy düğmesinin hemen altında (WhatsApp birincil), indirme seçenekleri kapalı,
   masaüstünde kart yapışkan (yan sütun uzundu, kartın altında boşluk kalıyordu). */
.kirinti { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; margin: -30px 0 -30px; font-size: 14px; color: var(--kahve-acik); }
.kirinti a { display: inline-flex; align-items: center; min-height: 44px; color: var(--kahve-acik); text-decoration: none; }
.kirinti a:hover { color: var(--kiremit); text-decoration: underline; }
.paylas-ana .paylas-whatsapp { width: 100%; min-height: 54px; border-radius: 16px; font-size: 16px; }
.paylas-uclu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.paylas-uclu .dugme { border-radius: 14px; min-height: 46px; padding: 0 8px; }
.indir > summary { display: flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--kahve-orta); font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
.indir > summary::-webkit-details-marker { display: none; }
.indir > summary::after { content: "+"; margin-left: auto; font-size: 20px; font-weight: 400; }
.indir[open] > summary::after { content: "−"; }
.indir[open] { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 801px) {
  .tek { align-items: start; }
  .paylasim-karti-buyuk { position: sticky; top: 92px; }
}
@media (max-width: 800px) { .kirinti { margin: 0; } }
/* Alt şerit: duvar kâğıdı + bingo yan yana (dar ekranda alt alta), bildir bağlantısı ortada. Küçük önizleme: kırpılmış (önce 199px yüksekti). */
.tek-alt { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: stretch; padding: 36px var(--kenar) 0; }
/* Duvar kâğıdı önizlemesi telefon çerçevesinde: görselin ortası (söz) büyütülür, böylece küçükte de okunur */
.tek-alt .duvar-telefon { position: relative; flex: none; display: block; width: 108px; height: 176px; overflow: hidden; border-radius: 20px; border: 3px solid var(--cizgi-koyu); background: var(--koyu-zemin); box-shadow: var(--golge-1); transition: transform .2s, box-shadow .2s; }
.tek-alt .duvar-telefon::before { content: ""; position: absolute; z-index: 1; top: 7px; left: 50%; width: 30px; height: 6px; margin-left: -15px; border-radius: 6px; background: rgba(0, 0, 0, .55); }
.tek-alt .duvar-telefon img { position: absolute; top: 50%; left: 50%; width: 160px; max-width: none; height: auto; border-radius: 0; box-shadow: none; transform: translate(-50%, -53%); }
.tek-alt .duvar-telefon:hover { transform: translateY(-2px); box-shadow: var(--golge-2); }
.tek-alt .soz-duvar .not { margin: -4px 0 2px; font-size: 14px; }
.tek-alt .soz-duvar .paylas-izgara { display: flex; flex-wrap: wrap; gap: 8px; }
.tek-alt .soz-duvar .paylas-izgara .dugme { min-height: 40px; padding: 0 14px; border-radius: 999px; }
.tek-alt .bingo-duyuru { margin: 0; height: 100%; }
.bildir-alt { margin: 28px var(--kenar) 0; text-align: center; }
.benzer-tumu { margin-top: 20px; text-align: center; }
.benzer-tumu .dugme { min-height: 44px; border-radius: 999px; }
@media (max-width: 800px) { .tek-alt { grid-template-columns: 1fr; padding-top: 28px; } }

/* SİTENİN ARKA PLANI (2026-10-10, inc/sablon.php arka_dekor()): çok soluk çizgi çizim "baba evi". İçeriğin ARKASINDA (z-index -1), tıklanmaz,
   sadece geniş ekranda (telefonda hiç yok). Fare hareketinde derinlik farkıyla kayar (uygulama.js ar_: sadece transform, tek rAF, durunca durur);
   boştayken yavaşça süzülür (CSS, sadece transform: GPU). Yazının okunurluğuna dokunmaz (opaklık %9-13). */
.arka { display: none; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
@media (min-width: 901px) { .arka { display: block; } }
.arka-oge { position: absolute; color: var(--kiremit); opacity: .1; will-change: transform; }
:root[data-tema="koyu"] .arka-oge { opacity: .14; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) .arka-oge { opacity: .14; } }
.arka-cizim, .arka-biyik-ic { display: block; width: 100%; height: auto; animation: arka-suzul 16s ease-in-out infinite alternate; }
.arka-cizim { fill: none; stroke: currentColor; stroke-width: 1.7px; stroke-linecap: round; stroke-linejoin: round; }
.arka-cizim path { vector-effect: non-scaling-stroke; }
.arka-biyik-ic { fill: currentColor; }
.arka-cay { top: 5%; right: 1%; width: clamp(180px, 19vw, 320px); }
.arka-biyik { top: 30%; left: -4%; width: clamp(240px, 26vw, 420px); }
.arka-biyik .arka-biyik-ic { rotate: -9deg; animation-duration: 20s; }
.arka-tv { bottom: 4%; left: 2%; width: clamp(200px, 21vw, 340px); }
.arka-tv .arka-cizim { animation-duration: 19s; animation-delay: -6s; }
.arka-koltuk { bottom: 2%; right: 5%; width: clamp(210px, 22vw, 360px); }
.arka-koltuk .arka-cizim { animation-duration: 22s; animation-delay: -11s; }
.arka-cuzdan { top: 54%; right: -3%; width: clamp(190px, 20vw, 330px); }
.arka-cuzdan .arka-cizim { animation-duration: 18s; animation-delay: -3s; }
.arka-tirnak-ic { display: block; font-family: var(--serif); font-style: italic; font-weight: 800; font-size: clamp(280px, 30vw, 520px); line-height: .8; }
.arka-tirnak { top: 4%; left: 41%; opacity: .06; }
:root[data-tema="koyu"] .arka-tirnak { opacity: .08; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) .arka-tirnak { opacity: .08; } }
@keyframes arka-suzul { from { transform: translateY(-9px) rotate(-1.2deg); } to { transform: translateY(9px) rotate(1.2deg); } }
@media (prefers-reduced-motion: reduce) { .arka-cizim, .arka-biyik-ic { animation: none; } }

/* Sıralama sekmeleri: tek parça seçici */
.sekmeler { gap: 2px; padding: 4px; border-radius: 999px; background: var(--kagit); border: 1px solid var(--ince-kenar); box-shadow: var(--golge-1); }
.sekmeler a { min-height: 38px; padding: 0 16px; border: none; color: var(--kahve-orta); font-size: 14px; transition: background .15s, color .15s; }
.sekmeler a:hover { color: var(--kahve); }
.sekmeler a[aria-current="page"] { box-shadow: var(--golge-1); }
/* Telefonda söz kartı kompakt: etiket + ses çubukları + oy düğmesi tek satıra sığsın (önce oy düğmesi alt satıra düşüyor,
   kartlar 136-229px oluyordu; 24 kart ~4.600px kaydırmaydı). */
@media (max-width: 640px) {
  .izgara > .kart { padding: 18px 16px; gap: 14px; border-radius: 22px; }
  .kart-alt { gap: 8px; flex-wrap: nowrap; }
  .kart-alt .etiket { padding: 6px 10px; font-size: 12px; white-space: nowrap; }
  .kart-alt .ses-olcer { margin: 0 0 0 auto; }
  /* "Söz ne kadar kalın yazılmışsa…" notu telefonda gizli (kullanıcı kararı 2026-10-10): ilk söz kartı ilk ekrana girsin. Masaüstünde duruyor. */
  .liste-not.ses-not { display: none; }
  .kart-alt .oy { min-height: 40px; padding: 0 12px; font-size: 13.5px; white-space: nowrap; gap: 6px; }
}
/* Telefon: modern katmanın 16px dolgusu 560px kuralını eziyordu, "Rastgele" kesiliyordu (2026-10-10). Bu blok katmandan SONRA kalmalı. */
@media (max-width: 560px) {
  .sekmeler { width: 100%; }
  .sekmeler a { flex: 1 1 auto; justify-content: center; padding: 0 6px; font-size: 13.5px; white-space: nowrap; }
}

/* Çağrı bandı */
.cagri { position: relative; overflow: hidden; border-radius: 32px; background: radial-gradient(90% 140% at 100% 0%, rgba(242, 201, 168, .4), transparent 55%), radial-gradient(70% 120% at 0% 100%, rgba(59, 42, 32, .35), transparent 60%), var(--kiremit); box-shadow: 0 30px 60px -30px rgba(184, 71, 47, .8); }
.cagri::after { content: "\201D"; position: absolute; right: 5%; top: 10px; font-family: var(--serif); font-style: italic; font-weight: 800; font-size: 200px; line-height: 1; color: var(--vurgu-yazi); opacity: .14; pointer-events: none; }
.cagri > * { position: relative; z-index: 1; }

/* Diğer sayfalardaki kutular: aynı yüzey dili (ince kenar + yumuşak gölge) */
.paylasim-karti-buyuk { border-radius: 32px; box-shadow: 0 34px 70px -30px rgba(59, 42, 32, .55); }
.sayac-kutusu, .sonraki-soz, .soz-duvar, .konu-kart, .konu-sozluk div, .konu-sss, .cevirmen-kutu, .cevirmen-sozluk a, .duello-kart, .duello-sira li,
.takip-durum, .harita-ozet > div, .harita-kart, .galeri-gorsel, .sor-sohbet, .babadle-sonuc, .studyo-panel, .ekle-form, .bg-kart, .test-kart, .kaydir-kart {
  border-color: var(--ince-kenar); box-shadow: var(--golge-1);
}
.konu-kart, .cevirmen-sozluk a, .duello-sira li, .harita-kart { transition: transform .2s, box-shadow .2s; }
.konu-kart:hover, .cevirmen-sozluk a:hover, .harita-kart:hover { transform: translateY(-2px); box-shadow: var(--golge-2); }
.duvar-ust h1, .konu-ust h1, .yil-adim h1, .babadle-ust h1 { letter-spacing: -.02em; }

/* Tanıtım metni */
.tanitim { padding: 28px clamp(22px, 3vw, 36px); border-radius: 26px; background: var(--kagit); border: 1px solid var(--ince-kenar); box-shadow: var(--golge-1); max-width: 860px; }

/* Alt bilgi */
.alt { display: block; margin-top: 88px; padding: 46px var(--kenar) 26px; background: var(--koyu-zemin); border-top: none; border-radius: 36px 36px 0 0; }
.alt-ust { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px; }
.alt-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--koyu-yazi); text-decoration: none; }
.alt-logo span { font-family: var(--serif); font-weight: 800; font-size: 26px; }
.alt-logo:hover { color: var(--seftali); }
/* Alt bilgi bağlantıları parmakla kolay basılsın (önce 21px'ti): 44px alan, görünüm aynı */
.alt .alt-kucuk { display: flex; flex-wrap: wrap; gap: 0 18px; }
.alt .alt-kucuk a, .alt .alt-baglanti { display: inline-flex; align-items: center; min-height: 44px; }
.alt-logo { min-height: 44px; }
.alt-slogan { flex: 1; font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--koyu-soluk); }
.alt-cizgi { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(243, 234, 220, .1); font-size: 13.5px; color: var(--koyu-soluk); }
.alt-telif { opacity: .8; }
.alt .alt-bildirim { margin: 0; color: var(--koyu-yazi); }
@media (max-width: 640px) {
  .alt { text-align: left; border-radius: 28px 28px 0 0; }
  .alt-slogan { flex-basis: 100%; }
}

/* =====================================================================
   YÖNETİM PANELİ TASARIMI (yan menü + içerik). Eski üst menü kurallarının yerine geçer.
   Yan menü her iki modda da koyu zemin üzerindedir; üstündeki saydam beyazlar bu yüzden sabittir.
   ===================================================================== */
body.yonetim { background: var(--krem); }
.yonetim-govde { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }
.yonetim-ust-cubuk { display: none; }

/* Yan menü */
.yonetim-yan { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 22px 14px 18px; background: var(--koyu-zemin); color: var(--koyu-yazi); border-right: 1px solid var(--koyu-kenar); }
.yonetim-yan-logo { display: flex; align-items: center; gap: 10px; padding: 0 10px 14px; text-decoration: none; color: var(--koyu-yazi); }
.yonetim-yan-logo span { font-size: 22px; color: var(--koyu-yazi); }
.yonetim-yan-logo small { margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--seftali); }
.yonetim-yan nav { display: flex; flex-direction: column; gap: 2px; }
.yan-grup { margin: 16px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--koyu-soluk); opacity: .65; }
.yan-oge { display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 0 10px; border-radius: 10px; color: var(--koyu-yazi); text-decoration: none; font-size: 14.5px; font-weight: 600; transition: background .15s; }
.yan-oge:hover { background: rgba(255, 255, 255, .07); color: var(--koyu-yazi); }
.yan-oge.aktif { background: var(--kiremit); color: var(--vurgu-yazi); }
.yan-oge:focus-visible { outline: 2px solid var(--seftali); outline-offset: 2px; }
.yan-ikon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.yan-rozet { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--seftali); color: #3B2A20; font-size: 11.5px; font-weight: 700; text-align: center; }
.yan-oge.aktif .yan-rozet { background: var(--vurgu-yazi); color: var(--kiremit); }
.yan-oge.uyari .yan-rozet { background: #E2614A; color: #fff; }
.yan-alt { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; flex-direction: column; gap: 8px; }
.yan-kullanici { display: flex; align-items: center; gap: 10px; padding: 4px 10px; }
.yan-avatar { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--seftali); color: #3B2A20; font-weight: 700; font-size: 14px; }
.yan-kullanici-ad { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yan-kullanici .tema-dugme { margin-left: auto; width: 36px; height: 36px; background: transparent; border-color: rgba(255, 255, 255, .22); color: var(--koyu-yazi); }
.yan-alt form { margin: 0; padding: 0 10px; }
.yan-cikis { width: 100%; min-height: 40px; background: transparent; border-color: rgba(255, 255, 255, .22); color: var(--koyu-yazi); font-size: 14px; }
.yan-cikis:hover { border-color: var(--seftali); color: var(--seftali); }

/* İçerik alanı */
.yonetim-icerik { width: 100%; max-width: 1180px; margin: 0; padding: 30px clamp(18px, 3.2vw, 44px) 64px; display: flex; flex-direction: column; gap: 22px; }
.yonetim h1 { font-size: clamp(26px, 3vw, 34px); line-height: 1.15; }
.yonetim h2 { font-size: 21px; margin-top: 0; }
.yonetim .yonetim-bolum, .yonetim .analiz-bolum, .panel-kutu { margin-top: 0; padding: 20px 22px; background: var(--kagit); border: 1px solid var(--cizgi); border-radius: 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.yonetim .yonetim-bolum > h2:first-child, .panel-kutu > h2:first-child { margin: 0; }
.panel-kutu-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-kutu-ust a { font-size: 14px; font-weight: 600; color: var(--kiremit); text-decoration: none; }
.panel-kutu-ust a:hover { text-decoration: underline; }
.yonetim .bildirim { margin: 0; }

.yonetim .yonetim-bolum h3 { font-family: var(--sans); font-weight: 700; font-size: 15px; margin: 6px 0 0; color: var(--kahve-orta); text-transform: none; }
.ayar-icindekiler { position: sticky; top: 0; z-index: 4; display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 0; background: var(--krem); }
.ayar-icindekiler a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--cizgi-koyu); background: var(--kagit); text-decoration: none; font-size: 14px; font-weight: 600; color: var(--kahve-orta); }
.ayar-icindekiler a:hover { border-color: var(--kiremit); color: var(--kiremit); }
.yonetim [id] { scroll-margin-top: 70px; }
@media (max-width: 980px) { .ayar-icindekiler { top: 60px; } .yonetim [id] { scroll-margin-top: 130px; } }

/* Genel bakış */
.genel-ust { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.genel-ust .yonetim-bilgi { margin-bottom: 4px; }
.genel-ozet { display: flex; gap: 10px; flex-wrap: wrap; }
.genel-ozet span { padding: 8px 14px; border-radius: 999px; background: var(--etiket-zemin); font-size: 14px; color: var(--kahve-orta); }
.genel-ozet strong { color: var(--kahve); }
.her-sey-yolunda { padding: 14px 16px; border-radius: 12px; background: var(--basari-zemin); color: var(--basari-yazi); font-weight: 600; }
.yapilacaklar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.yapilacak { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px 14px 18px; border-radius: 14px; background: var(--krem); border: 1px solid var(--cizgi); border-left-width: 4px; }
.yapilacak > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.yapilacak strong { font-size: 16px; }
.yapilacak span { font-size: 14px; color: var(--kahve-orta); }
.yapilacak .dugme { flex: none; min-height: 40px; padding: 0 16px; font-size: 14px; }
.yapilacak-acil { border-left-color: var(--kiremit); }
.yapilacak-uyari { border-left-color: var(--seftali); }
.yapilacak-bilgi { border-left-color: var(--cizgi-koyu); }
.bugun-kartlar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.bugun-kart { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--krem); border: 1px solid var(--cizgi); }
.bugun-kart strong { font-family: var(--serif); font-weight: 800; font-size: 30px; line-height: 1.1; }
.genel-grafik { display: flex; flex-direction: column; gap: 6px; }
.kucuk-grafik { width: 100%; height: 70px; }
.genel-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.genel-gunun { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 22px; line-height: 1.3; }
.genel-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.genel-liste li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--cizgi); font-size: 14px; }
.genel-liste li:first-child { border-top: none; }
.genel-liste a { color: var(--kahve); text-decoration: none; font-family: var(--serif); font-style: italic; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.genel-liste a:hover { color: var(--kiremit); }
.genel-durum { flex: none; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--etiket-zemin); color: var(--kahve-orta); }
.genel-durum.durum-beklemede { background: var(--seftali); color: #3B2A20; }
.genel-durum.durum-reddedildi { opacity: .7; }
.kisayollar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kisayollar .dugme { min-height: 44px; font-size: 14px; }

/* Giriş ekranı (menüsüz) */
body.yonetim-giris-sayfasi { min-height: 100vh; display: flex; flex-direction: column; }
.giris-ust { display: flex; align-items: center; justify-content: space-between; padding: 18px var(--kenar); }
.yonetim-giris-icerik { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 18px 60px; }
.yonetim-giris-icerik .giris { width: 100%; max-width: 420px; margin: 0; padding: 30px 28px; background: var(--kagit); border: 1px solid var(--cizgi); border-radius: 22px; }

/* Telefon ve tablet: yan menü soldan açılan çekmece olur (JS varsa; yoksa üstte açık durur) */
@media (max-width: 980px) {
  .yonetim-govde { grid-template-columns: minmax(0, 1fr); }
  .yonetim-ust-cubuk { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 20; padding: 10px 16px; background: var(--koyu-zemin); color: var(--koyu-yazi); }
  .yonetim-ust-cubuk .logo span { color: var(--koyu-yazi); font-size: 20px; }
  .yonetim-menu-dugme { min-height: 40px; padding: 0 14px; background: transparent; color: var(--koyu-yazi); border-color: rgba(255, 255, 255, .25); font-size: 14px; gap: 6px; }
  .yonetim-yan { position: static; height: auto; }
  .yonetim-yan-logo { display: none; }
  :root[data-tema] .yonetim-yan { position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; width: min(290px, 86vw); height: 100vh; transform: translateX(-102%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(0, 0, 0, .35); }
  :root[data-tema] body.menu-acik .yonetim-yan { transform: none; }
  body.menu-acik::after { content: ""; position: fixed; inset: 0; z-index: 30; background: rgba(20, 12, 8, .45); }
  .yonetim-icerik { padding: 20px 16px 48px; }
  .bugun-kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .genel-izgara { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .yapilacak { flex-direction: column; align-items: stretch; }
  .yapilacak .dugme { width: 100%; }
  .kisayollar { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { :root[data-tema] .yonetim-yan { transition: none; } }