/* Yazı tipleri: kendi sunucumuzdan (SIL Open Font License). Latin ve Türkçe karakterler için latin-ext ayrı dosyada;
   tarayıcı yalnızca sayfada geçen karakterlerin dosyasını indirir. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("/assets/fonts/fraunces-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 700; font-display: swap; src: url("/assets/fonts/fraunces-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: italic; font-weight: 500 700; font-display: swap; src: url("/assets/fonts/fraunces-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: 500 700; font-display: swap; src: url("/assets/fonts/fraunces-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: "Montserrat"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/assets/fonts/montserrat-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: "Montserrat"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/assets/fonts/montserrat-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; }

/* Sarı Kedi — ortak stiller */
:root {
  --sari: #f5b700;
  --sari-acik: #ffe7a3;
  --turuncu: #e07b12;
  --kahve: #2b2118;
  --metin: #3a2e22;
  --soluk: #76664f;
  --krem: #fff8ec;
  --kart: #ffffff;
  --cizgi: #f0e2c8;
  --yesil: #2f7d4f;
  --radius: 18px;
  --golge: 0 1px 2px rgba(43,33,24,.06), 0 8px 24px rgba(43,33,24,.06);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--krem); color: var(--metin);
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden;
}
main { flex: 1; }
img, svg { max-width: 100%; }
a { color: var(--turuncu); text-underline-offset: 3px; }
a:hover { color: var(--kahve); }
h1, h2, h3 { color: var(--kahve); line-height: 1.2; letter-spacing: -.02em; }
h1 { font-size: clamp(28px, 5vw, 46px); font-weight: 800; margin: 0 0 16px; }
h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 700; margin: 48px 0 14px; }
h3 { font-size: 18px; font-weight: 700; margin: 28px 0 8px; }
p { margin: 0 0 16px; }
.kap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.dar { max-width: 780px; }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Üst menü */
.ust { background: var(--kart); border-bottom: 1px solid var(--cizgi); position: sticky; top: 0; z-index: 10; }
.ust .kap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; text-decoration: none; color: var(--kahve); font-weight: 800; font-size: 21px; letter-spacing: -.02em; }
.logo svg { width: 40px; height: 40px; flex: none; }
.logo:hover { color: var(--kahve); }
.menu { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.menu a { display: block; padding: 8px 14px; border-radius: 999px; text-decoration: none; color: var(--metin); font-weight: 600; font-size: 15px; white-space: nowrap; }
.menu a:hover, .menu a[aria-current="page"] { background: var(--sari-acik); color: var(--kahve); }

/* İçerik yolu */
.yol { font-size: 14px; color: var(--soluk); margin: 24px 0 8px; }
.yol ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.yol li + li::before { content: "›"; margin-right: 6px; }
.yol a { color: var(--soluk); }

/* Kartlar */
.izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--radius); padding: 22px; box-shadow: var(--golge); display: flex; flex-direction: column; gap: 6px; position: relative; }
.kart h3 { margin: 6px 0 4px; }
.kart p { margin: 0; color: var(--soluk); font-size: 15.5px; }
.kart .ikon { width: 46px; height: 46px; border-radius: 14px; background: var(--sari-acik); display: grid; place-items: center; font-size: 24px; }
a.kart { text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
a.kart:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(43,33,24,.08), 0 14px 32px rgba(43,33,24,.1); }
a.kart .git { margin-top: auto; padding-top: 10px; color: var(--turuncu); font-weight: 800; font-size: 15px; }
.kart.yakinda { opacity: .75; box-shadow: none; }
.rozet { position: absolute; top: 18px; right: 18px; font-size: 12px; font-weight: 800; padding: 2px 10px; border-radius: 999px; background: var(--cizgi); color: var(--soluk); }

/* Hesaplama aracı */
.arac { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 24px; box-shadow: var(--golge); padding: 28px; margin: 24px 0 8px; }
.alanlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.alan label, .alan .etiket { display: block; font-weight: 800; color: var(--kahve); font-size: 15px; margin-bottom: 6px; }
.alan small { display: block; color: var(--soluk); font-size: 13.5px; margin-top: 5px; line-height: 1.45; }
input[type="number"], input[type="date"], select {
  width: 100%; font: inherit; font-size: 17px; color: var(--kahve); background: var(--krem);
  border: 2px solid var(--cizgi); border-radius: 12px; padding: 10px 12px; min-height: 48px;
}
input:focus, select:focus { outline: none; border-color: var(--sari); box-shadow: 0 0 0 4px rgba(245,183,0,.2); }
.secim { display: flex; flex-wrap: wrap; gap: 8px; }
.secim input { position: absolute; opacity: 0; pointer-events: none; }
.secim label { margin: 0; cursor: pointer; padding: 9px 16px; border-radius: 999px; border: 2px solid var(--cizgi); background: var(--krem); font-weight: 700; font-size: 15px; color: var(--metin); }
.secim input:checked + label { background: var(--sari); border-color: var(--sari); color: var(--kahve); }
.secim input:focus-visible + label { box-shadow: 0 0 0 4px rgba(245,183,0,.35); }
.dugme { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 800; font-size: 17px; background: var(--kahve); color: #fff; border: 0; border-radius: 999px; padding: 13px 28px; cursor: pointer; margin-top: 22px; min-height: 48px; }
.dugme:hover { background: #000; }
.hata { color: #b3261e; font-weight: 700; margin: 14px 0 0; }

.sonuc { margin-top: 26px; border-top: 2px dashed var(--cizgi); padding-top: 24px; }
.sonuc[hidden] { display: none; }
.buyuk-sayi { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 6px; }
.buyuk-sayi strong { font-size: clamp(44px, 8vw, 64px); font-weight: 800; color: var(--kahve); line-height: 1; }
.buyuk-sayi span { font-size: 20px; font-weight: 800; color: var(--soluk); }
.ozet { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 18px 0; }
.ozet div { background: var(--krem); border-radius: 14px; padding: 14px 16px; }
.ozet dt { font-size: 13.5px; color: var(--soluk); font-weight: 700; }
.ozet dd { margin: 2px 0 0; font-size: 22px; font-weight: 800; color: var(--kahve); }
.ozet dd small { font-size: 14px; font-weight: 700; color: var(--soluk); }
.donem { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 18px 0 6px; }
.donem span { font-size: 12.5px; font-weight: 800; text-align: center; padding: 8px 2px; border-radius: 8px; background: var(--krem); color: var(--soluk); }
.donem span.aktif { background: var(--sari); color: var(--kahve); }
.ipucu { background: #fff4d6; border-left: 4px solid var(--sari); border-radius: 0 12px 12px 0; padding: 14px 18px; margin: 16px 0 0; }
.ipucu ul { margin: 6px 0 0; padding-left: 20px; }
.not { font-size: 14px; color: var(--soluk); margin-top: 18px; }

/* İsim bulucu */
.isim-kartlari { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.isim-kart { background: var(--krem); border-radius: 14px; padding: 14px 16px; }
.isim-kart strong { display: block; font-size: 24px; font-weight: 800; color: var(--kahve); line-height: 1.2; }
.isim-cins { display: inline-block; font-size: 12.5px; font-weight: 800; color: var(--soluk); background: var(--cizgi); border-radius: 999px; padding: 1px 9px; margin: 4px 0 6px; }
.isim-kart p { margin: 0; font-size: 14.5px; color: var(--soluk); line-height: 1.45; }
.icerik .isim-listesi { columns: 2; column-gap: 28px; padding-left: 20px; }
.icerik .isim-listesi li { break-inside: avoid; font-size: 15.5px; }

/* Gebelik takvimi */
.takvim { list-style: none; margin: 18px 0 0; padding: 0; border-left: 3px solid var(--cizgi); }
.takvim li { position: relative; padding: 0 0 16px 20px; margin: 0; }
.takvim li::before { content: ""; position: absolute; left: -9px; top: 6px; width: 15px; height: 15px; border-radius: 50%; background: var(--kart); border: 3px solid var(--cizgi); }
.takvim li.gecti::before { background: var(--sari); border-color: var(--sari); }
.takvim li.simdi::before { background: var(--turuncu); border-color: var(--turuncu); box-shadow: 0 0 0 4px rgba(224,123,18,.2); }
.takvim li.simdi { font-weight: 700; }
.takvim .hafta { display: block; font-size: 13.5px; font-weight: 800; color: var(--soluk); }
.takvim .hafta em { font-style: normal; color: var(--turuncu); }
.takvim strong { color: var(--kahve); }

/* Ortak ek bileşenler */
.dugme.ikincil { background: var(--sari); color: var(--kahve); }
.dugme.ikincil:hover { background: var(--turuncu); color: #fff; }
.metin-dugme { font: inherit; font-size: 14px; font-weight: 700; color: var(--turuncu); background: none; border: 0; padding: 0; margin-top: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.secim.dikey { flex-direction: column; align-items: stretch; }
.secim.dikey label { border-radius: 12px; }
.soru { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.soru legend { font-weight: 700; color: var(--kahve); font-size: 15.5px; margin-bottom: 10px; padding: 0; }
.soru small { display: block; color: var(--soluk); font-size: 13.5px; margin-top: 8px; line-height: 1.45; }
.fiyatlar { margin-top: 22px; background: var(--krem); border-color: var(--cizgi); }
.fiyatlar summary { font-size: 15px; }
.olcek { grid-template-columns: repeat(9, 1fr); }
.olcek-etiket { display: grid; grid-template-columns: 3fr 2fr 2fr 2fr; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--soluk); text-align: center; }
.kalemler { list-style: none; margin: 8px 0 0; padding: 0; }
.kalemler li { margin-bottom: 14px; }
.kalem-ust { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 600; }
.kalem-ust strong { color: var(--kahve); white-space: nowrap; }
.cubuk { height: 10px; background: var(--krem); border-radius: 999px; margin: 6px 0 4px; overflow: hidden; }
.cubuk span { display: block; height: 100%; background: var(--sari); border-radius: 999px; }
.kalemler small { color: var(--soluk); font-size: 13px; }
.tablo-kap td:last-child { white-space: normal; min-width: 200px; }

/* Makale içeriği */
.icerik { padding-bottom: 32px; }
.icerik ul, .icerik ol { padding-left: 22px; margin: 0 0 16px; }
.icerik li { margin-bottom: 6px; }
.tablo-kap { overflow-x: auto; margin: 0 0 20px; border: 1px solid var(--cizgi); border-radius: 14px; background: var(--kart); }
table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--cizgi); white-space: nowrap; }
th { background: var(--sari-acik); color: var(--kahve); font-weight: 800; }
tr:last-child td { border-bottom: 0; }
details { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; padding: 0 18px; margin-bottom: 10px; }
summary { cursor: pointer; font-weight: 800; color: var(--kahve); padding: 16px 0; list-style-position: outside; }
details[open] summary { border-bottom: 1px solid var(--cizgi); margin-bottom: 12px; }
details p:last-child { margin-bottom: 16px; }
.uyari { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; padding: 14px 18px; font-size: 15px; color: var(--soluk); }

/* Bölüm */
.bolum { padding: 32px 0; }
.bolum-baslik { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.bolum-baslik h2 { margin: 0; }
.bolum-baslik a { white-space: nowrap; font-weight: 600; font-size: 15px; }

/* Alt bilgi */
.alt { background: var(--kahve); color: rgba(255,255,255,.75); margin-top: 48px; padding: 40px 0 28px; font-size: 15px; }
.alt .kap { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 28px; }
.alt h4 { color: #fff; margin: 0 0 10px; font-size: 15px; }
.alt ul { list-style: none; margin: 0; padding: 0; }
.alt li { margin-bottom: 6px; }
.alt a { color: rgba(255,255,255,.85); text-decoration: none; }
.alt a:hover { color: var(--sari); }
.alt .logo { color: #fff; margin-bottom: 10px; }
.alt .telif { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.12); padding-top: 18px; font-size: 13.5px; }

@media (max-width: 760px) {
  body { font-size: 15.5px; }
  .kap { padding: 0 16px; }
  .ust .kap { min-height: 60px; }
  .logo { font-size: 18px; }
  .logo svg { width: 34px; height: 34px; }
  .arac { padding: 20px 16px; border-radius: 18px; }
  .donem span { font-size: 10.5px; }
  .icerik .isim-listesi { columns: 1; }
  .alt .kap { grid-template-columns: 1fr 1fr; }
  .alt .marka { grid-column: 1 / -1; }
}

/* Veteriner uyarısı (sağlık sayfalarının en altı) */
.veteriner-uyari { background: #fff1dc; border-top: 3px solid var(--turuncu); margin-top: 40px; padding: 26px 0; }
.veteriner-uyari .kap { display: flex; gap: 16px; align-items: flex-start; }
.veteriner-ikon { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--kart); display: grid; place-items: center; font-size: 24px; box-shadow: var(--golge); }
.veteriner-uyari strong { display: block; color: var(--kahve); font-size: 17px; font-weight: 800; margin-bottom: 4px; }
.veteriner-uyari p { margin: 0; font-size: 15px; color: var(--metin); }
main:has(> .veteriner-uyari:last-child) + .alt { margin-top: 0; }

/* Blog */
.yazi-kategori { display: inline-block; align-self: flex-start; font-size: 12.5px; font-weight: 700; color: var(--turuncu); background: #fff1dc; border-radius: 999px; padding: 2px 10px; }
.makale .yazi-kategori { margin-top: 8px; }
.makale h1 { margin-top: 10px; font-size: clamp(28px, 4.4vw, 42px); }
.yazi-meta { font-size: 14px; color: var(--soluk); margin: 0 0 16px; }
.yazi-karti .yazi-meta { margin: auto 0 0; padding-top: 10px; font-size: 13px; }
.giris { font-size: 18px; line-height: 1.7; color: var(--metin); }
.kontrol-notu { font-size: 14.5px; background: #eef8f1; border-radius: 12px; padding: 10px 14px; }
.icindekiler { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 16px; padding: 18px 22px; margin: 24px 0 8px; }
.icindekiler strong { color: var(--kahve); font-size: 15px; }
.icindekiler ol { margin: 8px 0 0; padding-left: 20px; }
.icindekiler li { margin-bottom: 4px; font-size: 15px; }
.icindekiler a { color: var(--metin); text-decoration: none; }
.icindekiler a:hover { color: var(--turuncu); text-decoration: underline; }
.makale h2 { scroll-margin-top: 84px; }
.not-kutusu { background: #fff4d6; border-left: 4px solid var(--sari); border-radius: 0 12px 12px 0; padding: 14px 18px; margin: 0 0 18px; font-size: 16px; }
.arac-kutusu { display: flex; align-items: center; gap: 14px; background: var(--kart); border: 2px solid var(--sari); border-radius: 16px; padding: 14px 18px; margin: 4px 0 20px; text-decoration: none; color: var(--metin); transition: transform .15s, box-shadow .15s; }
.arac-kutusu:hover { color: var(--metin); transform: translateY(-2px); box-shadow: var(--golge); }
.arac-kutusu .ikon { width: 46px; height: 46px; flex: none; border-radius: 14px; background: var(--sari-acik); display: grid; place-items: center; font-size: 22px; }
.arac-kutusu strong { display: block; color: var(--kahve); font-size: 16px; }
.arac-kutusu small { display: block; color: var(--soluk); font-size: 14px; line-height: 1.45; }
.arac-kutusu .git { margin-left: auto; font-size: 22px; font-weight: 800; color: var(--turuncu); }
.yazi-karti h2, .yazi-karti h3 { font-size: 18px; margin: 4px 0; }
.son-yazilar { padding-top: 0; }
.yazi-karti p { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.makale th, .makale td { white-space: normal; vertical-align: top; } .makale .tablo-kap td:last-child { min-width: 0; } .makale td:first-child { font-weight: 600; color: var(--kahve); }

/* Rehberler */
.alt .kap { grid-template-columns: 2fr 1fr 1fr 1fr; }
@media (max-width: 760px) { .alt .kap { grid-template-columns: 1fr 1fr; } }
.rehber .geri { margin-top: 28px; font-weight: 600; }
.arac-baslik { margin: 0 0 6px; font-size: 22px; }
.not-kutusu.acil { background: #fde7e6; border-left-color: #b3261e; }
.rehber-izgara .kart h2 { font-size: 19px; margin: 6px 0 4px; }

/* Karar renkleri */
.guvenli { --k: #2f7d4f; --kz: #e7f5ec; }
.dikkat { --k: #946200; --kz: #fff4d6; }
.onerilmez { --k: #b4530f; --kz: #ffeadb; }
.zehirli { --k: #b3261e; --kz: #fde7e6; }
.bilinmiyor { --k: #76664f; --kz: #f3ece0; }
.karar-kutusu { display: flex; gap: 16px; align-items: flex-start; background: var(--kz); border: 2px solid var(--k); border-radius: 18px; padding: 18px 20px; margin: 8px 0 24px; }
.karar-isaret { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--k); color: #fff; display: grid; place-items: center; font-size: 24px; font-weight: 800; }
.karar-etiket { display: block; color: var(--k); font-size: 22px; font-weight: 800; line-height: 1.25; margin-bottom: 4px; }
.karar-kutusu p { margin: 0; }
.karar-link { display: inline-block; margin-top: 8px; font-weight: 700; color: var(--k); }
.karar-aciklama { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin: 20px 0; font-size: 14px; }
.karar-aciklama div { background: var(--kz); border-radius: 12px; padding: 10px 12px; line-height: 1.45; }
.karar-aciklama strong { display: block; color: var(--k); }

.yiyecek-cipleri { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.yiyecek-cip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 8px; border-radius: 999px; background: var(--kz); color: var(--kahve); text-decoration: none; font-weight: 600; font-size: 15px; border: 1px solid transparent; transition: border-color .15s; }
.yiyecek-cip:hover { border-color: var(--k); color: var(--kahve); }
.yiyecek-cip .isaret, .filtre-cip .isaret { width: 22px; height: 22px; border-radius: 50%; background: var(--k); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 800; flex: none; }
.yiyecek-cip[hidden], .yiyecek-cipleri[hidden] { display: none; }
.diger-sonuclar { font-size: 14px; color: var(--soluk); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -12px 0 0; }
.diger-sonuclar .yiyecek-cip { font-size: 13.5px; padding: 4px 10px 4px 5px; }

.filtreler { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 18px; }
.filtre-cip { font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 2px solid var(--cizgi); background: var(--kart); color: var(--metin); min-height: 40px; }
.filtre-cip[aria-pressed="true"] { background: var(--sari); border-color: var(--sari); color: var(--kahve); }
.filtre-cip.guvenli[aria-pressed="true"], .filtre-cip.dikkat[aria-pressed="true"], .filtre-cip.onerilmez[aria-pressed="true"], .filtre-cip.zehirli[aria-pressed="true"] { background: var(--kz); border-color: var(--k); }

.yiyecek-arac .arama-satir { display: flex; gap: 10px; margin-top: 10px; }
.yiyecek-arac .arama-satir input { flex: 1; min-width: 0; }
.yiyecek-arac .arama-satir .dugme { margin-top: 0; }
input[type="search"], input[type="text"], input[type="tel"] { width: 100%; font: inherit; font-size: 17px; color: var(--kahve); background: var(--krem); border: 2px solid var(--cizgi); border-radius: 12px; padding: 10px 12px; min-height: 48px; }
.yiyecek-sonuc:not(:empty) { margin-top: 18px; }
.yiyecek-sonuc .karar-kutusu { margin-bottom: 18px; }
.yiyecek-arac.kompakt { margin: 32px 0 8px; padding: 20px; }
.yiyecek-arac.kompakt .etiket { font-weight: 800; color: var(--kahve); }

/* Irklar */
.irk-izgara { margin-top: 8px; }
.irk-karti { transition: opacity .2s, transform .15s, box-shadow .15s; }
.irk-karti h2, .irk-karti h3 { font-size: 19px; margin: 0; }
.irk-diger { font-size: 13px; color: var(--soluk); font-weight: 600; margin-top: -4px; }
.irk-karti p { margin-top: 4px; }
.irk-karti .yazi-meta { margin: auto 0 0; padding-top: 10px; font-size: 13px; }
.irk-karti .uyum:empty { display: none; }
.irk-karti .uyum { align-self: flex-start; font-size: 12px; font-weight: 800; padding: 2px 10px; border-radius: 999px; background: var(--cizgi); color: var(--soluk); }
.irk-karti.tam-uyum { border-color: var(--sari); box-shadow: 0 0 0 2px var(--sari), var(--golge); }
.irk-karti.tam-uyum .uyum { background: var(--sari); color: var(--kahve); }
.irk-karti.uyumsuz { opacity: .45; }
.irk-sonuc-yazi { font-size: 14.5px; color: var(--soluk); margin: 0; }
.irk-bilgi { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 20px 0 14px; }
.irk-bilgi div { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; padding: 12px 14px; }
.irk-bilgi dt { font-size: 13px; color: var(--soluk); font-weight: 600; }
.irk-bilgi dd { margin: 2px 0 0; font-weight: 700; color: var(--kahve); font-size: 15px; line-height: 1.4; }
.irk-puanlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 24px; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 16px; padding: 16px 20px; margin: 0; }
.irk-puanlar div { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.irk-puanlar dt { font-size: 14.5px; font-weight: 600; }
.irk-puanlar dd { margin: 0; }
.puan { display: inline-flex; gap: 4px; vertical-align: middle; }
.puan i { width: 11px; height: 11px; border-radius: 50%; background: var(--cizgi); }
.puan i.dolu { background: var(--sari); }
.karsilastirma td, .karsilastirma th { white-space: nowrap; }
.karsilastirma td:first-child { font-weight: 700; }
.icerik.rehber .tablo-kap td:last-child { min-width: 0; }

/* İsim kategorileri */
.kat-izgara { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.kat-karti { padding: 16px; flex-direction: row; align-items: center; gap: 12px; }
.kat-karti .ikon { width: 40px; height: 40px; font-size: 20px; flex: none; }
.kat-karti h2, .kat-karti h3 { font-size: 15.5px; margin: 0; }
.kat-karti p { font-size: 13px; margin: 0; }
.kat-karti div { min-width: 0; }

/* Sakinleştirici sesler */
.ses-kartlari { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ses-karti { border: 2px solid var(--cizgi); border-radius: 16px; padding: 12px 14px 14px; background: var(--krem); transition: border-color .2s, background .2s; }
.ses-karti.acik { border-color: var(--sari); background: #fff8e1; }
.ses-ac { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer; color: var(--metin); }
.ses-ac strong { display: block; color: var(--kahve); font-size: 16px; }
.ses-ac small { display: block; color: var(--soluk); font-size: 13px; line-height: 1.4; }
.ses-ikon { width: 46px; height: 46px; flex: none; border-radius: 14px; background: var(--kart); display: grid; place-items: center; font-size: 22px; box-shadow: var(--golge); }
.ses-karti.acik .ses-ikon { background: var(--sari); }
.ses-karti:not(.acik) input[type="range"] { opacity: .45; }
input[type="range"] { width: 100%; accent-color: var(--turuncu); margin-top: 12px; }
.ses-kontrol { display: grid; grid-template-columns: auto 1fr 1fr; gap: 18px; align-items: end; margin-top: 22px; }
.ses-kontrol .dugme { margin-top: 0; min-width: 140px; }
.ses-kontrol input[type="range"] { margin-top: 14px; }
.ses-durum { margin: 16px 0 0; font-size: 14.5px; font-weight: 600; color: var(--soluk); }
.ses-araci.caliyor .ses-karti.acik .ses-ikon { animation: ses-nabiz 1.6s ease-in-out infinite; }
.ses-araci.caliyor .ses-baslat { background: var(--turuncu); }
@keyframes ses-nabiz { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@media (max-width: 760px) { .ses-kontrol { grid-template-columns: 1fr; } .ses-kontrol .dugme { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .ses-araci.caliyor .ses-karti.acik .ses-ikon { animation: none; } }

/* "Tümünü gör" düğmeleri */
.bolum-baslik .tumu-dugme { display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex: none; background: var(--sari); color: var(--kahve); font-weight: 800; font-size: 15px; padding: 9px 14px 9px 20px; border-radius: 999px; text-decoration: none; box-shadow: 0 3px 0 #d9a300; transition: background .2s, color .2s, transform .15s, box-shadow .15s; white-space: nowrap; }
.tumu-dugme .sayi { min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; background: var(--kahve); color: #fff; font-size: 12.5px; font-weight: 800; display: grid; place-items: center; transition: background .2s, color .2s; }
.tumu-dugme .tumu-ok { font-size: 18px; line-height: 1; transition: transform .2s; }
.bolum-baslik .tumu-dugme:hover, .bolum-baslik .tumu-dugme:focus-visible { background: var(--kahve); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 0 #000; }
.tumu-dugme:hover .sayi, .tumu-dugme:focus-visible .sayi { background: var(--sari); color: var(--kahve); }
.tumu-dugme:hover .tumu-ok, .tumu-dugme:focus-visible .tumu-ok { transform: translateX(4px); }
.bolum-baslik .tumu-dugme:active { transform: translateY(2px); box-shadow: 0 1px 0 #000; }
@media (max-width: 760px) {
  /* Telefonda düğme kartların altına, tam genişlikte taşınır */
  .bolum > .kap { display: flex; flex-direction: column; }
  .bolum > .kap > .bolum-baslik { display: contents; }
  .bolum > .kap > .bolum-baslik h2 { margin-bottom: 16px; }
  .bolum-baslik .tumu-dugme { order: 3; margin-top: 18px; width: 100%; padding: 14px 18px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .tumu-dugme, .tumu-dugme .tumu-ok { transition: none; } }

/* Araçlar sayfası: hesap yapan kedi */
.hesap-kahraman { background: radial-gradient(900px 420px at 85% 30%, #ffe7a3 0%, transparent 60%), linear-gradient(180deg, #fff3d6 0%, var(--krem) 100%); padding: 8px 0 40px; margin-bottom: 8px; overflow: hidden; }
.hesap-ic { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: center; }
.hesap-yazi .ust-yazi { display: inline-block; background: #fff; color: var(--kahve); font-weight: 700; font-size: 14px; padding: 5px 14px; border-radius: 999px; margin: 12px 0 14px; box-shadow: 0 2px 10px rgba(43,33,24,.06); }
.hesap-yazi h1 { font-size: clamp(30px, 4.6vw, 50px); line-height: 1.1; margin-bottom: 14px; }
.hesap-yazi h1 em { font-style: normal; background: linear-gradient(transparent 62%, var(--sari) 62%); }
.hesap-giris { font-size: clamp(16px, 1.4vw, 18px); color: var(--soluk); max-width: 560px; }
.hizli-araclar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.hizli-arac { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: #fff; border: 1px solid var(--cizgi); color: var(--kahve); font-weight: 600; font-size: 14px; text-decoration: none; transition: background .15s, border-color .15s, transform .15s; }
.hizli-arac:hover { background: var(--sari-acik); border-color: var(--sari); color: var(--kahve); transform: translateY(-1px); }
.tum-araclar-baslik { margin-top: 24px; }

.hesap-sahne { position: relative; display: grid; justify-items: center; padding-top: 70px; }
.hesap-sahne::before { content: ""; position: absolute; top: 40px; width: min(430px, 95%); aspect-ratio: 1; background: #ffe7a3; border-radius: 46% 54% 58% 42% / 44% 46% 54% 56%; z-index: 0; }
.hesap-kedi { position: relative; z-index: 1; width: min(390px, 100%); background: none; border: 0; padding: 0; cursor: pointer; border-radius: 24px; }
.hesap-kedi:focus-visible { outline: 3px solid var(--kahve); outline-offset: 6px; }
.hesap-kedi svg { display: block; width: 100%; height: auto; overflow: visible; }
.hk-golge { fill: rgba(43,33,24,.12); }
.hk-ekran { font: 800 14px/1 ui-monospace, "SFMono-Regular", Consolas, monospace; fill: #1d3b1f; letter-spacing: .5px; }
.hk-bakis { transition: transform .2s ease-out; }
.hk-gozler { transform-box: fill-box; transform-origin: center; animation: kirp 5s infinite; }
.hk-bas { transform-box: fill-box; transform-origin: 50% 90%; transition: transform .3s; }
.hk-pati { transform-box: fill-box; transform-origin: 50% 100%; }
.hk-pati.sol { animation: pati-bas 2.4s ease-in-out infinite; }
.hk-pati.sag { animation: pati-bas 2.4s ease-in-out infinite 1.2s; }
@keyframes pati-bas { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-7px); } 90% { transform: translateY(1px); } }
.hesap-sahne.hesapliyor .hk-pati.sol { animation: pati-hizli .16s ease-in-out infinite; }
.hesap-sahne.hesapliyor .hk-pati.sag { animation: pati-hizli .16s ease-in-out infinite .08s; }
@keyframes pati-hizli { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.hesap-sahne.hesapliyor .hk-bas { transform: rotate(-3deg); }
.hesap-sahne.buldu .hk-bas { animation: kafa-onay .5s ease-in-out 2; }
@keyframes kafa-onay { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes kirp { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } 97% { transform: scaleY(1); } }

.hesap-dusunce { position: absolute; z-index: 2; top: 40px; left: calc(50% + 70px); font-size: 34px; opacity: 0; transform: translateY(10px) scale(.6); transition: opacity .2s, transform .3s cubic-bezier(.3,1.6,.5,1); pointer-events: none; }
.hesap-sahne.hesapliyor .hesap-dusunce { opacity: 1; transform: none; animation: dusun 1s ease-in-out infinite; }
@keyframes dusun { 0%, 100% { rotate: -8deg; } 50% { rotate: 8deg; } }

.hesap-balon { position: absolute; z-index: 3; top: 0; left: 50%; translate: -50% 0; width: min(330px, 96%); background: #fff; border-radius: 18px; padding: 12px 16px; box-shadow: 0 10px 30px rgba(43,33,24,.14); font-size: 14.5px; line-height: 1.45; text-align: center; opacity: 0; scale: .7; transform-origin: 50% 100%; pointer-events: none; transition: opacity .2s, scale .35s cubic-bezier(.3,1.6,.5,1); }
.hesap-balon::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 16px; height: 16px; margin-left: -8px; background: #fff; transform: rotate(45deg); border-radius: 3px; }
.hesap-balon.gorunur { opacity: 1; scale: 1; pointer-events: auto; }
.hesap-balon strong { color: var(--turuncu); }
.hesap-balon a { display: block; margin-top: 6px; font-weight: 800; }
.hesap-ipucu { position: relative; z-index: 1; margin: 14px 0 0; font-size: 13.5px; font-weight: 700; color: #8a6a1f; text-align: center; }

@media (max-width: 760px) {
  .hesap-ic { grid-template-columns: 1fr; gap: 8px; }
  .hesap-sahne { order: -1; padding-top: 64px; }
  .hesap-sahne::before { width: 250px; top: 50px; }
  .hesap-kedi { width: 240px; }
  .hesap-dusunce { left: calc(50% + 50px); top: 50px; font-size: 28px; }
  .hesap-yazi .yol { margin-top: 4px; }
  .hesap-kahraman { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hesap-kahraman *, .hesap-kahraman *::before, .hesap-kahraman *::after { animation: none !important; transition: none !important; }
}
.hesap-ipucu .ipucu-dokun { display: none; }
@media (hover: none) { .hesap-ipucu .ipucu-fare { display: none; } .hesap-ipucu .ipucu-dokun { display: inline; } }

/* Rehberler sayfası: kitap okuyan kedi (kütüphane köşesi) */
.kutuphane { background: radial-gradient(800px 400px at 18% 40%, #d6efdf 0%, transparent 62%), linear-gradient(180deg, #edf7f0 0%, var(--krem) 100%); padding: 8px 0 40px; margin-bottom: 8px; overflow: hidden; }
.kutuphane-ic { display: grid; grid-template-columns: 1fr 1.15fr; gap: 36px; align-items: center; }
.kutuphane-yazi .ust-yazi { display: inline-block; background: #fff; color: #2f7d4f; font-weight: 700; font-size: 14px; padding: 5px 14px; border-radius: 999px; margin: 12px 0 14px; box-shadow: 0 2px 10px rgba(43,33,24,.06); }
.kutuphane-yazi h1 { font-size: clamp(30px, 4.6vw, 50px); line-height: 1.1; margin-bottom: 14px; }
.kutuphane-yazi h1 em { font-style: normal; background: linear-gradient(transparent 62%, #a8dcb9 62%); }
.kutuphane-yazi .hizli-arac:hover { background: #d6efdf; border-color: #3fa36b; }

.kutuphane-sahne { position: relative; display: grid; justify-items: center; padding-top: 24px; }
.raf { position: absolute; top: 18px; left: 4%; right: 4%; display: grid; grid-template-columns: repeat(13, 1fr); grid-template-rows: 64px 64px; row-gap: 10px; column-gap: 3px; align-items: end; padding: 0 8px; opacity: .55;
  background: linear-gradient(to bottom, transparent 64px, #b97c47 64px 72px, transparent 72px 138px, #b97c47 138px 146px, transparent 146px); }
.raf i { display: block; height: var(--y); background: var(--r); border-radius: 3px 3px 0 0; box-shadow: inset -3px 0 0 rgba(0,0,0,.12); }
.okuyan-kedi { position: relative; z-index: 1; width: min(420px, 100%); margin-top: 70px; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 24px; }
.okuyan-kedi:focus-visible { outline: 3px solid var(--kahve); outline-offset: 6px; }
.okuyan-kedi svg { display: block; width: 100%; height: auto; overflow: visible; }

.ok-gozler { transform-box: fill-box; animation: tara 3.2s ease-in-out infinite; }
@keyframes tara { 0%, 100% { transform: translateX(-3px); } 45% { transform: translateX(3px); } 50% { transform: translate(-3px, 4px); } 55% { transform: translateX(-3px); } }
.ok-bakis { transition: transform .2s ease-out; }
.kitap { transition: transform .45s cubic-bezier(.3,1.4,.5,1); }
.ok-bas { transform-box: fill-box; transform-origin: 50% 90%; transition: transform .4s; }
.sayfa { transform-box: view-box; transform-origin: 146px 190px; }
.kuyruk-sarkik { transform-box: fill-box; transform-origin: 0% 0%; animation: sarkik 3s ease-in-out infinite; }
@keyframes sarkik { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(10deg); } }
.isik { opacity: 0; transition: opacity .4s; }
.abajur { transition: fill .4s; }

.kutuphane-sahne.sayfa-cevir .sayfa { animation: sayfa .9s ease-in-out; }
@keyframes sayfa { 0% { transform: scaleX(1); } 50% { transform: scaleX(.04); } 100% { transform: scaleX(-1); opacity: 0; } }
.kutuphane-sahne.bakiyor .kitap { transform: translateY(30px); }
.kutuphane-sahne.bakiyor .ok-gozler { animation: none; }
.kutuphane-sahne.bakiyor .ok-bas { transform: rotate(-4deg); }
.kutuphane-sahne.ariyor .sayfa { animation: sayfa .3s linear infinite; }
.kutuphane-sahne.ariyor .ok-gozler { animation-duration: .6s; }
.kutuphane-sahne.ariyor .isik { opacity: .5; animation: titre .25s steps(2) infinite; }
@keyframes titre { 50% { opacity: .15; } }
.kutuphane-sahne.buldu .isik { opacity: .75; }
.kutuphane-sahne.buldu .abajur { fill: #f5b700; }
.kutuphane-sahne.buldu .ok-bas { transform: rotate(-6deg) translateY(-4px); }

.not-kagidi { position: absolute; z-index: 3; top: 8px; left: 50%; width: min(250px, 80%); margin-left: -125px; background: #fff59d; color: var(--kahve); padding: 14px 16px 12px; font-size: 14.5px; line-height: 1.45; box-shadow: 0 10px 24px rgba(43,33,24,.18); border-radius: 2px 2px 14px 2px;
  opacity: 0; transform: translateY(70px) rotate(-14deg) scale(.7); pointer-events: none; transition: opacity .25s, transform .45s cubic-bezier(.3,1.5,.5,1); }
.not-kagidi::before { content: ""; position: absolute; top: -10px; left: 50%; width: 70px; height: 20px; margin-left: -35px; background: rgba(255,255,255,.55); transform: rotate(-3deg); }
.not-kagidi.gorunur { opacity: 1; transform: rotate(-4deg); pointer-events: auto; }
.not-baslik { display: block; font-weight: 800; color: #2f7d4f; margin-bottom: 2px; }
.not-kagidi a { display: block; margin-top: 8px; font-weight: 800; color: #2f7d4f; }
.kutuphane-ipucu { position: relative; z-index: 1; margin: 12px 0 0; font-size: 13.5px; font-weight: 700; color: #2f7d4f; text-align: center; }
.kutuphane-ipucu .ipucu-dokun { display: none; }
@media (hover: none) { .kutuphane-ipucu .ipucu-fare { display: none; } .kutuphane-ipucu .ipucu-dokun { display: inline; } }

@media (max-width: 760px) {
  .kutuphane-ic { grid-template-columns: 1fr; gap: 8px; }
  .okuyan-kedi { width: 280px; margin-top: 56px; }
  .raf { grid-template-rows: 48px 48px; row-gap: 8px; background: linear-gradient(to bottom, transparent 48px, #b97c47 48px 54px, transparent 54px 104px, #b97c47 104px 110px, transparent 110px); }
  .not-kagidi { width: 230px; margin-left: -115px; font-size: 13.5px; }
  .kutuphane { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .kutuphane *, .kutuphane *::before, .kutuphane *::after { animation: none !important; transition: none !important; }
}

/* Blog sayfası: daktilo başında yazar kedi (gece çalışma odası) */
.yazi-odasi { background: radial-gradient(820px 420px at 80% 30%, #e4d9f7 0%, transparent 62%), linear-gradient(180deg, #f3eefb 0%, var(--krem) 100%); padding: 8px 0 40px; margin-bottom: 8px; overflow: hidden; }
.yazi-odasi-ic { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; }
.yazi-odasi-yazi .ust-yazi { display: inline-block; background: #fff; color: #6b4fb3; font-weight: 700; font-size: 14px; padding: 5px 14px; border-radius: 999px; margin: 12px 0 14px; box-shadow: 0 2px 10px rgba(43,33,24,.06); }
.yazi-odasi-yazi h1 { font-size: clamp(30px, 4.6vw, 50px); line-height: 1.1; margin-bottom: 14px; }
.yazi-odasi-yazi h1 em { font-style: normal; background: linear-gradient(transparent 62%, #cdbcf0 62%); }
.blog-suzgec { margin-top: 6px; }
.blog-suzgec .filtre-cip { background: #fff; }
.blog-suzgec .filtre-cip[aria-pressed="true"] { background: #8c6bd1; border-color: #8c6bd1; color: #fff; }
.filtre-cip .sayi { font-size: 12px; font-weight: 800; background: rgba(43,33,24,.08); border-radius: 999px; padding: 1px 8px; }
.filtre-cip[aria-pressed="true"] .sayi { background: rgba(255,255,255,.25); }
.suzgec-sonuc { margin: -6px 0 14px; color: var(--soluk); font-size: 14.5px; }
.suzgec-sonuc:empty { display: none; }
.yazi-karti[hidden] { display: none; }

.yazi-odasi-sahne { position: relative; display: grid; justify-items: center; padding-top: 30px; }
.yazar-kedi { position: relative; z-index: 1; width: min(430px, 100%); background: none; border: 0; padding: 0; cursor: pointer; border-radius: 24px; }
.yazar-kedi:focus-visible { outline: 3px solid var(--kahve); outline-offset: 6px; }
.yazar-kedi svg { display: block; width: 100%; height: auto; overflow: visible; }

  display: flex; flex-direction: column; justify-content: flex-end; text-align: left; transform: translateX(var(--kayma)); transition: transform .12s, opacity .5s; }

/* Yazar kedinin kafası sabit; fare yaklaşınca yalnızca gözleri izler */
.yk-bakis { transition: transform .2s ease-out; }
.yk-gozler { transform-box: fill-box; transform-origin: center; animation: kirp 5s infinite; }
.yk-pati { transform-box: fill-box; transition: transform .06s; }
.yazar-kedi.tus-sol .yk-pati.sol, .yazar-kedi.tus-sag .yk-pati.sag { transform: translateY(5px); }
.yildiz { animation: yildiz 2.4s ease-in-out infinite; }
.yildiz.y2 { animation-delay: .8s; } .yildiz.y3 { animation-delay: 1.4s; } .yildiz.y4 { animation-delay: 2s; }
@keyframes yildiz { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
.bere { transform-box: fill-box; transform-origin: 50% 100%; }


.teslim-karti { position: absolute; z-index: 4; top: -6px; right: -4%; width: min(260px, 70%); background: #fffdf6; padding: 16px 18px 14px; border-radius: 4px; box-shadow: 0 14px 30px rgba(43,33,24,.18); font-size: 14px;
  background-image: repeating-linear-gradient(transparent 0 23px, #efe6d6 23px 24px); opacity: 0; transform: translateY(90px) rotate(8deg) scale(.6); pointer-events: none; transition: opacity .25s, transform .5s cubic-bezier(.3,1.4,.5,1); }
.teslim-karti.gorunur { opacity: 1; transform: rotate(3deg); pointer-events: auto; }
.kart-ust { display: block; font: 700 12px/1.4 ui-monospace, "Courier New", monospace; color: #6b4fb3; text-transform: uppercase; letter-spacing: .04em; }
.teslim-karti strong { display: block; font: 800 17px/1.3 ui-monospace, "Courier New", monospace; color: var(--kahve); margin: 6px 0 4px; }
.kart-meta { display: block; color: var(--soluk); font-size: 13px; }
.teslim-karti a { display: inline-block; margin-top: 8px; font-weight: 800; color: #6b4fb3; }
.yazi-odasi-ipucu { position: relative; z-index: 1; margin: 12px 0 0; font-size: 13.5px; font-weight: 700; color: #6b4fb3; text-align: center; }
.yazi-odasi-ipucu .ipucu-dokun { display: none; }
@media (hover: none) { .yazi-odasi-ipucu .ipucu-fare { display: none; } .yazi-odasi-ipucu .ipucu-dokun { display: inline; } }

@media (max-width: 760px) {
  .yazi-odasi-ic { grid-template-columns: 1fr; gap: 8px; }
  .yazi-odasi-sahne { order: -1; padding-top: 24px; }
  .yazar-kedi { width: 300px; }
  .teslim-karti { top: auto; bottom: 34px; right: auto; left: 50%; width: 270px; margin-left: -135px; padding: 12px 14px 10px; }
  .teslim-karti strong { font-size: 15px; }
  .yazi-odasi { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .yazi-odasi *, .yazi-odasi *::before, .yazi-odasi *::after { animation: none !important; transition: none !important; }
}

/* Yazar kedi: bilgisayar ekranı */
.ekran { position: absolute; z-index: 2; left: 63.6%; top: 35%; width: 34.4%; height: 28%; display: flex; flex-direction: column; overflow: hidden; background: #f7f3ff; border-radius: 3px; text-align: left; }
.ekran-cubuk { flex: none; font: 700 clamp(7.5px, .8vw, 9.5px)/1.6 ui-monospace, "Courier New", monospace; color: #5c4b8a; background: #e4d9f7; padding: 1px 6px; white-space: nowrap; overflow: hidden; }
.ekran-metin { flex: 1; padding: 4px 6px; overflow: hidden; }
.kagit-yazi { font: 700 clamp(8.5px, 1vw, 11.5px)/1.35 ui-monospace, "Courier New", monospace; color: #2b2118; word-break: break-word; }
.imlec { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: text-bottom; background: #6b4fb3; animation: imlec .9s steps(2) infinite; }
@keyframes imlec { 50% { opacity: 0; } }
.yayin { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; padding: 0 12%; background: rgba(247,243,255,.96); opacity: 0; transition: opacity .2s; }
.yayin-yazi { font: 800 clamp(9px, 1vw, 12px)/1.2 ui-monospace, "Courier New", monospace; color: #6b4fb3; text-align: center; }
.yayin-cubuk { display: block; height: 6px; border-radius: 999px; background: #e4d9f7; overflow: hidden; }
.yayin-cubuk i { display: block; height: 100%; width: 0; background: #8c6bd1; border-radius: 999px; }
.yazi-odasi-sahne.yayinlaniyor .yayin, .yazi-odasi-sahne.yayinlandi .yayin { opacity: 1; }
.yazi-odasi-sahne.yayinlaniyor .yayin-cubuk i { animation: yayin-dol .9s ease-in-out forwards; }
.yazi-odasi-sahne.yayinlandi .yayin-cubuk i { width: 100%; background: #3fa36b; }
.yazi-odasi-sahne.yayinlandi .yayin-yazi { color: #2f7d4f; }
@keyframes yayin-dol { to { width: 100%; } }
.bilgisayar-faresi { transform-box: fill-box; transform-origin: 50% 100%; }
.yazi-odasi-sahne.fare-tik .bilgisayar-faresi { animation: fare-tik .35s ease-out; }
@keyframes fare-tik { 40% { transform: scale(1.12, .82); } }
.yazi-odasi-sahne.fare-tik .yk-pati.sag { animation: fare-pati .35s ease-out; }
@keyframes fare-pati { 40% { transform: translate(10px, 3px); } }
.ding { position: absolute; z-index: 3; right: 6%; top: 24%; font-weight: 800; font-size: 14px; color: #2f7d4f; background: #fff; padding: 3px 10px; border-radius: 999px; box-shadow: 0 4px 12px rgba(43,33,24,.12); opacity: 0; pointer-events: none; }
.yazi-odasi-sahne.ding-var .ding { animation: ding 1.6s ease-out; }
@keyframes ding { 0% { opacity: 0; transform: translateY(8px); } 15%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px); } }
/* Yazar kedi: "Yayınlandı ✓" olunca sırıtır */
.gozler-mutlu, .agiz-sirit { opacity: 0; transition: opacity .15s; }
.agiz-normal, .yk-bakis { transition: opacity .15s; }
.yanaklar { opacity: .35; transition: opacity .3s; }
.yazi-odasi-sahne.yayinlandi .gozler-mutlu, .yazi-odasi-sahne.yayinlandi .agiz-sirit { opacity: 1; }
.yazi-odasi-sahne.yayinlandi .agiz-normal, .yazi-odasi-sahne.yayinlandi .yk-bakis { opacity: 0; }
.yazi-odasi-sahne.yayinlandi .yanaklar { opacity: .7; }

/* Hakkımızda: ekip fotoğraf stüdyosu */
.studyo { background: radial-gradient(900px 420px at 50% 20%, #ffe0d8 0%, transparent 65%), linear-gradient(180deg, #fff0ec 0%, var(--krem) 100%); padding: 8px 0 44px; overflow: hidden; }
.studyo-ic { text-align: center; }
.studyo-ic .yol ol { justify-content: center; }
.studyo .ust-yazi { display: inline-block; background: #fff; color: #c2554a; font-weight: 700; font-size: 14px; padding: 5px 14px; border-radius: 999px; margin: 10px 0 12px; box-shadow: 0 2px 10px rgba(43,33,24,.06); }
.studyo h1 { font-size: clamp(30px, 4.6vw, 50px); margin-bottom: 12px; }
.studyo-giris { max-width: 720px; margin: 0 auto; color: var(--soluk); font-size: clamp(16px, 1.4vw, 18px); }

.ekip-sahne { position: relative; max-width: 860px; margin: 34px auto 0; padding: 40px 24px 6px; border-radius: 28px;
  background: radial-gradient(70% 90% at 50% 0%, #fff6f3 0%, transparent 70%), linear-gradient(180deg, #ffd9cf 0%, #ffc9bc 78%, #f5b3a4 100%); box-shadow: inset 0 -30px 40px -30px rgba(160,70,50,.25); }
.ekip-sahne::before, .ekip-sahne::after { content: ""; position: absolute; top: -14px; width: 80px; height: 56px; border-radius: 10px; background: linear-gradient(180deg, #fff, #f3eae6); box-shadow: 0 8px 18px rgba(43,33,24,.12); }
.ekip-sahne::before { left: 26px; transform: rotate(-14deg); }
.ekip-sahne::after { right: 26px; transform: rotate(14deg); }
.ekip-cizim svg { display: block; width: 100%; height: auto; overflow: hidden; border-radius: 0 0 24px 24px; }

.ekip-durum .goz-kapali, .ekip-durum .agiz-gulus { opacity: 0; }
.ekip-durum .uykucu .goz-acik { opacity: 0; }
.ekip-durum .uykucu .goz-kapali { opacity: 1; }
.ekip-durum.poz .agiz-gulus { opacity: 1; }
.ekip-durum.poz .agiz-normal { opacity: 0; }
.ekip-durum.poz:not(.uyandi) .uykucu .agiz-gulus { opacity: 0; }
.ekip-durum.poz:not(.uyandi) .uykucu .agiz-normal { opacity: 1; }
.ekip-durum.uyandi .uykucu .goz-acik { opacity: 1; }
.ekip-durum.uyandi .uykucu .goz-kapali { opacity: 0; }
.ekip-durum.kirpti .hesapci .goz-acik { opacity: 0; }
.ekip-durum.kirpti .hesapci .goz-kapali { opacity: 1; }
.aks-bere { transform-box: fill-box; transform-origin: 30% 100%; transition: transform .2s; }
.ekip-durum.bere-kaydi .aks-bere { transform: rotate(-24deg) translate(-8px, 10px); }
.zzz-svg text { animation: zzz-sv 2.8s ease-in-out infinite; }
.zzz-svg text:nth-child(2) { animation-delay: .5s; } .zzz-svg text:nth-child(3) { animation-delay: 1s; }
@keyframes zzz-sv { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.ekip-durum.uyandi .zzz-svg { display: none; }

.ekip-uye { position: absolute; top: 4%; bottom: 2%; border-radius: 40% 40% 12px 12px; z-index: 2; }
.ekip-uye:focus-visible { outline: 3px solid var(--kahve); outline-offset: 2px; }
.isim-etiketi { position: absolute; left: 50%; top: -8px; translate: -50% -100%; width: max-content; max-width: 210px; background: var(--kahve); color: #fff; padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.35; text-align: center; opacity: 0; scale: .8; transform-origin: 50% 100%; transition: opacity .15s, scale .2s; pointer-events: none; }
.isim-etiketi::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; background: var(--kahve); transform: rotate(45deg); }
.isim-etiketi strong { display: block; font-size: 15px; color: var(--sari); }
.isim-etiketi small { display: block; color: rgba(255,255,255,.85); font-size: 12.5px; }
.ekip-uye:hover .isim-etiketi, .ekip-uye:focus-visible .isim-etiketi { opacity: 1; scale: 1; }

.geri-sayim { position: absolute; inset: 0; display: grid; place-items: center; z-index: 3; pointer-events: none; font-size: clamp(64px, 12vw, 120px); font-weight: 800; color: #fff; text-shadow: 0 6px 20px rgba(160,70,50,.45); }
.geri-sayim.vurgu { animation: sayim .7s ease-out; }
@keyframes sayim { 0% { transform: scale(1.6); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 100% { transform: scale(.9); opacity: .9; } }
.flas { position: absolute; inset: 0; z-index: 4; border-radius: 28px; background: #fff; opacity: 0; pointer-events: none; }
.ekip-sahne.flas-var .flas { animation: flas .55s ease-out; }
@keyframes flas { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }

.polaroid { position: absolute; z-index: 5; right: -18px; top: -40px; width: 230px; margin: 0; padding: 10px 10px 12px; background: #fff; box-shadow: 0 14px 34px rgba(43,33,24,.22); text-align: center;
  opacity: 0; transform: translateY(-30px) rotate(-12deg) scale(.6); pointer-events: none; transition: opacity .3s, transform .6s cubic-bezier(.3,1.4,.5,1); }
.polaroid.gorunur { opacity: 1; transform: rotate(6deg); pointer-events: auto; }
.polaroid .foto { background: linear-gradient(180deg, #ffd9cf, #f5b3a4); padding: 8px 6px 0; min-height: 70px; }
.polaroid .foto svg { display: block; width: 100%; height: auto; }
.polaroid .foto .zzz-svg text { animation: none; opacity: .8; }
.polaroid figcaption { margin-top: 8px; font-size: 13.5px; font-weight: 700; color: var(--kahve); font-style: italic; }
.foto-dugme { margin-top: 26px; background: #c2554a; }
.foto-dugme:hover { background: #a3443b; }
.foto-dugme:disabled { opacity: .6; cursor: progress; }
.studyo-ipucu { margin: 10px 0 0; font-size: 13.5px; font-weight: 700; color: #c2554a; }

@media (max-width: 760px) {
  .ekip-sahne { padding: 30px 8px 4px; margin-top: 26px; }
  .ekip-sahne::before, .ekip-sahne::after { width: 50px; height: 36px; }
  .polaroid { width: 160px; right: -6px; top: -54px; padding: 7px 7px 9px; }
  .polaroid figcaption { font-size: 12px; }
  .isim-etiketi { max-width: 160px; font-size: 12px; }
}
@media (hover: none) { .studyo-ipucu { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .studyo *, .studyo *::before, .studyo *::after { animation: none !important; transition: none !important; }
}

/* ================================================================ Oyunlar */
h1 em { font-style: normal; background: linear-gradient(transparent 62%, var(--sari) 62%); }
.oyun-karti .oyun-rozet { position: absolute; top: 22px; right: 18px; }
.oyun-rozet { display: inline-block; background: #fff0ef; color: #b5453c; font-size: 12.5px; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.oyun-karti .git { margin-top: auto; padding-top: 8px; font-weight: 800; color: var(--turuncu); }

/* Oyunlar sayfası: oyuncu kedi */
.oyun-kahraman { background: radial-gradient(900px 420px at 85% 30%, #ffd0cc 0%, transparent 60%), linear-gradient(180deg, #fff0ef 0%, var(--krem) 100%); }
.oyun-sahne::before { background: #ffd0cc; }
.oyuncu-kedi svg { overflow: visible; }
.oy-bakis { transition: transform .2s ease-out; }
.oy-gozler { transform-box: fill-box; transform-origin: center; animation: kirp 5s infinite; }
.oy-bas { transform-box: fill-box; transform-origin: 50% 90%; animation: oy-sallan 3.2s ease-in-out infinite; }
@keyframes oy-sallan { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-2.5deg); } }
.oy-kuyruk { transform-box: fill-box; transform-origin: 0% 100%; animation: oy-kuyruk 2.6s ease-in-out infinite; }
@keyframes oy-kuyruk { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(10deg); } }
.oy-dil { transform-box: fill-box; transform-origin: 30% 0; transform: scaleY(.5); transition: transform .2s; }
.oy-pati, .oy-kumanda { transform-box: fill-box; transform-origin: 50% 50%; }
.oy-tus { transition: filter .1s; }
.oy-tus.yan { filter: brightness(1.6) drop-shadow(0 0 4px #fff); }
.oy-led { animation: oy-led 1.6s steps(2) infinite; }
@keyframes oy-led { 50% { opacity: .3; } }
.oyun-sahne.oynuyor .oy-pati.sol { animation: oy-bas .14s ease-in-out infinite; }
.oyun-sahne.oynuyor .oy-pati.sag { animation: oy-bas .14s ease-in-out infinite .07s; }
@keyframes oy-bas { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.oyun-sahne.oynuyor .oy-kumanda { animation: oy-titre .1s linear infinite; }
@keyframes oy-titre { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-1px, 1px) rotate(-1deg); } 75% { transform: translate(1px, 0) rotate(1deg); } }
.oyun-sahne.oynuyor .oy-dil { transform: scaleY(1.1); }
.oyun-sahne.oynuyor .oy-bas { animation: none; transform: rotate(-4deg); }
.oy-skor { position: absolute; z-index: 2; top: 92px; left: 4%; background: #3a2e44; color: #6be08a; font: 800 15px/1 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: 1px; padding: 9px 12px; border-radius: 12px; box-shadow: 0 6px 18px rgba(43,33,24,.18); rotate: -6deg; }
.oy-skor b { color: #fff; }
.oy-arti { position: absolute; z-index: 2; top: 120px; left: 12%; font-weight: 800; color: #e8645a; font-size: 20px; opacity: 0; pointer-events: none; }
.oy-arti.uc { animation: oy-arti 1s ease-out; }
@keyframes oy-arti { 0% { opacity: 0; transform: translateY(10px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-36px); } }
@media (max-width: 760px) {
  .oy-skor { top: 70px; left: 0; font-size: 13px; }
  .oy-arti { top: 100px; left: 4%; }
}
@media (prefers-reduced-motion: reduce) { .oy-arti.uc { animation: none; } }

/* Oyunların ortak parçaları */
.oyun { padding: 22px; }
.oyun-ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.secenekler { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--krem); border: 1px solid var(--cizgi); border-radius: 999px; padding: 4px; }
.secenek { font: inherit; font-size: 14px; font-weight: 700; color: var(--metin); background: none; border: 0; border-radius: 999px; padding: 7px 14px; cursor: pointer; min-height: 36px; }
.secenek:hover { background: var(--sari-acik); }
.secenek[aria-pressed="true"] { background: var(--kahve); color: #fff; }
.oyun-sayac { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; color: var(--soluk); }
.oyun-sayac b { color: var(--kahve); font-variant-numeric: tabular-nums; }
.oyun-durum { min-height: 1.7em; font-size: 15px; margin: 0 0 14px; }
.oyun-durum strong { color: var(--yesil); }
.oyun-sonuc { text-align: center; background: var(--krem); border: 2px dashed var(--sari); border-radius: 20px; padding: 24px 20px; margin-top: 18px; }
.oyun-sonuc h2 { margin: 6px 0 8px; }
.oyun-sonuc .dugme { margin-top: 10px; }
.oyun-sonuc-ikon { font-size: 44px; line-height: 1; display: block; }
.oyun-dugmeler { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.oyun-yenile { margin-top: 16px; }
.oyun-not { font-size: 14px; color: var(--soluk); margin: 12px 0 0; }
.metin-dugme { font: inherit; font-size: 14px; font-weight: 700; color: var(--turuncu); background: none; border: 0; cursor: pointer; padding: 4px 0; }
.metin-dugme:hover { color: var(--kahve); text-decoration: underline; }
.oyun button:focus-visible { outline: 3px solid var(--kahve); outline-offset: 2px; }

/* Hafıza oyunu */
.hafiza-tahta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.hafiza-tahta[data-cift="12"] { grid-template-columns: repeat(6, 1fr); }
.h-kart { position: relative; aspect-ratio: 3 / 4; padding: 0; border: 0; background: none; cursor: pointer; perspective: 700px; font: inherit; }
.h-ic { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.3,1.3,.5,1); }
.h-kart.acik .h-ic, .h-kart.eslesti .h-ic { transform: rotateY(180deg); }
.h-arka, .h-on { position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; place-items: center; }
.h-arka { background: repeating-linear-gradient(45deg, #f5b700 0 10px, #f7c12e 10px 20px); box-shadow: inset 0 0 0 3px #e0a400, 0 3px 0 #c98f00; }
.h-arka svg { width: 42%; fill: #fff; opacity: .9; }
.h-kart:hover .h-arka { filter: brightness(1.05); }
.h-on { transform: rotateY(180deg); background: #fffaf0; box-shadow: inset 0 0 0 2px var(--cizgi), 0 3px 0 var(--cizgi); grid-template-rows: 1fr auto; padding: 8% 6% 6%; }
.h-on svg { width: 88%; height: auto; align-self: center; justify-self: center; }
.h-ad { font-size: 12px; font-weight: 700; color: var(--kahve); line-height: 1.2; text-align: center; }
.h-kart.eslesti .h-on { background: #eef8f1; box-shadow: inset 0 0 0 2px #3fa36b, 0 3px 0 #3fa36b; }
.h-kart.eslesti { cursor: default; animation: h-eslesti .5s ease; }
@keyframes h-eslesti { 50% { transform: scale(1.06); } }
@media (max-width: 560px) {
  .oyun { padding: 16px 12px; }
  .hafiza-tahta { gap: 7px; }
  .hafiza-tahta[data-cift="12"] { grid-template-columns: repeat(4, 1fr); }
  .h-ad { font-size: 10px; }
}

/* Bilgi yarışması ve ırk testi */
.bilgi-giris { text-align: center; padding: 10px 0; }
.bilgi-giris p { max-width: 460px; margin: 10px auto 0; }
.bilgi-sira { font-weight: 800; color: var(--kahve); font-size: 15px; }
.bilgi-puan { font-size: 14px; color: var(--soluk); }
.bilgi-puan b { color: var(--kahve); font-size: 18px; }
.bilgi-cubuk { height: 8px; background: var(--krem); border-radius: 999px; overflow: hidden; margin-bottom: 18px; }
.bilgi-cubuk span { display: block; height: 100%; width: 0; background: var(--sari); border-radius: 999px; transition: width .35s ease; }
.bilgi-soru { font-size: clamp(19px, 2.4vw, 24px); margin: 0 0 16px; outline: none; }
.bilgi-siklar { display: grid; gap: 10px; }
.sik { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; font-weight: 600; font-size: 16px; color: var(--metin); background: #fff; border: 2px solid var(--cizgi); border-radius: 14px; padding: 12px 14px; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.sik:hover:not(:disabled) { border-color: var(--sari); background: #fffaf0; transform: translateX(2px); }
.sik-harf { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--sari-acik); color: var(--kahve); font-weight: 800; font-size: 14px; }
.sik:disabled { cursor: default; }
.sik.dogru { border-color: #3fa36b; background: #eef8f1; }
.sik.dogru .sik-harf { background: #3fa36b; color: #fff; }
.sik.yanlis { border-color: #e05a4f; background: #fff0ef; }
.sik.yanlis .sik-harf { background: #e05a4f; color: #fff; }
.cevaplandi .sik:not(.dogru):not(.yanlis) { opacity: .6; }
.sik.secili { border-color: var(--kahve); background: var(--sari-acik); }
.sik.secili .sik-harf { background: var(--kahve); color: #fff; }
.bilgi-aciklama { margin-top: 16px; padding: 14px 16px; border-radius: 14px; font-size: 15.5px; line-height: 1.6; }
.bilgi-aciklama.iyi { background: #eef8f1; }
.bilgi-aciklama.kotu { background: #fff0ef; }
.bilgi-aciklama a { font-weight: 800; white-space: nowrap; }
.bilgi-oyun > .dugme { margin-top: 16px; }
.irk-sonuc .irk-sonuc-ust { display: block; font-weight: 700; color: var(--soluk); }
.irk-sonuc h2 { font-size: clamp(28px, 4vw, 38px); margin: 2px 0 8px; }
.irk-sonuc p { max-width: 560px; margin: 12px auto; }
.irk-ikinci { font-size: 14.5px; color: var(--soluk); }

/* Kediler için ekran oyunu */
.kedi-ekrani { padding: 18px; }
.ekran-alan { position: relative; height: min(70vh, 620px); min-height: 340px; border-radius: 18px; overflow: hidden; background: #121a16; touch-action: none; user-select: none; -webkit-user-select: none; }
.ekran-alan canvas { display: block; width: 100%; height: 100%; }
.ekran-alan.tam { height: 100%; border-radius: 0; }
.ekran-bilgi { position: absolute; top: 12px; left: 12px; color: rgba(255,255,255,.75); font-size: 14px; font-weight: 700; background: rgba(0,0,0,.3); padding: 5px 12px; border-radius: 999px; pointer-events: none; }
.ekran-bilgi b { color: #fff; }
.ekran-dugmeler { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; }
.ekran-dugme { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 18px; cursor: pointer; }
.ekran-dugme svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.ekran-dugme:hover { background: rgba(255,255,255,.28); }
.ekran-basla { position: absolute; left: 50%; top: 50%; translate: -50% -50%; font: inherit; font-weight: 800; font-size: 20px; color: var(--kahve); background: var(--sari); border: 0; border-radius: 999px; padding: 16px 34px; cursor: pointer; box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.ekran-basla:hover { background: #ffd23f; }
.oyunlar-bolum { background: #fff0ef; padding: 48px 0 56px; }

/* ================================================================ Mobil menü */
.menu-dugme { display: none; }
@media (max-width: 760px) {
  .menu-dugme { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 46px; height: 46px; padding: 0; border: 1px solid var(--cizgi); border-radius: 14px; background: var(--kart); cursor: pointer; }
  .menu-dugme span { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: var(--kahve); transition: transform .25s, opacity .2s; }
  .menu-dugme[aria-expanded="true"] { background: var(--sari-acik); border-color: var(--sari); }
  .menu-dugme[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .menu-dugme[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-dugme[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .menu-dugme:focus-visible { outline: 3px solid var(--kahve); outline-offset: 2px; }

  .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 4px; padding: 10px 16px 18px; background: var(--kart); border-bottom: 1px solid var(--cizgi); box-shadow: 0 18px 30px rgba(43,33,24,.12); max-height: calc(100vh - 60px); overflow-y: auto; }
  .menu.acik { display: flex; animation: menu-ac .22s ease-out; }
  .menu a { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 14px; font-size: 17px; font-weight: 700; }
  .menu a::before { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--krem); font-size: 19px; }
  .menu a[href="/"]::before { content: "🏠"; }
  .menu a[href="/araclar/"]::before { content: "🧮"; }
  .menu a[href="/rehberler/"]::before { content: "📚"; }
  .menu a[href="/blog/"]::before { content: "✍️"; }
  .menu a[href="/oyunlar/"]::before { content: "🎮"; }
  .menu a[href="/hakkimizda/"]::before { content: "🐾"; }
  .menu a[aria-current="page"]::before { background: #fff; }
  .menu li + li { border-top: 1px solid var(--krem); padding-top: 4px; }
}
@keyframes menu-ac { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .menu.acik { animation: none; } .menu-dugme span { transition: none; } }

/* ================================================================
   EDİTORYAL TEMA — dergi düzeni: serif başlıklar, kâğıt zemin, mürekkep rengi,
   tek vurgu rengi (sarı), ince çizgiler, köşeli öğeler, numaralı kartlar.
   Önceki stillerin üzerine yazar; maskot sahneleri olduğu gibi kalır.
   ================================================================ */
:root {
  --krem: #f8f4ec;            /* kâğıt */
  --kart: #fffdf8;
  --kahve: #1d1914;           /* mürekkep */
  --metin: #2c261f;
  --soluk: #6d6152;
  --cizgi: #e4d9c6;
  --cizgi-koyu: #1d1914;
  --turuncu: #b8560f;         /* bağlantılar: kontrastı yüksek turuncu */
  --sari: #f2b300;
  --sari-acik: #fbe6a6;
  --radius: 6px;
  --golge: none;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
}
body { background: var(--krem); }
::selection { background: var(--sari); color: var(--kahve); }

/* Tipografi */
h1, h2, h3, .slayt-baslik, .bilgi-soru, .irk-sonuc h2 { font-family: var(--serif); font-optical-sizing: auto; font-weight: 600; letter-spacing: -.015em; }
h1, .slayt-baslik, .hesap-yazi h1 { font-weight: 600; letter-spacing: -.025em; line-height: 1.05; }
h2 { font-weight: 600; }
h3, .kart h3, .kart h2 { font-weight: 600; letter-spacing: -.01em; }
h1 em, .slayt-baslik em, .hesap-yazi h1 em, .kutuphane-yazi h1 em, .yazi-odasi-yazi h1 em {
  font-style: italic; font-weight: 500; background: none !important;
  text-decoration: underline; text-decoration-color: var(--sari); text-decoration-thickness: .09em; text-underline-offset: .1em; text-decoration-skip-ink: none;
}
.giris, .hesap-giris, .slayt-metin { color: var(--soluk); }
a { text-decoration-thickness: 1px; }

/* Üst menü */
.ust { background: rgba(248,244,236,.94); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--kahve); }
.logo { font-family: var(--serif); font-weight: 700; letter-spacing: -.02em; }
.menu a { border-radius: 0; padding: 8px 12px; font-weight: 600; position: relative; }
.menu a:hover, .menu a[aria-current="page"] { background: none; color: var(--kahve); }
.menu a[aria-current="page"]::after, .menu a:hover::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--sari); }

/* Üst yazı (eyebrow): rozet yerine çizgili küçük başlık */
.ust-yazi, .slayt .ust-yazi, .hesap-yazi .ust-yazi {
  background: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important;
  font-size: 12px !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--soluk) !important;
  display: inline-flex !important; align-items: center; gap: 10px;
}
.ust-yazi::before { content: ""; width: 28px; height: 1px; background: currentColor; }

/* Düğmeler: köşeli, mürekkep */
.dugme { border-radius: 4px; font-weight: 700; letter-spacing: .01em; }
.dugme.ikincil { background: transparent; color: var(--kahve); box-shadow: inset 0 0 0 1.5px var(--kahve); }
.dugme.ikincil:hover { background: var(--kahve); color: #fff; }
.dugme.cizgili { box-shadow: inset 0 0 0 1.5px var(--kahve); }
.bolum-baslik .tumu-dugme { border-radius: 4px; background: var(--kahve); color: #fff; box-shadow: none; font-weight: 700; padding: 10px 14px 10px 18px; }
.bolum-baslik .tumu-dugme:hover, .bolum-baslik .tumu-dugme:focus-visible { background: var(--sari); color: var(--kahve); box-shadow: none; transform: none; }
.tumu-dugme .sayi { border-radius: 3px; background: var(--sari); color: var(--kahve); }
.tumu-dugme:hover .sayi, .tumu-dugme:focus-visible .sayi { background: var(--kahve); color: #fff; }

/* Bölüm başlıkları: üstte kalın çizgi */
.bolum-baslik { border-top: 2px solid var(--kahve); padding-top: 14px; align-items: baseline; }
.bolum-baslik h2 { margin: 0; font-size: clamp(26px, 3.2vw, 36px); }

/* Kartlar: emoji kutusu yok, numara var */
.kart { border-radius: var(--radius); box-shadow: none; border: 1px solid var(--cizgi); background: var(--kart); }
a.kart { transition: border-color .15s, background .15s; }
a.kart:hover { transform: none; box-shadow: none; border-color: var(--kahve); background: #fff; }
a.kart:hover h3, a.kart:hover h2 { text-decoration: underline; text-decoration-color: var(--sari); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.kart .ikon, .arac-kutusu .ikon, .balon-ikon { display: none !important; }
.izgara { counter-reset: kart; gap: 0; border-top: 1px solid var(--cizgi); border-left: 1px solid var(--cizgi); }
.izgara > .kart { border-radius: 0; border-width: 0 1px 1px 0; border-color: var(--cizgi); }
.izgara > a.kart:hover { border-color: var(--cizgi); background: #fff; }
.izgara > .kart:not(.yazi-karti):not(.kat-karti)::before {
  counter-increment: kart; content: counter(kart, decimal-leading-zero);
  font: 500 14px/1 var(--serif); font-style: italic; color: var(--soluk); margin-bottom: 14px;
}
.kart .git, a.kart .git { color: var(--kahve); }
a.kart .git { transition: transform .2s; }
a.kart:hover .git { transform: translateX(4px); }
.kat-karti { padding: 16px 18px; }
.yazi-kategori { background: none; border-radius: 0; padding: 0; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--turuncu); }
.oyun-rozet, .oyun-karti .oyun-rozet { background: none; color: var(--soluk); border-radius: 0; padding: 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.oyun-karti .oyun-rozet { top: 22px; right: 20px; }
.irk-karti .uyum { border-radius: 3px; }

/* Hap biçimli öğeler köşeli */
.hizli-arac, .filtre-cip, .secenek, .secenekler, .uyum, .sayi { border-radius: 4px !important; }
.hizli-arac { background: transparent; border-color: var(--kahve); font-weight: 600; }
.hizli-arac:hover { background: var(--kahve); color: #fff; border-color: var(--kahve); transform: none; }
.filtre-cip { border-width: 1px; }
.filtre-cip[aria-pressed="true"], .blog-suzgec .filtre-cip[aria-pressed="true"] { background: var(--kahve); border-color: var(--kahve); color: #fff; }
.secenekler { background: transparent; border-color: var(--kahve); }
.secenek { border-radius: 3px !important; }

/* Kahraman alanları: degrade yerine düz kâğıt + alt çizgi */
.hesap-kahraman, .oyun-kahraman, .kutuphane, .yazi-odasi, .studyo { background: var(--krem) !important; border-bottom: 1px solid var(--kahve); }
.hesap-sahne::before, .oyun-sahne::before { border-radius: 50%; }

/* Araç ve oyun kutuları */
.arac { border-radius: var(--radius); box-shadow: none; border: 1px solid var(--kahve); }
.arac-kutusu { border-radius: var(--radius); border: 1px solid var(--kahve); border-left: 6px solid var(--sari); }
.arac-kutusu:hover { transform: none; box-shadow: none; background: #fff; }
.sonuc { border-radius: var(--radius); }
.oyun-sonuc { border-radius: var(--radius); border: 1px solid var(--kahve); background: var(--kart); }
.sik { border-radius: 4px; border-width: 1px; }
.sik-harf { border-radius: 3px; font-family: var(--serif); }
.bilgi-aciklama { border-radius: 4px; }
.ekran-basla { border-radius: 4px; }

/* Veteriner uyarısı */
.veteriner-uyari { background: var(--kart); border-top: 1px solid var(--kahve); border-bottom: 1px solid var(--kahve); }
.veteriner-ikon { color: var(--turuncu); }
.veteriner-ikon svg { width: 30px; height: 30px; display: block; }

/* SSS */
details { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
summary { font-family: var(--serif); font-weight: 600; }

/* Metin içi işaretler emoji gibi değil, yazı karakteri gibi görünsün */
.karar-isaret, .isaret { font-variant-emoji: text; }

/* Mobil menü: emoji yerine serif, numaralı liste */
@media (max-width: 760px) {
  .menu-dugme { border-radius: 4px; border-color: var(--kahve); background: transparent; }
  .menu-dugme[aria-expanded="true"] { background: var(--kahve); }
  .menu-dugme[aria-expanded="true"] span { background: #fff; }
  .menu { counter-reset: menu; background: var(--krem); border-bottom: 1px solid var(--kahve); box-shadow: 0 24px 40px rgba(29,25,20,.12); }
  .menu a { font-family: var(--serif); font-size: 22px; font-weight: 600; padding: 12px 4px; border-radius: 0; }
  .menu a::before { content: counter(menu, decimal-leading-zero) !important; counter-increment: menu; width: auto !important; height: auto !important; background: none !important;
    font: italic 500 13px/1 var(--serif) !important; color: var(--soluk); margin-right: 4px; }
  .menu a[aria-current="page"]::after, .menu a:hover::after { left: 36px; right: auto; width: 40px; bottom: 6px; }
  .menu li + li { border-top: 1px solid var(--cizgi); }
}

/* Editoryal: arayüz bileşenlerinde yuvarlak köşeleri sadeleştir (konuşma balonları ve sahneler hariç) */
.secim label, .secim.dikey label, .alan input, .alan select, input[type="search"], input[type="text"], input[type="tel"], input[type="number"], input[type="date"], select, .ozet div, .isim-kart, .tablo-kap, .uyari, .kontrol-notu, .icindekiler, .karar-kutusu, .karar-aciklama div, .yiyecek-cip, .irk-bilgi div, .ses-karti, .ses-ikon, .rozet, .isim-cins, details { border-radius: 4px !important; }
.cubuk, .cubuk span, .bilgi-cubuk, .bilgi-cubuk span { border-radius: 0 !important; }
.secim input:checked + label { background: var(--kahve) !important; color: #fff !important; border-color: var(--kahve) !important; }
.icindekiler { background: transparent; border-color: var(--kahve); }
.icindekiler strong { font-family: var(--serif); font-size: 18px; }

/* ================================================================ Site içi arama */
.ust nav { display: flex; align-items: center; gap: 6px; }
.arama-dugme { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 10px; margin-left: 6px; font: inherit; font-size: 14px; font-weight: 600; color: var(--kahve); background: transparent; border: 1px solid var(--kahve); border-radius: 4px; cursor: pointer; transition: background .15s, color .15s; }
.arama-dugme svg, .arama-form-ikon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex: none; }
.arama-dugme:hover, .arama-dugme[aria-expanded="true"] { background: var(--kahve); color: #fff; }
.arama-dugme:focus-visible { outline: 3px solid var(--sari); outline-offset: 2px; }
.arama-dugme-yazi::after { content: "/"; display: inline-block; margin-left: 10px; padding: 0 6px; font-size: 12px; line-height: 18px; border: 1px solid currentColor; border-radius: 3px; opacity: .55; }

.arama-katman { position: fixed; inset: 0; z-index: 100; background: rgba(29,25,20,.45); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: flex-start; padding: 9vh 16px 16px; }
.arama-katman[hidden] { display: none !important; }
html.arama-acik { overflow: hidden; }
.arama-kutu { width: min(680px, 100%); max-height: 78vh; display: flex; flex-direction: column; background: var(--krem); border: 1px solid var(--kahve); border-radius: 6px; box-shadow: 0 30px 80px rgba(29,25,20,.35); overflow: hidden; animation: arama-ac .18s ease-out; }
@keyframes arama-ac { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.arama-form { display: flex; align-items: center; gap: 12px; padding: 4px 14px 4px 18px; border-bottom: 1px solid var(--kahve); background: var(--kart); }
.arama-form-ikon { width: 20px; height: 20px; color: var(--soluk); }
.arama-girdi { flex: 1; min-width: 0; height: 58px; border: 0 !important; background: transparent !important; outline: none; box-shadow: none !important; padding: 0 !important; font-family: var(--serif) !important; font-size: 21px !important; color: var(--kahve); }
.arama-girdi::-webkit-search-cancel-button { display: none; }
.arama-kapat { font: inherit; font-size: 12px; font-weight: 700; color: var(--soluk); background: transparent; border: 1px solid var(--cizgi); border-radius: 3px; padding: 4px 8px; cursor: pointer; }
.arama-kapat:hover { color: var(--kahve); border-color: var(--kahve); }
.arama-govde { overflow-y: auto; padding: 6px 0 12px; }
.arama-durum { margin: 8px 18px 4px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--soluk); }
.arama-durum:empty { display: none; }
.arama-sonuclar { list-style: none; margin: 0; padding: 0; }
.arama-sonuclar a { display: grid; grid-template-columns: 74px 1fr; column-gap: 14px; padding: 12px 18px; text-decoration: none; color: var(--metin); border-top: 1px solid var(--cizgi); }
.arama-sonuclar li:first-child a { border-top: 0; }
.arama-sonuclar a:hover, .arama-sonuclar [aria-selected="true"] a { background: #fff; }
.arama-sonuclar [aria-selected="true"] a { box-shadow: inset 3px 0 0 var(--sari); }
.arama-tur { grid-row: span 2; align-self: start; padding-top: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--turuncu); }
.arama-baslik { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--kahve); line-height: 1.3; }
.arama-baslik mark { background: none; color: inherit; text-decoration: underline; text-decoration-color: var(--sari); text-decoration-thickness: 3px; text-underline-offset: 2px; }
.arama-aciklama { font-size: 13.5px; color: var(--soluk); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; }
.arama-oneriler { padding: 12px 18px 6px; }
.arama-oneriler[hidden] { display: none; }
.arama-oneri-baslik { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--soluk); margin-bottom: 10px; }
.arama-cipler { display: flex; flex-wrap: wrap; gap: 8px; }
.arama-cip { font: inherit; font-size: 14px; font-weight: 600; color: var(--kahve); background: transparent; border: 1px solid var(--kahve); border-radius: 4px; padding: 6px 12px; cursor: pointer; }
.arama-cip:hover { background: var(--kahve); color: #fff; }
@media (max-width: 760px) {
  .arama-dugme { order: -1; width: 46px; height: 46px; padding: 0; justify-content: center; margin-left: 0; }
  .arama-dugme svg { width: 20px; height: 20px; }
  .arama-dugme-yazi { display: none; }
  .arama-katman { padding: 0; align-items: stretch; }
  .arama-kutu { max-height: none; height: 100%; border: 0; border-radius: 0; }
  .arama-sonuclar a { grid-template-columns: 1fr; }
  .arama-tur { grid-row: auto; padding: 0 0 2px; }
}
@media (prefers-reduced-motion: reduce) { .arama-kutu { animation: none; } }

/* Arama penceresini kapatma: X düğmesi */
.arama-kapat { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; flex: none; color: var(--kahve); border: 1px solid var(--cizgi); border-radius: 4px; background: transparent; }
.arama-kapat svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.arama-kapat:hover { background: var(--kahve); color: #fff; border-color: var(--kahve); }
.arama-kapat:focus-visible { outline: 3px solid var(--sari); outline-offset: 2px; }
@media (max-width: 760px) { .arama-kapat { width: 44px; height: 44px; } }

/* ================================================================ Ana sayfa: hızlı hesapla kutusu */
.hizli-hesap { position: relative; z-index: 2; margin-top: -22px; padding-bottom: 8px; }
.hh-kutu { background: var(--kart); border: 1px solid var(--kahve); border-radius: 6px; box-shadow: 0 1px 0 var(--kahve), 0 18px 40px -24px rgba(29,25,20,.35); padding: 18px 22px 16px; }
.hh-ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--cizgi); }
.hh-baslik { margin: 0; font-size: 22px; }
.hh-sekmeler { display: inline-flex; border: 1px solid var(--kahve); border-radius: 4px; padding: 3px; gap: 3px; }
.hh-sekmeler button { font: inherit; font-size: 14px; font-weight: 700; color: var(--kahve); background: transparent; border: 0; border-radius: 3px; padding: 7px 14px; cursor: pointer; }
.hh-sekmeler button[aria-selected="true"] { background: var(--kahve); color: #fff; }
.hh-sekmeler button:focus-visible { outline: 3px solid var(--sari); outline-offset: 2px; }
.hh-panel { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 14px 28px; }
.hh-panel[hidden] { display: none; }
.hh-alanlar { display: flex; gap: 12px; align-items: end; }
.hh-alan { display: grid; gap: 6px; margin: 0; }
.hh-etiket { font-size: 13px; font-weight: 700; color: var(--soluk); white-space: nowrap; }
.hh-etiket.gizli { visibility: hidden; position: static; width: auto; height: auto; clip: auto; }
.hh-girdi { display: inline-flex; align-items: center; height: 48px; border: 1px solid var(--kahve); border-radius: 4px; background: #fff; padding-right: 12px; }
.hh-girdi:focus-within { outline: 3px solid var(--sari); outline-offset: 1px; }
.hh-girdi input, .hh-girdi select { border: 0 !important; outline: none; background: transparent !important; box-shadow: none !important; font: 600 20px/1 var(--serif) !important; color: var(--kahve); height: 100%; min-height: 0 !important; padding: 0 6px 0 12px !important; }
.hh-girdi input { width: 72px; }
.hh-girdi select { padding-right: 4px !important; cursor: pointer; }
.hh-girdi em { font-style: normal; font-size: 14px; font-weight: 600; color: var(--soluk); }
.hh-sonuc { display: flex; align-items: baseline; gap: 10px; min-width: 0; padding-left: 24px; border-left: 1px solid var(--cizgi); min-height: 48px; }
.hh-sonuc strong { font: 600 44px/1 var(--serif); letter-spacing: -.02em; color: var(--kahve); white-space: nowrap; }
.hh-sonuc span { font-size: 14.5px; color: var(--soluk); }
.hh-panel .dugme { margin: 0; white-space: nowrap; }
.hh-not { grid-column: 1 / -1; margin: -2px 0 0; font-size: 12.5px; color: var(--soluk); }
@media (max-width: 860px) {
  .hh-panel { grid-template-columns: 1fr; gap: 14px; }
  .hh-sonuc { padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--cizgi); }
  .hh-panel .dugme { width: 100%; }
}
@media (max-width: 760px) {
  .hizli-hesap { margin-top: -20px; }
  .hh-kutu { padding: 16px 16px 14px; }
  .hh-ust { flex-direction: column; align-items: flex-start; }
  .hh-sekmeler { width: 100%; }
  .hh-sekmeler button { flex: 1; }
  .hh-alanlar { flex-wrap: wrap; }
  .hh-sonuc strong { font-size: 38px; }
}

/* Oyun kartı görselleri için vitrin görünümü (#onizleme): yalnızca oyun alanı pencereyi doldurur */
html.onizleme, html.onizleme body { overflow: hidden !important; }
html.onizleme body { visibility: hidden; }
html.onizleme .oyun { visibility: visible; position: fixed; inset: 0; z-index: 999; margin: 0; border: 0; border-radius: 0; overflow: hidden; background: var(--kart); padding: 22px 26px; }
html.onizleme .oyun *, html.onizleme .oyun *::before, html.onizleme .oyun *::after { transition: none !important; animation: none !important; }
html.onizleme .kedi-ekrani { padding: 0; }
html.onizleme .kedi-ekrani .ekran-ayar, html.onizleme .kedi-ekrani .oyun-not { display: none; }
html.onizleme .ekran-alan { height: 100vh; border-radius: 0; }
html.onizleme .oyun-yenile { display: none; }

/* Oyun kartlarında oyundan ekran görüntüsü */
.izgara > .oyun-karti::before { display: none !important; }
.oyun-karti { overflow: hidden; }
.oyun-gorsel { display: block; margin: -22px -22px 16px; aspect-ratio: 16 / 10; overflow: hidden; background: #efe8db; border-bottom: 1px solid var(--cizgi); }
.oyun-gorsel img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
a.oyun-karti:hover .oyun-gorsel img { transform: scale(1.04); }
.oyun-karti .oyun-rozet { position: static; align-self: flex-start; margin-bottom: 2px; }
@media (prefers-reduced-motion: reduce) { .oyun-gorsel img { transition: none; } }

/* ================================================================ Sokak kedisi kış evi planlayıcı */
.kis-bolumler { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 22px; }
.kis-bolumler h2 { margin: 0 0 10px; font-size: 18px; }
.kis-bolumler ol { margin: 0; padding-left: 20px; }
.kis-bolumler ol li { margin-bottom: 8px; font-size: 15px; }
.kis-liste { list-style: none; margin: 0; padding: 0; }
.kis-liste li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--cizgi); font-size: 15px; }
.kis-liste input { flex: none; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--kahve); }
.kis-liste label { cursor: pointer; }
.kis-liste input:checked + label { text-decoration: line-through; color: var(--soluk); }
#kis-yazdir { margin-top: 18px; }
.kis-semasi { display: block; width: 100%; max-width: 560px; height: auto; margin: 8px auto 20px; }
.ks-zemin { stroke: var(--soluk); stroke-width: 2; stroke-dasharray: 6 6; }
.ks-takoz { fill: #c9a27a; }
.ks-kutu { fill: #fff; stroke: var(--kahve); stroke-width: 2.5; }
.ks-yalitim { fill: #eef4fb; stroke: #9db6d3; stroke-width: 1.5; stroke-dasharray: 4 3; }
.ks-cati { fill: var(--sari); stroke: var(--kahve); stroke-width: 2.5; stroke-linejoin: round; }
.ks-saman { fill: #e8c46a; stroke: #b98b2b; stroke-width: 1.5; }
.ks-delik { fill: var(--kahve); }
.ks-etiket path { stroke: var(--soluk); stroke-width: 1.2; fill: none; }
.ks-etiket text { font: 600 13px var(--serif, Georgia), serif; fill: var(--kahve); }
@media (max-width: 640px) {
  .kis-bolumler { grid-template-columns: 1fr; }
  .ks-etiket text { font-size: 15px; }
}
@media print {
  body:has(#kis-formu) .ust, body:has(#kis-formu) .alt, body:has(#kis-formu) .yol, body:has(#kis-formu) article.icerik,
  body:has(#kis-formu) .kis-evi > .alan, body:has(#kis-formu) .kis-evi > .dugme, body:has(#kis-formu) #kis-yazdir,
  body:has(#kis-formu) .veteriner-uyari, body:has(#kis-formu) .arama-katman, body:has(#kis-formu) .kis-liste input { display: none !important; }
  body:has(#kis-formu) { background: #fff; }
  body:has(#kis-formu) .arac { border: 0; padding: 0; }
  body:has(#kis-formu) .sonuc { border-top: 0; margin-top: 0; padding-top: 0; }
  body:has(#kis-formu) .kis-liste li::before { content: "☐"; margin-right: 6px; }
}

/* ================================================================ Yetişkin oyunları: ortak */
.kk-ipucu { font-size: 14px; color: var(--soluk); margin: 0 0 14px; text-align: center; }
.kk-mesaj { min-height: 1.6em; margin: 10px 0; text-align: center; font-weight: 700; color: var(--kahve); }
.kk-mesaj:empty { margin: 4px 0; }

/* Günün Kedi Kelimesi */
.kk-tahta { display: grid; gap: 6px; width: min(330px, 100%); margin: 0 auto; }
.kk-satir-tahta { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.kk-satir-tahta.salla { animation: kk-salla .4s; }
@keyframes kk-salla { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.kk-kare { aspect-ratio: 1; display: grid; place-items: center; border: 2px solid var(--cizgi); border-radius: 4px; background: #fff; font: 700 clamp(22px, 7vw, 30px)/1 var(--serif); color: var(--kahve); text-transform: none; user-select: none; }
.kk-kare.dolu { border-color: var(--soluk); animation: kk-bas .1s; }
@keyframes kk-bas { 50% { transform: scale(1.08); } }
.kk-kare.dogru, .kk-kare.var, .kk-kare.yok { color: #fff; border-color: transparent; animation: kk-cevir .45s ease; }
.kk-kare.dogru { background: #3f9a5c; }
.kk-kare.var { background: #d9a400; }
.kk-kare.yok { background: #8a8172; }
@keyframes kk-cevir { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
.kk-klavye { display: grid; gap: 6px; margin: 14px auto 0; width: min(560px, 100%); user-select: none; }
.kk-satir { display: flex; gap: 5px; justify-content: center; }
.kk-tus { flex: 1 1 0; min-width: 0; max-width: 46px; height: 54px; padding: 0; font-family: inherit; font-weight: 700; font-size: 17px; line-height: 1; color: var(--kahve); background: #e9e1d2; border: 0; border-radius: 4px; cursor: pointer; touch-action: manipulation; }
.kk-tus.genis { flex: 1.6 1 0; max-width: 72px; font-size: 13px; }
.kk-tus:hover { filter: brightness(.96); }
.kk-tus.dogru { background: #3f9a5c; color: #fff; }
.kk-tus.var { background: #d9a400; color: #fff; }
.kk-tus.yok { background: #8a8172; color: #fff; }
.kk-tus:focus-visible { outline: 3px solid var(--kahve); outline-offset: 1px; }
.kk-bilgi { max-width: 520px; margin: 6px auto 14px; }
.kk-sayilar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 420px; margin: 0 auto 14px; }
.kk-sayilar b { display: block; font: 600 26px/1.1 var(--serif); color: var(--kahve); }
.kk-sayilar span { font-size: 11.5px; color: var(--soluk); }
.kk-dagilim { display: grid; gap: 4px; max-width: 360px; margin: 0 auto; text-align: left; }
.kk-cubuk { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.kk-cubuk i { font-style: normal; display: block; background: #8a8172; color: #fff; padding: 2px 8px; text-align: right; border-radius: 2px; min-width: 22px; }
.kk-cubuk i.bu { background: #3f9a5c; }
.kk-sayac { font-size: 13.5px; color: var(--soluk); margin: 12px 0 0; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) {
  .kk-satir { gap: 4px; }
  .kk-tus { height: 50px; font-size: 15px; }
  .kk-tus.genis { font-size: 12px; }
}

/* Kedi Bağlantıları */
.bg-hak { font-size: 14px; color: var(--soluk); display: flex; align-items: center; gap: 8px; }
.bg-noktalar { display: inline-flex; gap: 5px; }
.bg-noktalar i { width: 12px; height: 12px; border-radius: 50%; background: var(--kahve); }
.bg-noktalar i.bos { background: var(--cizgi); }
.bg-cozulen { display: grid; gap: 8px; margin-bottom: 8px; }
.bg-grup { border-radius: 4px; padding: 12px 14px; text-align: center; animation: kk-bas .25s; }
.bg-grup strong { display: block; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: var(--kahve); }
.bg-grup span { font-size: 14px; color: var(--kahve); }
.bg-grup.sari { background: #f7d76a; }
.bg-grup.yesil { background: #a8d59a; }
.bg-grup.mavi { background: #a9c8ea; }
.bg-grup.mor { background: #c9b2e3; }
.bg-tahta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bg-kelime { min-height: 64px; padding: 6px 4px; font-family: inherit; font-weight: 700; font-size: 14px; line-height: 1.15; color: var(--kahve); background: #efe7d8; border: 0; border-radius: 4px; cursor: pointer; word-break: break-word; hyphens: auto; transition: background .12s, transform .12s; }
.bg-kelime.uzun { font-size: 12px; }
.bg-kelime:hover:not(:disabled) { background: #e5dac6; }
.bg-kelime.secili { background: var(--kahve); color: #fff; transform: scale(.97); }
.bg-kelime:focus-visible { outline: 3px solid var(--sari); outline-offset: 2px; }
.bg-dugmeler { margin-top: 14px; }
.bg-dugmeler .dugme { margin: 0; }
.bg-dugmeler .dugme:disabled { opacity: .45; cursor: default; }
@media (max-width: 480px) {
  .bg-tahta { gap: 6px; }
  .bg-kelime { min-height: 58px; font-size: 12px; }
  .bg-kelime.uzun { font-size: 10.5px; }
}

/* Irkı Bil */
.ib-ipuclari { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; counter-reset: none; }
.ib-ipuclari li { border: 1px solid var(--cizgi); border-left: 4px solid var(--sari); border-radius: 4px; padding: 10px 14px; background: #fff; animation: kk-bas .25s; }
.ib-ipucu-ad { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--soluk); margin-bottom: 2px; }
.ib-ipucu-metin { font-size: 15.5px; color: var(--kahve); }
.ib-secenekler { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.ib-secenek { font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1.2; color: var(--kahve); background: #fff; border: 1px solid var(--kahve); border-radius: 4px; padding: 10px 8px; cursor: pointer; }
.ib-secenek:hover:not(:disabled) { background: var(--kahve); color: #fff; }
.ib-secenek.yanlis { text-decoration: line-through; opacity: .45; border-color: var(--cizgi); }
.ib-secenek.dogru { background: #3f9a5c; border-color: #3f9a5c; color: #fff; opacity: 1; }
.ib-secenek:disabled { cursor: default; }

/* Kedi 2048 */
.k2-tahta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: min(440px, 100%); margin: 0 auto; padding: 8px; background: #d9ccb4; border-radius: 6px; touch-action: none; outline: none; }
.k2-tahta:focus-visible { box-shadow: 0 0 0 3px var(--sari); }
.k2-hucre { position: relative; aspect-ratio: 1; border-radius: 4px; background: #e9dfcc; display: grid; place-items: center; overflow: hidden; }
.k2-hucre.dolu { background: var(--zemin); }
.k2-hucre svg { width: 66%; height: auto; margin-top: -10%; }
.k2-ad { position: absolute; left: 0; right: 0; bottom: 6%; text-align: center; font-size: clamp(9px, 2.4vw, 12px); font-weight: 800; color: var(--kahve); }
.k2-deger { position: absolute; top: 4px; left: 6px; font-size: clamp(9px, 2.2vw, 11px); font-weight: 700; color: rgba(29,25,20,.55); }
.k2-hucre.koyu .k2-ad { color: #fff; }
.k2-hucre.koyu .k2-deger { color: rgba(255,255,255,.7); }
.k2-hucre.yeni { animation: k2-yeni .18s ease-out; }
.k2-hucre.birlesti { animation: k2-birles .2s ease-out; }
@keyframes k2-yeni { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes k2-birles { 50% { transform: scale(1.1); } }
.k2-sira { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 16px; }
.k2-sira span { width: 52px; text-align: center; font-size: 10px; color: var(--soluk); }
.k2-sira svg { width: 40px; height: 40px; display: block; margin: 0 auto 2px; }
.oyun-2048 .oyun-ust .dugme { margin: 0; padding: 8px 16px; min-height: 40px; font-size: 14px; }
@media (prefers-reduced-motion: reduce) {
  .kk-kare, .kk-satir-tahta, .bg-grup, .ib-ipuclari li, .k2-hucre { animation: none !important; }
}

/* Telefonda kelime oyunu kenardan kenara: 11 tuşlu Türkçe klavye satırı rahat basılsın */
@media (max-width: 480px) {
  .kelime-oyunu { margin-left: -16px; margin-right: -16px; border-left: 0; border-right: 0; border-radius: 0; padding: 14px 5px; }
  .kelime-oyunu .oyun-ust { padding: 0 10px; }
  .kk-klavye { gap: 5px; }
  .kk-satir { gap: 3px; }
  .kk-tus { height: 52px; font-size: 16px; }
  .kk-tahta { width: min(250px, 72vw); gap: 5px; }
  .kk-satir-tahta { gap: 5px; }
  .kk-kare { font-size: 24px; }
  .kelime-oyunu .kk-ipucu { margin-bottom: 10px; }
  .kelime-oyunu .oyun-sayac { gap: 4px 12px; align-items: center; }
}

/* ================================================================ İstanbul 7/24 açık veteriner rehberi */
.acil-uyari { display: grid; gap: 4px; border: 1px solid #b5453c; border-left: 6px solid #b5453c; background: #fff4f2; border-radius: 4px; padding: 14px 18px; margin: 8px 0 18px; }
.acil-uyari strong { color: #8f2f27; font-size: 17px; }
.acil-uyari span { font-size: 15px; color: var(--metin); }
.acil-yakin { margin-top: 4px; background: #b5453c; color: #fff; text-decoration: none; }
.acil-yakin:hover { background: #8f2f27; color: #fff; }
.acil-kucuk { font-size: 13.5px; color: var(--soluk); margin-top: 8px; }
.ilce-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin: 8px 0 6px; }
.ilce { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px solid var(--cizgi); border-radius: 4px; background: var(--kart); color: var(--kahve); font-weight: 600; font-size: 15px; text-decoration: none; transition: border-color .15s, background .15s; }
.ilce:hover { border-color: var(--kahve); background: #fff; color: var(--kahve); }
.ilce-ok { color: var(--soluk); font-size: 13px; }
.acil-liste li { margin-bottom: 8px; }
.kurumsal-not { margin-top: 40px; padding: 18px 20px; border: 1px solid var(--cizgi); border-radius: 4px; background: var(--kart); font-size: 14px; color: var(--soluk); }
.kurumsal-not h2 { font-size: 17px; margin: 0 0 8px; }
.kurumsal-not p { margin-bottom: 10px; }
@media (max-width: 480px) { .ilce-izgara { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ilce { font-size: 14px; padding: 10px; min-width: 0; overflow-wrap: anywhere; } }
.ilce.sehir small { flex: none; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--soluk); }
.ilce.sehir span { min-width: 0; overflow-wrap: anywhere; }

/* Hızlı kutu: üstte 3 sekmeli menü (isim bulucu, kedi yaşı, uygun ırk) */
.hh-kutu { padding-top: 0; overflow: hidden; }
.hh-kutu > .hh-sekmeler { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; width: auto; margin: 0 -22px 18px; padding: 0; border: 0; border-bottom: 1px solid var(--kahve); border-radius: 0; }
.hh-kutu > .hh-sekmeler button { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 12px; font-size: 15px; font-weight: 700; color: var(--kahve); background: transparent; border: 0; border-right: 1px solid var(--cizgi); border-radius: 0; cursor: pointer; text-align: left; line-height: 1.25; transition: background .15s; }
.hh-kutu > .hh-sekmeler button:last-child { border-right: 0; }
.hh-kutu > .hh-sekmeler button:hover { background: var(--krem); }
.hh-kutu > .hh-sekmeler button[aria-selected="true"] { background: var(--kahve); color: #fff; }
.hh-no { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid currentColor; font: italic 600 14px/1 var(--serif); }
.hh-kutu > .hh-sekmeler button[aria-selected="true"] .hh-no { background: var(--sari); border-color: var(--sari); color: var(--kahve); }
.hh-girdi.secmeli { padding-right: 6px; }
.hh-girdi.secmeli select { font-family: inherit !important; font-weight: 600 !important; font-size: 16px !important; line-height: 1 !important; padding: 0 8px 0 12px !important; min-width: 140px; }
.hh-alanlar.uc .hh-girdi.secmeli select { min-width: 0; }
.hh-sonuc.hh-liste strong { font-size: clamp(22px, 2.4vw, 28px); white-space: normal; line-height: 1.2; }
.hh-sonuc.hh-liste strong a { color: var(--kahve); text-decoration: underline; text-decoration-color: var(--sari); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.hh-sonuc.hh-liste { flex-wrap: wrap; row-gap: 4px; }
@media (max-width: 860px) {
  .hh-alanlar.uc { display: grid; grid-template-columns: 1fr 1fr; }
  .hh-alanlar.uc .hh-alan:last-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .hh-kutu > .hh-sekmeler { margin: 0 -16px 16px; }
  .hh-kutu > .hh-sekmeler button { flex-direction: column; gap: 6px; padding: 12px 6px; font-size: 12.5px; text-align: center; }
  .hh-no { width: 22px; height: 22px; font-size: 12px; }
  .hh-alanlar { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .hh-alanlar .hh-girdi, .hh-alanlar .hh-girdi select { width: 100%; }
}
/* Irk sekmesi: üç seçim üst satırda, sonuç ve düğme alt satırda */
#hh-irk.hh-panel { grid-template-columns: 1fr auto; }
#hh-irk .hh-alanlar { grid-column: 1 / -1; }
#hh-irk .hh-sonuc { border-left: 0; padding-left: 0; border-top: 1px solid var(--cizgi); padding-top: 14px; }
#hh-irk .dugme { align-self: end; }
@media (max-width: 860px) { #hh-irk.hh-panel { grid-template-columns: 1fr; } }

/* ================================================================ Alt bilgi (yeni) */
.alt { padding: 56px 0 26px; margin-top: 56px; }
.alt .kap { display: block; }
.alt-ust { display: grid; grid-template-columns: auto 1fr; gap: 28px 56px; align-items: center; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.12); }

.alt-ust-sag p { margin: 0 0 14px; font-size: 16px; color: rgba(255,255,255,.8); max-width: 460px; }
.alt-kisayol { display: flex; flex-wrap: wrap; gap: 10px; }
.alt-ara { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; font: inherit; font-size: 15px; font-weight: 700; color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.5); border-radius: 4px; cursor: pointer; transition: background .15s, color .15s; }
.alt-ara svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.alt-ara:hover { background: #fff; color: var(--kahve); }
.alt .alt-acil { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; font-size: 15px; font-weight: 700; color: #fff; background: #b5453c; border-radius: 4px; text-decoration: none; }
.alt .alt-acil:hover { background: #8f2f27; color: #fff; }
.alt-acil-nokta { width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.7); animation: acil-nabiz 1.8s ease-out infinite; }
@keyframes acil-nabiz { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.6); } 70% { box-shadow: 0 0 0 8px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }

/* Sütunlar */
.alt-sutunlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding: 34px 0 30px; }
.alt-baslik { font: 600 13px/1.2 "Montserrat", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--sari); margin: 0 0 14px; }
.alt-sutun ul { list-style: none; margin: 0; padding: 0; }
.alt-sutun li { margin-bottom: 9px; }
.alt-sutun a { color: rgba(255,255,255,.85); text-decoration: none; font-size: 15px; }
.alt-sutun a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--sari); text-underline-offset: 3px; }
.alt-sutun .alt-tumu { margin-top: 14px; }
.alt-sutun .alt-tumu a { color: var(--sari); font-weight: 700; }

.alt-alt { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 18px; }
.alt .alt-alt .telif { border: 0; padding: 0; margin: 0; font-size: 13.5px; color: rgba(255,255,255,.6); }
.alt .alt-basa { font-size: 13.5px; font-weight: 700; color: rgba(255,255,255,.8); text-decoration: none; }
.alt .alt-basa:hover { color: var(--sari); }

@media (max-width: 900px) {
  .alt-ust { grid-template-columns: 1fr; gap: 22px; }
  .alt-sutunlar { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
}
@media (max-width: 480px) {
  .alt { padding-top: 40px; }
    .alt-kisayol > * { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .alt-acil-nokta { animation: none !important; } }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.alt-ust .logo { margin: 0; font-size: 26px; }
.alt-ust .logo img { width: 40px; height: 40px; }


/* Alt satırdaki "cat lover" işareti: telif ile "Başa dön" arasında, yazı boyutunda */
.alt-catlover { display: block; height: 34px; width: auto; opacity: .9; }
@media (max-width: 640px) { .alt-alt { justify-content: center; text-align: center; } .alt-alt .telif { width: 100%; } }

/* ================================================================ Veteriner ücreti hesaplama */
.ucret-araci { padding: 22px; }
.ua-kaynak { margin: 0 0 16px; font-size: 13.5px; color: var(--soluk); }
.ua-paketler { margin-bottom: 18px; }
.ua-paketler .etiket { display: block; font-size: 13px; font-weight: 700; color: var(--soluk); margin-bottom: 8px; }
.ua-paket-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.ua-paket { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; font: inherit; text-align: left; color: var(--kahve); background: var(--kart); border: 1px solid var(--kahve); border-radius: 4px; cursor: pointer; }
.ua-paket span { font-weight: 700; font-size: 14px; line-height: 1.25; }
.ua-paket small { font-size: 12.5px; color: var(--soluk); }
.ua-paket:hover { background: var(--krem); }
.ua-paket[aria-pressed="true"] { background: var(--kahve); color: #fff; }
.ua-paket[aria-pressed="true"] small { color: var(--sari); }
.ua-paket-not { min-height: 1.4em; margin: 8px 0 0; font-size: 14px; color: var(--metin); }
.ua-duzen { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.ua-liste input[type="search"] { margin-bottom: 8px; }
.ua-grup h2 { margin: 18px 0 6px; font-size: 16px; }
.arac h2.arac-alt { font-size: 19px; line-height: 1.3; margin-bottom: 10px; }
.ua-kalemler { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cizgi); }
.ua-kalem { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--cizgi); }
.ua-kalem[hidden] { display: none; }
.ua-kalem label { flex: 1; display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 15px; line-height: 1.35; margin: 0; }
.ua-kalem input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--kahve); }
.ua-kalem.secili { background: #fffaf0; }
.ua-kalem.secili .ua-ad { font-weight: 700; color: var(--kahve); }
.ua-fiyat { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--kahve); font-size: 14.5px; }
.ua-adet { display: inline-flex; align-items: center; border: 1px solid var(--kahve); border-radius: 4px; }
.ua-adet[hidden] { display: none; }
.ua-adet button { width: 28px; height: 28px; font: inherit; font-weight: 700; color: var(--kahve); background: transparent; border: 0; cursor: pointer; }
.ua-adet button:hover { background: var(--krem); }
.ua-adet-sayi { min-width: 22px; text-align: center; font-weight: 700; font-size: 14px; }
.ua-bos { color: var(--soluk); margin-top: 12px; }
.ua-ozet { position: sticky; top: 86px; border: 1px solid var(--kahve); border-radius: 6px; padding: 16px 18px; background: var(--kart); }
.ua-ozet h2 { margin: 0 0 10px; font-size: 20px; }
.ua-secilen { list-style: none; margin: 0 0 12px; padding: 0; max-height: 40vh; overflow-y: auto; }
.ua-secilen li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--cizgi); font-size: 14px; }
.ua-secilen li span:last-child { flex: none; font-variant-numeric: tabular-nums; }
.ua-secilen .ua-yok { color: var(--soluk); border: 0; }
.ua-toplam { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 0; border-top: 2px solid var(--kahve); }
.ua-toplam span { font-weight: 700; font-size: 14px; }
.ua-toplam strong { font: 600 30px/1.1 var(--serif); color: var(--kahve); font-variant-numeric: tabular-nums; }
.ua-not { font-size: 12.5px; color: var(--soluk); margin: 0 0 4px; }
.ua-ozet .dugme { margin-top: 8px; padding: 10px 18px; min-height: 42px; font-size: 15px; }
@media (max-width: 860px) {
  .ua-duzen { grid-template-columns: 1fr; }
  .ua-ozet { position: sticky; bottom: 0; top: auto; z-index: 5; box-shadow: 0 -8px 24px rgba(29,25,20,.12); padding: 12px 14px; }
  .ua-ozet h2, .ua-secilen, .ua-not { display: none; }
  .ua-ozet .oyun-dugmeler { justify-content: flex-end; }
  .ua-toplam { border-top: 0; padding: 0; }
  .ua-toplam strong { font-size: 24px; }
}
@media (max-width: 480px) { .ucret-araci { padding: 16px 12px; } .ua-paket-izgara { grid-template-columns: 1fr 1fr; } }
@media print {
  body:has(#ucret-araci) .ust, body:has(#ucret-araci) .alt, body:has(#ucret-araci) .yol, body:has(#ucret-araci) article.icerik,
  body:has(#ucret-araci) .ua-paketler, body:has(#ucret-araci) .ua-liste, body:has(#ucret-araci) .ua-ozet .oyun-dugmeler,
  body:has(#ucret-araci) .arama-katman { display: none !important; }
  body:has(#ucret-araci) .ua-duzen { display: block; }
  body:has(#ucret-araci) .ua-ozet { position: static; border: 0; box-shadow: none; }
  body:has(#ucret-araci) .ua-ozet h2, body:has(#ucret-araci) .ua-secilen, body:has(#ucret-araci) .ua-not { display: block; }
  body:has(#ucret-araci) .ua-secilen { max-height: none; }
  body:has(#ucret-araci) .arac { border: 0; }
}

/* ================================================================ Üzerine gelince okunurluk
   Genel "a:hover" kuralı bağlantı olan düğmelerin yazı rengini ezmesin. */
a.dugme:hover, a.dugme:focus-visible { color: #fff; }
a.dugme.ikincil:hover, a.dugme.ikincil:focus-visible { color: #fff; }
.kutuphane-yazi .hizli-arac:hover { color: var(--kahve); }

/* ================================================================ Irk fotoğrafları */
.irk-karti.foto-var { padding-top: 0; overflow: hidden; }
.izgara > .kart.irk-karti.foto-var::before { content: none; }
.irk-foto { display: block; width: calc(100% + 44px); max-width: none; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin: 0 -22px 12px; background: var(--krem); }
a.irk-karti:hover .irk-foto { filter: saturate(1.08); }
.irk-kapak { margin: 18px 0 22px; }
.irk-kapak img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--kahve); border-radius: 4px; background: var(--krem); }
.irk-kapak figcaption { margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--soluk); }
.irk-kapak figcaption a { color: inherit; }
@media (min-width: 761px) { .irk-kapak img { max-height: 420px; } }

/* Blog yazılarındaki fotoğraflı ırk kartı: [[irk:slug]] */
.irk-blok { margin: 6px 0 24px; }
.irk-blok > a { display: grid; grid-template-columns: 200px 1fr; align-items: center; gap: 16px; border: 1px solid var(--kahve); border-radius: 4px; overflow: hidden; background: var(--kart); color: var(--metin); text-decoration: none; }
.irk-blok > a:hover { background: #fff; color: var(--metin); }
.irk-blok img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.irk-blok strong { display: block; font-family: var(--serif); font-size: 20px; color: var(--kahve); }
.irk-blok small { display: block; font-size: 14px; color: var(--soluk); line-height: 1.45; margin-top: 2px; }
.irk-blok .git { display: inline-block; margin-top: 8px; font-weight: 700; font-size: 14px; color: var(--kahve); }
.irk-blok figcaption { margin-top: 4px; font-size: 11.5px; color: var(--soluk); }
.irk-blok figcaption a { color: inherit; }
@media (max-width: 520px) { .irk-blok > a { grid-template-columns: 120px 1fr; gap: 12px; } .irk-blok strong { font-size: 17px; } .irk-blok > a > span { padding: 8px 8px 8px 0; } }

/* Kedi ismi bulucu: arşiv sayacı, tema etiketi, baş harf seçimi */
.isim-sayac { margin: -4px 0 10px; font-size: 15px; color: var(--soluk); }
.isim-sayac strong { font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--kahve); margin-right: 4px; font-variant-numeric: tabular-nums; }
.isim-tema { background: var(--sari-acik); color: var(--kahve); }
.isim-harf select { max-width: 220px; }

/* İletişim sayfası */
.iletisim-kutu { border: 1px solid var(--kahve); border-radius: 4px; background: var(--kart); padding: 18px 20px; margin: 18px 0 22px; }
.iletisim-etiket { display: block; font-size: 13px; font-weight: 700; color: var(--soluk); text-transform: uppercase; letter-spacing: .06em; }
.iletisim-eposta { display: inline-block; margin: 4px 0 6px; font-family: var(--serif); font-size: clamp(22px, 5vw, 30px); font-weight: 600; color: var(--kahve); overflow-wrap: anywhere; }
.iletisim-kutu p { margin: 0; font-size: 15px; color: var(--soluk); }

/* Paylaşım çubuğu */
.paylas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 28px 0 8px; padding: 14px 0; border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); }
.paylas-baslik { font-family: var(--serif); font-weight: 600; font-size: 17px; color: var(--kahve); margin-right: 6px; }
.paylas-dugme { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 700; color: var(--kahve); background: transparent; border: 1.5px solid var(--kahve); border-radius: 4px; cursor: pointer; text-decoration: none; }
.paylas-dugme:hover, a.paylas-dugme:hover { background: var(--kahve); color: #fff; }
.paylas-dugme[hidden] { display: none; }
.paylas-dugme.wa { background: #1f7a4d; border-color: #1f7a4d; color: #fff; }
.paylas-dugme.wa:hover, a.paylas-dugme.wa:hover { background: #155c39; border-color: #155c39; color: #fff; }
.paylas-dugme svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
@media print { .paylas { display: none; } }

/* Kedi bakım hatırlatıcısı */
.hb-sonuc { margin-top: 22px; }
.hb-liste { list-style: none; margin: 10px 0 14px; padding: 0; border-top: 1px solid var(--cizgi); }
.hb-oge { padding: 12px 0; border-bottom: 1px solid var(--cizgi); }
.hb-oge p { margin: 4px 0 6px 28px; font-size: 14px; color: var(--soluk); line-height: 1.5; }
.hb-oge.pasif p { margin-left: 0; }
.hb-oge.pasif strong { color: var(--soluk); }
.hb-sec { display: flex; align-items: flex-start; gap: 10px; margin: 0; cursor: pointer; font-size: 16px; }
.hb-sec input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--kahve); flex: none; }
.hb-sec strong { color: var(--kahve); }
.hb-siklik { display: inline-block; margin-left: 4px; font-size: 12.5px; font-weight: 700; color: var(--kahve); background: var(--sari-acik); border-radius: 3px; padding: 1px 8px; }
.hb-tarih { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 0 28px; font-size: 13.5px; font-weight: 600; color: var(--soluk); }
.hb-tarih input { width: auto; padding: 6px 8px; font-size: 14px; }
.hb-uyari { padding: 10px 14px; background: var(--sari-acik); border-radius: 4px; font-size: 14.5px; }
.hb-not { font-size: 12.5px; color: var(--soluk); margin: 10px 0 0; }
@media print { body:has(#hatirlatici) .ust, body:has(#hatirlatici) .alt, body:has(#hatirlatici) article.icerik, body:has(#hatirlatici) .alan, body:has(#hatirlatici) .oyun-dugmeler, body:has(#hatirlatici) .yol { display: none !important; } }

/* Kedi sahiplenmeye hazır mıyım? testi */
.st-soru { border: 0; border-bottom: 1px solid var(--cizgi); margin: 0; padding: 16px 0; }
.st-soru legend { font-family: var(--serif); font-weight: 600; font-size: 18px; color: var(--kahve); padding: 0; margin-bottom: 10px; line-height: 1.35; }
.st-no { font-style: italic; font-weight: 500; font-size: 14px; color: var(--soluk); margin-right: 6px; }
.st-cevaplar { display: grid; gap: 6px; }
.st-cevaplar label { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 9px 12px; border: 1px solid var(--cizgi); border-radius: 4px; cursor: pointer; font-size: 15px; background: var(--kart); }
.st-cevaplar input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--kahve); }
.st-cevaplar label:has(input:checked) { border-color: var(--kahve); background: #fffaf0; font-weight: 600; }
.st-ust { display: flex; align-items: center; gap: 18px; }
.st-puan { flex: none; text-align: center; }
.st-puan strong { display: block; font-family: var(--serif); font-size: 48px; line-height: 1; color: var(--kahve); }
.st-puan span { font-size: 13px; color: var(--soluk); }
.st-cubuk { height: 10px; background: var(--cizgi); border-radius: 5px; margin: 14px 0 6px; overflow: hidden; }
.st-cubuk i { display: block; height: 100%; background: var(--sari); }
.st-oneri-baslik { font-size: 17px; margin: 18px 0 6px; }
.st-oneriler { list-style: none; margin: 0 0 12px; padding: 0; }
.st-oneriler li { padding: 10px 0 10px 14px; border-left: 3px solid var(--sari); margin-bottom: 8px; }
.st-oneriler li.oncelik { border-left-color: #c0392b; }
.st-oneriler p { margin: 4px 0 0; font-size: 14.5px; color: var(--soluk); }

/* Kullanılabilirlik düzeni: acil veteriner kartı, mobil menüdeki acil girişi, blog derlemeleri */
.kart.kart-acil { border-color: #c0392b !important; background: #fff5f3; }
.kart.kart-acil h3 { color: #a5281b; }
.kart.kart-acil::before { content: "Acil" !important; display: inline-block; align-self: flex-start; font: 700 12px/1 var(--sans, inherit) !important; font-style: normal !important; letter-spacing: .06em; text-transform: uppercase; color: #fff !important; background: #c0392b; padding: 5px 9px; border-radius: 3px; margin-bottom: 12px !important; }
.kart.kart-acil .git { color: #a5281b; }
.menu .menu-acil { display: none; }
@media (max-width: 760px) {
  .menu .menu-acil { display: block; }
  .menu .menu-acil a { color: #a5281b !important; }
  .menu .menu-acil a::before { content: "!" !important; color: #fff !important; background: #c0392b !important; border-radius: 50%; width: 1.4em !important; height: 1.4em !important; display: inline-grid !important; place-items: center; font-style: normal !important; font-size: 14px !important; }
}
.blog-secki { margin-bottom: 8px; }

/* 404 sayfası */
.sayfa-404 { text-align: center; padding: 48px 16px 64px; }
.sayfa-404 .giris { color: var(--soluk); max-width: 520px; margin: 0 auto 18px; }
.sayfa-404-dugmeler { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sayfa-404-dugmeler .dugme { margin-top: 0; }
.sayfa-404-acil { text-align: left; margin: 28px 0 8px; text-decoration: none; }
.sayfa-404-liste { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; text-align: left; }
.sayfa-404-liste a { display: block; padding: 11px 14px; border: 1px solid var(--cizgi); border-radius: 4px; background: var(--kart); color: var(--kahve); font-weight: 600; text-decoration: none; }
.sayfa-404-liste a:hover { border-color: var(--kahve); background: #fff; color: var(--kahve); }

/* 7/24 veteriner şehir sayfaları: yerel kurumlar */
.kurum-liste { list-style: none; padding: 0; margin: 10px 0 6px; }
.kurum-liste li { padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--cizgi); border-left: 3px solid var(--kahve); border-radius: 4px; background: var(--kart); line-height: 1.55; }
.sayfa-404-acil h2 { margin: 0 0 6px; } .sayfa-404-acil p { margin: 0 0 10px; }

/* "İçeriğe geç" bağlantısı: yalnızca klavyeyle odaklanınca görünür */
.icerige-gec { position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 10px 16px; background: var(--kahve); color: #fff; font-weight: 700; border-radius: 4px; text-decoration: none; transition: top .15s; }
.icerige-gec:focus { top: 12px; color: #fff; outline: 3px solid var(--sari); outline-offset: 2px; }
#icerik:focus { outline: none; }

/* Kedi sağlık sözlüğü */
.sz-dizin { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 18px 0 8px; padding: 14px; border: 1px solid var(--cizgi); border-radius: 4px; background: var(--kart); font-size: 14px; }
.sz-terim { padding: 14px 0 6px; border-bottom: 1px solid var(--cizgi); scroll-margin-top: 80px; }
.sz-terim h3 { margin: 0 0 6px; font-size: 20px; }
.sz-diger { font-family: var(--sans, inherit); font-weight: 500; font-size: 14px; color: var(--soluk); }
.sz-acil { display: inline-block; vertical-align: middle; font: 700 11px/1 Montserrat, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #c0392b; padding: 4px 7px; border-radius: 3px; margin-right: 4px; }
.sz-etiket { margin: 8px 0 2px; font-size: 13px; font-weight: 700; color: var(--soluk); }
.sz-terim ul { margin-top: 2px; }
.sz-korunma, .sz-bag { font-size: 15px; }

/* Kedi eğitimi örnekleri: yan menü + içerik */
.eg-duzen { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 36px; align-items: start; padding-top: 24px; }
.eg-menu { position: sticky; top: 86px; background: var(--kahve); border-radius: 6px; padding: 14px 8px 10px; }
.eg-menu summary { font-family: var(--serif); font-weight: 600; font-size: 18px; color: #fff; padding: 2px 10px 10px; cursor: pointer; list-style: none; }
.eg-menu summary::-webkit-details-marker { display: none; }
.eg-menu ul { list-style: none; margin: 0; padding: 0; }
.eg-menu a { display: block; padding: 8px 12px; border-radius: 4px; color: #f3ead9; font-weight: 600; font-size: 15px; line-height: 1.3; text-decoration: none; }
.eg-menu a:hover { background: rgba(255,255,255,.1); color: #fff; }
.eg-menu a[aria-current="page"] { color: var(--sari); background: rgba(255,255,255,.06); }
.eg-menu .eg-tumu a { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: #cbbfa9; }
.eg-dis { font-size: 12px; opacity: .7; }
.eg-icerik { max-width: 760px; }
.eg-bilgi { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; }
.eg-bilgi div { border: 1px solid var(--cizgi); border-radius: 4px; background: var(--kart); padding: 8px 14px; }
.eg-bilgi dt { font-size: 12px; font-weight: 700; color: var(--soluk); text-transform: uppercase; letter-spacing: .05em; }
.eg-bilgi dd { margin: 2px 0 0; font-weight: 700; color: var(--kahve); }
.eg-adimlar { counter-reset: adim; list-style: none; padding: 0; }
.eg-adimlar li { counter-increment: adim; position: relative; padding: 12px 0 12px 52px; border-bottom: 1px solid var(--cizgi); }
.eg-adimlar li::before { content: counter(adim); position: absolute; left: 0; top: 12px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--sari); color: var(--kahve); font-family: var(--serif); font-weight: 700; }
.eg-adimlar strong { color: var(--kahve); font-size: 17px; }
.eg-adimlar p { margin: 4px 0 0; }
.eg-gezinme { display: flex; justify-content: space-between; gap: 12px; margin: 28px 0 8px; padding-top: 14px; border-top: 1px solid var(--cizgi); font-weight: 700; }
.eg-izgara { margin-top: 10px; }
@media (max-width: 900px) {
  .eg-duzen { grid-template-columns: 1fr; gap: 14px; padding-top: 12px; }
  .eg-menu { position: static; }
  .eg-menu summary::after { content: " ▾"; color: var(--sari); }
}
/* Eğitim menüsündeki açılır kutu, soru-cevap kutularının genel stilinden etkilenmesin */
.eg-menu details, .eg-menu details[open] { background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; }
.eg-menu details summary, .eg-menu details[open] summary { color: #fff; background: transparent; border: 0; margin: 0; padding: 2px 10px 10px; font-family: var(--serif); font-weight: 600; font-size: 18px; }

/* Kedim: üst menüdeki kedi profili düğmesi */
.kedim-dugme { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px 0 10px; margin-left: 6px; font-size: 14px; font-weight: 600; color: var(--kahve); text-decoration: none; border: 1px solid var(--kahve); border-radius: 4px; max-width: 150px; transition: background .15s, color .15s; }
.kedim-dugme svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; flex: none; }
.kedim-dugme-yazi { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kedim-dugme.dolu { background: var(--sari); border-color: var(--sari); }
.kedim-dugme:hover { background: var(--kahve); border-color: var(--kahve); color: #fff; }
.kedim-dugme:focus-visible { outline: 3px solid var(--sari); outline-offset: 2px; }
@media (max-width: 760px) {
  .kedim-dugme { order: -2; width: 46px; height: 46px; padding: 0; justify-content: center; margin-left: 0; }
  .kedim-dugme svg { width: 21px; height: 21px; }
  .kedim-dugme-yazi { display: none; }
}
/* Araç formlarının üstündeki profil şeridi */
.kedim-serit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 14px; padding: 10px 14px; font-size: 14.5px; line-height: 1.45; color: var(--kahve); background: var(--sari-acik); border-radius: 10px; }
.kedim-serit a { font-weight: 700; margin-left: auto; color: var(--kahve); }
.kedim-serit-ikon { font-size: 18px; }
/* Kedim sayfası */
.kedim-gizlilik { font-size: 14px; color: var(--soluk); margin-top: -6px; }
.kedim-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; }
.kedim-satir label { margin: 0; font-weight: 600; }
.kedim-satir input[type="number"] { width: 90px; }
.kedim-dugmeler { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.kedim-pano { margin: 8px 0 32px; }
.kedim-baslik { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px 20px; background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--radius); box-shadow: var(--golge); }
.kedim-baslik > div { flex: 1; min-width: 160px; }
.kedim-baslik h2 { margin: 0; font-size: 28px; }
.kedim-baslik p { margin: 2px 0 0; color: var(--soluk); }
.kedim-avatar { display: grid; place-items: center; width: 58px; height: 58px; font-size: 32px; background: var(--sari-acik); border-radius: 50%; }
.kedim-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 14px; }
.kedim-kart { padding: 16px 18px; background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--radius); }
.kedim-kart h3 { margin: 0 0 6px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--turuncu); font-family: inherit; }
.kedim-kart p { margin: 0 0 10px; font-size: 15px; line-height: 1.55; }
.kedim-kart a { font-weight: 700; font-size: 14.5px; }
.kedim-buyuk { font-family: var(--serif); font-size: 24px !important; font-weight: 600; color: var(--kahve); line-height: 1.25 !important; }
.kedim-not { font-size: 13.5px !important; color: var(--soluk); margin-top: 8px !important; }
.kedim-dogum { background: var(--sari-acik); border-color: var(--sari-acik); }
.kedim-okuma { margin-top: 14px; padding: 16px 20px; background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--radius); }
.kedim-okuma h3 { margin: 0 0 10px; }
.kedim-okuma ul { margin: 10px 0 0; }
.kedim-seri { display: block; padding: 12px 16px; background: var(--kahve); color: #fff; border-radius: 12px; text-decoration: none; }
.kedim-seri span { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--sari); }
.kedim-seri strong { display: block; font-family: var(--serif); font-size: 19px; }
.kedim-seri em { font-style: normal; font-size: 14px; font-weight: 700; }
.kedim-seri:hover { color: #fff; background: #000; }
.kedim-sil { margin: 10px 0 0; text-align: right; }
.metin-dugme { font: inherit; font-size: 14px; color: var(--soluk); background: none; border: 0; padding: 4px; text-decoration: underline; cursor: pointer; }
.metin-dugme:hover { color: #b3261e; }
/* Okuma serileri */
.seri-rozet { margin: -6px 0 14px; }
.seri-rozet a { display: inline-block; font-size: 13.5px; font-weight: 700; color: var(--kahve); background: var(--sari-acik); padding: 4px 12px; border-radius: 999px; text-decoration: none; }
.seri-rozet a:hover { background: var(--sari); }
.seri-kutusu { margin: 40px 0 8px; padding: 22px 24px; background: var(--kart); border: 2px solid var(--sari); border-radius: var(--radius); }
.seri-etiket { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--turuncu); }
.seri-kutusu h2 { margin: 4px 0 10px; }
.seri-ilerleme { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 14px; color: var(--soluk); }
.seri-cubuk { flex: 0 0 140px; height: 8px; background: var(--cizgi); border-radius: 99px; overflow: hidden; }
.seri-cubuk i { display: block; width: 0; height: 100%; background: var(--yesil); transition: width .4s; }
.seri-liste { margin: 0 0 18px; padding-left: 0; list-style: none; counter-reset: seri; }
.seri-liste li { counter-increment: seri; position: relative; padding: 7px 0 7px 38px; border-bottom: 1px dashed var(--cizgi); line-height: 1.4; }
.seri-liste li::before { content: counter(seri); position: absolute; left: 0; top: 6px; width: 26px; height: 26px; display: grid; place-items: center; font-size: 13px; font-weight: 700; border-radius: 50%; background: var(--krem); border: 1px solid var(--cizgi); color: var(--kahve); }
.seri-liste li.okundu::before { content: "✓"; background: var(--yesil); border-color: var(--yesil); color: #fff; }
.seri-liste li.simdiki span { font-weight: 800; color: var(--kahve); }
.seri-liste li.simdiki::before { background: var(--sari); border-color: var(--sari); }
.seri-son { margin: 0 0 10px; }
.seri-sonraki { white-space: normal; text-align: left; }
.seri-giris { color: var(--soluk); margin-top: -8px; }
/* Araç sayfalarında "Sonraki adım" kartları */
.sonraki-adim { margin: 36px 0 8px; }
.okuma-izgara { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.okuma-karti h3 { font-size: 17px; margin: 4px 0 8px; }
.okuma-tur { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--turuncu); }
.kedim-serit > span:nth-child(2) { flex: 1 1 220px; }
.kedim-avatar { overflow: hidden; }
.kedim-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Kedi kimlik kartı */
.kk-duzen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; margin: 18px 0 32px; }
.kk-form .alan + .alan { margin-top: 16px; }
.kk-form input[type="file"] { font: inherit; font-size: 14px; max-width: 100%; }
.kk-form select, .kk-form input[type="text"], .kk-form input[type="date"] { width: 100%; }
.kk-kaydet { display: flex; gap: 8px; align-items: flex-start; margin-top: 18px; font-size: 14px; color: var(--soluk); font-weight: 500; }
.kk-onizleme { position: sticky; top: 84px; }
.kk-onizleme canvas { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: var(--golge); background: var(--kart); }
.kk-dugmeler { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.kk-durum { font-size: 14px; color: var(--yesil); font-weight: 600; min-height: 1.5em; }
@media (max-width: 860px) {
  .kk-duzen { grid-template-columns: minmax(0, 1fr); }
  .kk-onizleme { position: static; order: -1; }
}
/* Kedi karakter testi */
.kt-soru { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.kt-soru legend { font-weight: 800; color: var(--kahve); font-size: 16.5px; margin-bottom: 10px; padding: 0; line-height: 1.4; }
.kt-no { display: inline-block; font-size: 12px; font-weight: 700; color: var(--turuncu); background: var(--sari-acik); border-radius: 99px; padding: 1px 8px; margin-right: 4px; vertical-align: 2px; }
.kt-sonuc { margin: 22px 0 32px; padding: 24px; background: var(--kart); border: 2px solid var(--sari); border-radius: var(--radius); box-shadow: var(--golge); }
.kt-sonuc:focus { outline: none; }
.kt-sonuc-ust { display: flex; align-items: center; gap: 16px; }
.kt-ikon { display: grid; place-items: center; flex: none; width: 74px; height: 74px; font-size: 40px; background: var(--sari-acik); border-radius: 50%; }
.kt-etiket { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--turuncu); }
.kt-sonuc h2 { margin: 2px 0 0; }
.kt-tanim { font-size: 17px; margin: 16px 0 10px; }
.kt-maddeler li { margin-bottom: 6px; }
.kt-ikinci { color: var(--soluk); }
.kt-dugmeler { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 12px; }
.kt-okuma { font-size: 15px; }
.kt-tip { padding: 14px 18px; margin-bottom: 12px; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; }
.kt-tip h3 { margin: 0 0 4px; font-size: 19px; }
.kt-tip p { margin: 0; font-size: 15px; }
/* Kedim sağlık günlüğü */
.kedim-gunluk { margin-top: 14px; padding: 18px 20px; background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--radius); }
.kedim-gunluk h3 { margin: 0 0 6px; }
.gunluk-bolum { padding: 12px 0; border-top: 1px dashed var(--cizgi); }
.gunluk-bolum h4 { margin: 0 0 8px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--turuncu); font-family: inherit; }
.kilo-grafik { display: block; width: 100%; height: auto; margin: 4px 0 10px; }
.kilo-grafik .eksen { stroke: var(--cizgi); stroke-width: 2; }
.kilo-grafik .cizgi { fill: none; stroke: var(--turuncu); stroke-width: 3; stroke-linejoin: round; }
.kilo-grafik circle { fill: var(--kart); stroke: var(--turuncu); stroke-width: 3; }
.kilo-grafik text { font-size: 15px; fill: var(--soluk); font-family: inherit; }
.gunluk-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 10px 0; }
.gunluk-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; color: var(--kahve); flex: 1 1 130px; min-width: 0; }
.gunluk-form label.genis { flex: 2 1 220px; }
.gunluk-form input, .gunluk-form select { width: 100%; min-width: 0; }
.gunluk-liste, .gunluk-ozet { list-style: none; padding: 0; margin: 8px 0; }
.gunluk-liste li, .gunluk-ozet li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 6px 0; border-bottom: 1px solid var(--cizgi); font-size: 14.5px; }
.gunluk-liste li span, .gunluk-ozet li span { color: var(--soluk); min-width: 120px; }
.gunluk-liste li strong { flex: 1; font-weight: 600; color: var(--kahve); }
.gunluk-ozet li strong { color: var(--kahve); }
.gunluk-yedek { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--cizgi); }
.gunluk-yedek .kedim-not { flex: 1 1 100%; margin: 0 !important; }
.km-yedek-yukle { cursor: pointer; }
.km-takvim { display: block; margin-top: 8px; padding-left: 0; text-decoration: none; font-weight: 700; color: var(--kahve); }
/* Uygulama (PWA) */
.uygulama-serit { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 60; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--kahve); color: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); animation: seritGel .3s ease-out; }
.uygulama-serit img { border-radius: 10px; flex: none; }
.uygulama-serit div { flex: 1; min-width: 0; line-height: 1.3; }
.uygulama-serit strong { display: block; font-size: 14px; }
.uygulama-serit span { display: block; font-size: 12.5px; opacity: .8; }
.uygulama-serit .dugme { padding: 8px 14px; font-size: 14px; flex: none; }
.uygulama-serit-kapat { flex: none; width: 32px; height: 32px; font-size: 22px; line-height: 1; color: #fff; background: transparent; border: 0; cursor: pointer; opacity: .75; }
@keyframes seritGel { from { transform: translateY(120%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .uygulama-serit { animation: none; } }
.uygulama-kutu { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 18px 20px; margin: 8px 0 28px; background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--radius); box-shadow: var(--golge); }
.uygulama-kutu img { border-radius: 22px; }
.uygulama-kutu strong { font-family: var(--serif); font-size: 24px; color: var(--kahve); }
.uygulama-kutu p { margin: 2px 0 10px; color: var(--soluk); }
.uygulama-kurulu { color: var(--yesil) !important; font-weight: 700; }
/* Bakıcı talimatı ve acil durum kartı */
.kb-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 18px; margin-bottom: 18px; }
.kb-izgara .alan input, .kb-izgara .alan select, .kb-form textarea { width: 100%; }
.kb-form textarea { font: inherit; padding: 10px 12px; border: 2px solid var(--cizgi); border-radius: 12px; background: var(--krem); resize: vertical; }
.kb-form .alan + .alan { margin-top: 14px; }
.kb-form .arac-baslik { margin-top: 6px; }
.kb-isaretler { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; }
.kb-isaret { display: flex !important; gap: 8px; align-items: flex-start; font-weight: 500 !important; font-size: 14.5px !important; color: var(--metin) !important; }
.kb-form > .dugme { margin-top: 18px; }
.kb-cikti { margin: 24px 0; }
.kb-sayfa { padding: 26px 28px; background: #fff; border: 1px solid var(--cizgi); border-radius: var(--radius); box-shadow: var(--golge); }
.kb-ust { display: flex; align-items: center; gap: 16px; padding-bottom: 12px; border-bottom: 3px solid var(--sari); }
.kb-ust h2 { margin: 0; font-size: 34px; }
.kb-ust p { margin: 2px 0 0; color: var(--soluk); }
.kb-foto { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.kb-etiket { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--turuncu); }
.kb-sayfa h3 { margin: 20px 0 8px; font-size: 19px; }
.kb-liste { list-style: none; padding: 0; margin: 0; }
.kb-liste li { display: flex; flex-wrap: wrap; gap: 2px 14px; padding: 6px 0; border-bottom: 1px solid var(--cizgi); }
.kb-liste li span { min-width: 140px; color: var(--soluk); font-size: 14.5px; }
.kb-liste li strong { flex: 1; font-weight: 600; color: var(--kahve); }
.kb-vurgu { padding: 10px 14px; background: var(--sari-acik); border-radius: 10px; font-weight: 600; }
.kb-acil li { margin-bottom: 4px; }
.kb-acil li::marker { color: #c62828; }
.kb-alt { margin: 18px 0 0; font-size: 13px; color: var(--soluk); text-align: right; }
.kb-kart { margin: 28px 0; }
.kb-kart canvas { display: block; width: min(100%, 360px); height: auto; border-radius: 18px; box-shadow: var(--golge); }
@media print {
  .ust, .alt, .icerige-gec, .paylas, .uygulama-serit, .kedim-serit, .kb-dugmeler, .kk-durum { display: none !important; }
  main .kap:has(#kb-cikti) > *:not(#kb-cikti) { display: none !important; }
  main .kap:has(#eg-sonuc:not([hidden])) > *:not(#eg-sonuc) { display: none !important; }
  .kt-dugmeler { display: none !important; }
  body { background: #fff; }
  .kb-sayfa { border: 0; box-shadow: none; padding: 0; }
}
/* Kedi beden dili çözücü */
.bd-grup { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.bd-grup legend { font-weight: 800; color: var(--kahve); font-size: 16px; margin-bottom: 8px; padding: 0; }
.bd-grup .secim label { font-size: 14px; padding: 8px 13px; }
.bd-sonuc { margin: 18px 0 32px; padding: 22px 24px; background: var(--kart); border: 2px solid var(--sari); border-radius: var(--radius); box-shadow: var(--golge); }
.bd-bekle { margin: 0; color: var(--soluk); }
.bd-oneri { font-size: 16.5px; margin: 14px 0; }
.bd-isaretler { list-style: none; padding: 0; margin: 0; }
.bd-isaretler li { padding: 7px 0; border-bottom: 1px solid var(--cizgi); font-size: 15px; }
.bd-isaretler li span { display: block; font-weight: 700; color: var(--kahve); font-size: 13.5px; }
/* Yıllık karne */
.kedim-karne { background: var(--sari-acik); border-color: var(--sari-acik); }
.karne-kutu { margin-top: 14px; padding: 18px; background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--radius); }
.karne-tuval { display: block; width: min(100%, 420px); height: auto; margin: 0 auto; border-radius: 16px; box-shadow: var(--golge); }
.karne-kutu .kk-dugmeler { justify-content: center; }
/* Bugünün oyunları kutusu */
.gunluk-oyunlar { margin: 18px 0 22px; padding: 14px 16px; background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--radius); box-shadow: var(--golge); max-width: 560px; }
.go-ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-bottom: 8px; }
.go-ust strong { font-family: var(--serif); font-size: 19px; color: var(--kahve); }
.go-seri { font-size: 14px; font-weight: 700; color: var(--turuncu); }
.go-sonuk { color: var(--soluk); font-weight: 600; }
.go-oyun { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-top: 1px solid var(--cizgi); color: var(--kahve); text-decoration: none; font-weight: 600; }
.go-oyun > span:nth-child(2) { flex: 1; }
.go-oyun small { color: var(--soluk); font-weight: 500; }
.go-oyun b { font-size: 13.5px; padding: 3px 10px; border-radius: 99px; background: var(--krem); color: var(--soluk); white-space: nowrap; }
.go-oyun b.go-tamam { background: #e4f5ec; color: var(--yesil); }
.go-oyun b.go-devam { background: var(--sari-acik); color: var(--kahve); }
.go-oyun b.go-bekliyor { background: var(--sari); color: var(--kahve); }
.go-oyun:hover { background: var(--krem); }
/* Mevsim uyarısı */
.mevsim { position: relative; display: flex; gap: 14px; align-items: flex-start; margin: 26px 0 6px; padding: 16px 44px 14px 18px; background: var(--kart); border: 1px solid var(--cizgi); border-left: 5px solid var(--turuncu); border-radius: 14px; box-shadow: var(--golge); }
.mevsim-ikon { font-size: 30px; line-height: 1; flex: none; }
.mevsim strong { display: block; font-family: var(--serif); font-size: 19px; color: var(--kahve); line-height: 1.3; }
.mevsim p { margin: 4px 0 0; font-size: 15px; }
.mevsim-linkler { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.mevsim-linkler a { font-weight: 700; font-size: 14.5px; }
.mevsim-kapat { position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; font-size: 22px; line-height: 1; color: var(--soluk); background: none; border: 0; cursor: pointer; }
.kedim .mevsim { margin-top: 0; margin-bottom: 16px; }
/* Ev güvenliği testi */
.eg-oda { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.eg-oda legend { font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--kahve); padding: 0; margin-bottom: 6px; }
.eg-soru { padding: 10px 0; border-bottom: 1px dashed var(--cizgi); }
.eg-soru p { margin: 0 0 8px; font-weight: 600; color: var(--kahve); line-height: 1.45; }
.eg-soru .secim label { padding: 6px 16px; font-size: 14.5px; }
.eg-ilerleme { color: var(--soluk); font-size: 14px; }
.eg-sonuc { margin: 22px 0 32px; padding: 24px; background: var(--kart); border: 2px solid var(--sari); border-radius: var(--radius); box-shadow: var(--golge); }
.eg-sonuc:focus { outline: none; }
.eg-liste { padding-left: 22px; }
.eg-liste li { margin-bottom: 12px; line-height: 1.5; }
.eg-rozet { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 1px 8px; border-radius: 99px; margin-right: 6px; vertical-align: 1px; }
.eg-yuksek .eg-rozet { background: #fde2e1; color: #b3261e; }
.eg-orta .eg-rozet { background: var(--sari-acik); color: var(--kahve); }
.eg-dusuk .eg-rozet { background: #e4f5ec; color: var(--yesil); }
.eg-oda-ad { display: block; font-size: 13px; font-weight: 700; color: var(--soluk); }
/* Kedim: yaklaşan uygulamalar ve albüm */
.gunluk-yaklasan { margin: 10px 0; padding: 12px 14px; background: var(--krem); border-radius: 12px; }
.gunluk-yaklasan > strong { display: block; margin-bottom: 4px; color: var(--kahve); }
.gunluk-yaklasan ul { list-style: none; padding: 0; margin: 0; }
.gunluk-yaklasan li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 5px 0; border-bottom: 1px solid var(--cizgi); font-size: 14.5px; }
.gunluk-yaklasan li strong { font-weight: 600; color: var(--kahve); }
.gunluk-yaklasan li.yakin strong { color: var(--turuncu); }
.gunluk-yaklasan li.gecikti strong { color: #b3261e; }
.album-izgara { list-style: none; padding: 0; margin: 8px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.album-izgara li { position: relative; }
.album-izgara img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.album-izgara span { display: block; font-size: 12px; color: var(--soluk); text-align: center; margin-top: 3px; }
.album-sil { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(43,33,24,.7); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
/* Kedi isimleri: baş harf dizini */
.harf-dizini { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 22px; }
.harf-dizini a { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 6px; font-weight: 700; color: var(--kahve); text-decoration: none; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 4px; }
.harf-dizini a:hover, .harf-dizini a:focus-visible { background: var(--sari); border-color: var(--sari); }
.harf-baslik { scroll-margin-top: 80px; }
.harf-baslik small { font-family: "Montserrat", system-ui, sans-serif; font-size: 13px; font-weight: 600; color: var(--soluk); }
/* Tablet: üst menü sığsın diye Kedim düğmesi yalnızca simge, arama kısayol ipucu gizli */
@media (min-width: 761px) and (max-width: 1040px) {
  .kedim-dugme { width: 40px; padding: 0; justify-content: center; }
  .kedim-dugme-yazi { display: none; }
  .arama-dugme-yazi::after { display: none; }
  .arama-dugme { width: 40px; padding: 0; justify-content: center; }
  .arama-dugme-yazi { display: none; }
  .zil-dugme, .kedim-dugme, .arama-dugme { margin-left: 3px; }
}
/* Alt bilgi: uygulama bandı */
.alt-uygulama { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 28px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.12); }
.alt-uygulama-yazi { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.alt-uygulama-yazi img { border-radius: 11px; flex: none; }
.alt-uygulama-yazi strong { display: block; font-size: 16px; }
.alt-uygulama-yazi span { font-size: 13.5px; line-height: 1.4; opacity: .85; }
.alt-rozetler { display: flex; flex-wrap: wrap; gap: 10px; }
.uygulama-rozet { display: inline-flex; align-items: center; gap: 9px; min-width: 150px; height: 50px; padding: 0 16px 0 12px; color: #fff; background: #000; border: 1px solid #a6a6a6; border-radius: 9px; text-decoration: none; font-size: 19px; font-weight: 700; line-height: 1.05; }
.uygulama-rozet svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; flex: none; }
.uygulama-rozet small { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: .02em; opacity: .9; }
.uygulama-rozet:hover, .uygulama-rozet:focus-visible { background: #222; color: #fff; }
#android, #iphone { scroll-margin-top: 90px; }
.mevsim-alt { display: flex; align-items: center; gap: 12px; margin-top: 8px !important; }
.mevsim-sonraki { font: inherit; font-size: 13.5px; font-weight: 700; color: var(--kahve); background: var(--krem); border: 1px solid var(--cizgi); border-radius: 99px; padding: 4px 12px; cursor: pointer; }
.mevsim-sonraki:hover { background: var(--sari-acik); }
.mevsim-alt span { font-size: 12.5px; color: var(--soluk); }
/* Üst menü: bildirimler zili */
.zil-dugme { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: 6px; padding: 0; color: var(--kahve); background: transparent; border: 1px solid var(--kahve); border-radius: 4px; cursor: pointer; transition: background .15s, color .15s; }
.zil-dugme svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.zil-dugme:hover, .zil-dugme[aria-expanded="true"] { background: var(--kahve); color: #fff; }
.zil-dugme:focus-visible { outline: 3px solid var(--sari); outline-offset: 2px; }
.zil-sayi { position: absolute; top: -7px; right: -7px; min-width: 19px; height: 19px; padding: 0 5px; font-size: 11px; font-weight: 800; line-height: 19px; color: #fff; background: #c62828; border-radius: 99px; border: 2px solid var(--krem); }
.ust .kap { position: relative; }
.zil-panel { position: absolute; top: calc(100% - 4px); right: 16px; z-index: 70; width: min(400px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow: auto; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; box-shadow: 0 18px 40px rgba(43,33,24,.2); }
.zil-ust { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--kart); border-bottom: 1px solid var(--cizgi); }
.zil-ust strong { font-family: var(--serif); font-size: 19px; color: var(--kahve); }
.zil-kapat { width: 32px; height: 32px; font-size: 22px; line-height: 1; color: var(--soluk); background: none; border: 0; cursor: pointer; }
.zil-panel ul { list-style: none; margin: 0; padding: 4px 0; }
.zil-panel li a { display: grid; gap: 2px; padding: 10px 16px; color: var(--metin); text-decoration: none; border-left: 3px solid transparent; }
.zil-panel li a:hover { background: var(--krem); }
.zil-panel li.yeni a { border-left-color: var(--turuncu); background: #fffaf0; }
.zil-panel li.onemli a { background: var(--sari-acik); }
.zil-tur { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.zt-duyuru { color: #c62828; } .zt-arac { color: var(--yesil); } .zt-yazi { color: var(--turuncu); }
.zil-baslik { font-weight: 600; color: var(--kahve); line-height: 1.35; font-size: 14.5px; }
.zil-alt { display: flex; justify-content: space-between; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--cizgi); font-size: 14px; font-weight: 700; }
@media (max-width: 760px) {
  .zil-dugme { order: -3; width: 42px; height: 42px; margin-left: 0; }
  .kedim-dugme, .arama-dugme { width: 42px; height: 42px; }
  .menu-dugme { width: 42px; height: 42px; }
  .ust nav { gap: 5px; }
  .zil-panel { position: fixed; top: 64px; right: 10px; left: 10px; width: auto; max-height: calc(100vh - 80px); }
}
@media (max-width: 359px) { .logo-yazi { display: none; } }
/* Blog yazılarında "Kısaca" cevap kutusu */
.kisaca { margin: 18px 0 22px; padding: 14px 18px 14px 16px; background: var(--kart); border: 1px solid var(--cizgi); border-left: 5px solid var(--sari); border-radius: 10px; }
.kisaca strong { display: block; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--turuncu); margin-bottom: 4px; }
.kisaca p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--kahve); }