/* kubilaykenan.com ana sayfa stilleri (TR) — üretilir: kisisel/ek/css_ayir.py, elle düzenleme.
   Kaynak: kisisel/vitrin.css, maskot.css, ara.css + kisisel_site_uret.py. */
@font-face { font-family: "Cormorant Garamond"; src: url(/fontlar/CormorantGaramond-Bold.ttf); font-weight: 700; }
@font-face { font-family: "Dancing Script"; src: url(/fontlar/DancingScript-Bold.ttf); font-weight: 700; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
:root { color-scheme: light; --bg: #ffffff; --bant: #F6F1EC; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--font-sans); -webkit-text-size-adjust: 100%; }
.sayfa { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
a { color: inherit; }
/* üst çubuk */
.ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0; }
/* logo (03.11.2026, Kenan "A · Çift K"): işaret kisisel/logo/kk-favicon.svg + "Kubilay Kenan / HOCA" */
.marka { display: inline-flex; align-items: center; gap: 10px; font: 800 20px/1 var(--font-display); color: var(--heading); text-decoration: none; white-space: nowrap; }
.marka-isaret { flex: none; width: 34px; height: 34px; display: block; }
.marka span { display: grid; gap: 4px; }
.marka small { font: 600 10px/1 var(--font-sans); letter-spacing: .3em; text-transform: uppercase; color: #8A6A0E; }
.ust .marka { padding: 5px 0; margin: -5px 0; }   /* parmakla dokunma alanı ~44 px, görünüm aynı */
.ust nav { display: flex; align-items: center; gap: 18px; font-weight: 600; font-size: 15px; }
.ust nav a { color: var(--heading); text-decoration: none; padding-block: 11px; }
.ust nav a:hover { color: var(--green-dark); }
.ust nav a.dil { border: 1.5px solid var(--line); border-radius: 99px; padding: 4px 10px; font-size: 13px; letter-spacing: .04em; }
/* giriş */
.kahraman { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; align-items: center; padding: 36px 0 40px; }
.kahraman h1 { font: 800 clamp(40px, 6.4vw, 66px)/1.02 var(--font-display); color: var(--heading); margin: 16px 0 6px; letter-spacing: -.01em; }
.kahraman .lakap { font: 800 clamp(30px, 4.6vw, 46px)/1.1 var(--font-display); color: var(--green-dark); margin: 0 0 18px; }
.kahraman p.alt { font-size: 18px; color: var(--muted); max-width: 30em; margin: 0 0 24px; }
.dugmeler { display: flex; flex-wrap: wrap; gap: 10px; }
.kapak { width: 100%; height: auto; display: block; }
.kapak .navy { fill: var(--navy); } .kapak .pro { fill: var(--level-pro); } .kapak .ileri { fill: var(--level-ileri); }
.kapak .temel { fill: var(--level-temel); } .kapak .yesil { fill: var(--green); } .kapak .kes rect { fill: var(--bg); }
/* sınav sayacı */
.sinav { display: grid; grid-template-columns: .9fr 1.1fr; gap: 0; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; margin: 0 0 56px; }
.sinav[hidden] { display: none; }
.sinav .sol { background: var(--navy); color: #fff; padding: 24px 26px; display: flex; flex-direction: column; justify-content: center; }
.sinav .etiket { font: 700 13px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--vurgu-acik); }
.sinav .ad { font: 800 26px/1.15 var(--font-display); margin: 10px 0 2px; }
.sinav .tarih { color: rgba(255, 255, 255, .78); font-size: 15px; }
.sinav .sayac { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; }
.sinav .sayi { font: 800 64px/1 var(--font-display); color: var(--green); }
.sinav .birim { font: 700 18px/1.2 var(--font-display); }
.sinav .sag { padding: 22px 26px; background: #fff; }
.sinav .sag h2 { font: 800 15px/1.2 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--green-dark); margin: 0 0 12px; }
.sinav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sinav li[hidden] { display: none; }
.sinav li b { display: block; color: var(--heading); line-height: 1.3; }
.sinav li span { color: var(--muted); font-size: 14px; }
.sinav .not { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.sinav .abone { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
/* günün kelimesi */
.kelime { display: grid; grid-template-columns: .9fr 1.1fr; gap: 24px; border: 1px solid var(--line); border-left: 6px solid var(--green);
          border-radius: 22px; padding: 22px 26px; margin: 0 0 56px; background: #fff; }
.sinav + .kelime { margin-top: -36px; }
.kelime { margin-bottom: 56px; }
.kelime .etiket { font: 700 13px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--green-dark); }
.kelime .k-satir { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 8px 0 6px; }
.kelime .k-kelime { font: 800 38px/1.05 var(--font-display); color: var(--heading); text-decoration: none; }
.kelime a.k-kelime:hover { text-decoration: underline; text-decoration-color: var(--green); text-underline-offset: 5px; }
.kelime .k-dinle { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--heading); display: grid; place-items: center; cursor: pointer; }
.kelime .k-dinle:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.kelime .k-dinle svg { width: 18px; height: 18px; fill: currentColor; }
.kelime .k-dinle[hidden] { display: none; }
.kelime .k-anlam { font-size: 18px; color: var(--heading); font-weight: 600; margin: 0 0 6px; }
.kelime .k-es { margin: 0; color: var(--muted); font-size: 15px; }
.kelime .k-es span:first-child { font-weight: 700; color: var(--text); }
.kelime .k-ornek { font-style: italic; font-size: 17px; margin: 0 0 6px; color: var(--heading); }
.kelime .k-ceviri { margin: 0 0 14px; color: var(--muted); }
.kelime .not { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
/* günün sorusu */
.soru { border: 1px solid var(--line); border-left: 6px solid var(--navy); border-radius: 22px; padding: 22px 26px; margin: -36px 0 56px; background: #fff; }
.soru .q-bas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.soru .etiket { font: 700 13px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--green-dark); }
.soru .q-metin { font-size: 17px; color: var(--heading); margin: 12px 0 14px; white-space: pre-line; }
.soru .q-siklar { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.soru .q-sik { width: 100%; display: flex; gap: 12px; align-items: flex-start; text-align: left; font: 15px/1.45 var(--font-sans); color: var(--text);
               background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 14px; cursor: pointer; }
.soru .q-sik:hover:not([disabled]) { border-color: var(--green); }
.soru .q-sik b { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--green-soft); color: var(--heading); font-size: 13px; }
.soru .q-sik[disabled] { cursor: default; }
.soru .q-sik.dogru { border-color: #2E7D32; background: #EEF7EE; } .soru .q-sik.dogru b { background: #2E7D32; color: #fff; }
.soru .q-sik.yanlis { border-color: #B3261E; background: #FBEDEC; } .soru .q-sik.yanlis b { background: #B3261E; color: #fff; }
.soru .q-sonuc { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--green-wash); color: var(--text); }
.soru .q-sonuc[hidden] { display: none; }
.soru .dugmeler { margin-top: 14px; }
.soru .not { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.kelime + .soru { margin-top: -36px; }
/* erişilebilirlik: klavyeyle içeriğe geç, hareketi azalt */
.atla { position: absolute; left: 12px; top: -80px; z-index: 50; background: var(--navy); color: #fff; padding: 10px 14px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.atla:focus { top: 12px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
/* ücretsiz araçlar */
.araclar { margin: 0 0 64px; }
.arac-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.arac-liste a { display: flex; flex-direction: column; gap: 6px; height: 100%; text-decoration: none; border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; background: #fff; transition: border-color .15s, transform .15s; }
.arac-liste a:hover, .arac-liste a:focus-visible { border-color: var(--green); transform: translateY(-2px); }
.arac-liste .etiket { font: 700 12px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--green-dark); }
.arac-liste b { font: 800 22px/1.2 var(--font-display); color: var(--heading); }
.arac-liste b::after { content: " →"; color: var(--green-dark); }
.arac-liste span:last-child { color: var(--muted); font-size: 15px; }
/* bant + bölüm başı */
.bant { background: var(--bant); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 56px 0; }
.bolum-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.bolum-bas h2 { font: 800 34px/1.15 var(--font-display); color: var(--heading); margin: 0; }
.bolum-bas p { margin: 0; color: var(--muted); }
/* Well-Done kartı */
.wd { --wd-zemin: #FFF6F4; --wd-yumusak: #F9E4E7; --wd-vurgu: #A84660; --wd-metin: #2B1A1F; --wd-ikincil: #5F5A5C;
      display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; background: var(--wd-zemin);
      border-radius: 22px; padding: 24px; box-shadow: 0 10px 30px rgba(168, 70, 96, .12); color: var(--wd-metin); }
.wd img { width: 92px; height: 92px; border-radius: 21px; box-shadow: 0 6px 16px rgba(168, 70, 96, .18); }
.wd .imza { font: 700 26px/1 "Dancing Script", cursive; color: var(--wd-vurgu); }
.wd h3 { font: 700 30px/1.15 "Cormorant Garamond", Georgia, serif; margin: 2px 0 8px; }
.wd p { margin: 0 0 14px; color: var(--wd-ikincil); }
.wd .cipler { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.wd .cip { font: 700 12px/1 var(--font-sans); letter-spacing: .04em; padding: 6px 10px; border-radius: 99px; background: var(--wd-yumusak); color: var(--wd-vurgu); }
.wd .dugme { display: inline-block; padding: 12px 18px; border-radius: 99px; font-weight: 700; font-size: 15px; text-decoration: none; }
.wd .dugme.ana { background: var(--wd-vurgu); color: var(--wd-zemin); }
.wd .dugme.ikinci { background: var(--wd-yumusak); color: var(--wd-vurgu); }
/* hakkımda */
.hakkimda { padding: 8px 0 60px; }
.hk-izgara { display: grid; grid-template-columns: 1.05fr .95fr; gap: 28px; align-items: start; }
.hk-yazi p { margin: 0 0 14px; font-size: 17px; }
.hk-yazi h3, .hk-yan h3 { font: 800 15px/1.2 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--green-dark); margin: 26px 0 12px; }
.hk-yazi ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.hk-yazi li { position: relative; padding-left: 22px; }
.hk-yazi li::before { content: ""; position: absolute; left: 0; top: .62em; width: 12px; height: 5px; border-radius: 99px; background: var(--green); }
.hk-yazi .dugmeler { margin-top: 24px; }
.cipler-ada { display: flex; flex-wrap: wrap; gap: 8px; }
.zaman { list-style: none; margin: 0; padding: 0; }
.zaman li { position: relative; padding: 0 0 18px 22px; border-left: 2px solid var(--line); margin-left: 6px; }
.zaman li:last-child { padding-bottom: 0; border-left-color: transparent; }
.zaman li::before { content: ""; position: absolute; left: -8px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 3px solid var(--navy); }
.zaman li.suruyor::before { border-color: var(--green); background: var(--green); }
.zaman b { display: block; color: var(--heading); font-weight: 700; line-height: 1.3; }
.zaman .yer { display: block; color: var(--text); font-size: 15px; }
.zaman .tarih { display: block; color: var(--muted); font-size: 14px; }
.hk-yan .ada-card { padding: 22px 22px 24px; }
.hk-yan .ada-card + .ada-card { margin-top: 16px; }
.hk-yan .ada-card h3:first-child { margin-top: 0; }
.kisa { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.kisa b { display: block; color: var(--heading); line-height: 1.3; }
.kisa span { color: var(--muted); font-size: 14px; }
/* son videolar */
.icerikler, .yazilar-bolum { padding: 0 0 60px; }
.videolar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.video { display: flex; flex-direction: column; text-decoration: none; color: var(--text); border: 1px solid var(--line);
         border-radius: 18px; overflow: hidden; background: #fff; transition: transform .15s, box-shadow .15s; }
.video:hover, .video:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(61, 9, 27, .10); }
.video img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--bant); }
.video .yazi { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.video .tur { font: 700 11px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--green-dark); }
.video b { color: var(--heading); line-height: 1.3; font-size: 16px; }
.video .tarih { color: var(--muted); font-size: 13px; }
.icerikler .dugmeler { margin-top: 20px; }
/* sosyal bağlantılar */
.sosyal { display: flex; gap: 10px; margin-top: 18px; }
.sosyal a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line);
            color: var(--heading); transition: background .15s, color .15s, border-color .15s; }
.sosyal a:hover, .sosyal a:focus-visible { background: var(--navy); border-color: var(--navy); color: #fff; }
.sosyal svg { width: 20px; height: 20px; fill: currentColor; }
.ada-card--navy .sosyal { margin-top: 0; }
.ada-card--navy .sosyal a { border-color: rgba(255, 255, 255, .28); color: #fff; }
.ada-card--navy .sosyal a:hover, .ada-card--navy .sosyal a:focus-visible { background: var(--green); border-color: var(--green); color: var(--navy); }
.iletisim-sag { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ada-card--navy .ada-btn--wa { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); }
.ada-card--navy .ada-btn--wa:hover { background: #fff; color: var(--navy); }
/* iletişim */
.iletisim { padding: 56px 0 24px; }
.iletisim .ada-card--navy { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 24px 26px; }
.iletisim .ada-h { font-size: 26px; }
.iletisim p { margin: 4px 0 0; }
footer { color: var(--muted); font-size: 14px; padding: 18px 0 40px; }
@media (max-width: 860px) { .videolar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .kahraman { grid-template-columns: 1fr; padding-top: 12px; gap: 8px; }
  .kahraman .gorsel { order: -1; max-width: 360px; }
  .ust nav { gap: 14px; font-size: 14px; }
  .wd { grid-template-columns: 1fr; }
  .hk-izgara { grid-template-columns: 1fr; gap: 26px; }
  .wd img { width: 76px; height: 76px; border-radius: 17px; }
  .sinav { grid-template-columns: 1fr; }
  .kelime { grid-template-columns: 1fr; gap: 10px; padding: 20px; }
  .soru { padding: 20px; }
}
@media (max-width: 820px) {
  .ust nav a.dar-gizle { display: none; }   /* dar ekranda menü tek satır kalsın; içerikler/araçlar/iletişim sayfada aşağıda */
}
@media (max-width: 520px) {
  .sosyal { gap: 8px; flex-wrap: wrap; }
  .sosyal a { width: 40px; height: 40px; }
  .sosyal svg { width: 18px; height: 18px; }
  .videolar { grid-template-columns: 1fr 1fr; gap: 12px; }
  .video b { font-size: 14px; }
}
.yazi-govde { max-width: 720px; padding: 8px 0 40px; }
.yazi-govde h1 { font: 800 clamp(32px, 5vw, 46px)/1.1 var(--font-display); color: var(--heading); margin: 14px 0 8px; }
.yazi-govde .bilgi { color: var(--muted); font-size: 15px; margin: 0 0 26px; }
.yazi-govde h2 { font: 800 24px/1.2 var(--font-display); color: var(--heading); margin: 32px 0 10px; }
.yazi-govde p, .yazi-govde li { font-size: 17.5px; line-height: 1.7; }
.yazi-govde ul, .yazi-govde ol { padding-left: 22px; }
.yazi-govde li { margin-bottom: 6px; }
.yazi-govde a:not(.ada-btn) { color: var(--green-dark); }
.taslak-serit { background: #fff3cd; border: 1px solid #f0d58a; color: #6e5a0e; border-radius: 12px; padding: 10px 14px; font-weight: 600; margin: 8px 0 0; }
.yazi-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; max-width: 760px; }
.yazi-liste a { display: block; text-decoration: none; border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.yazi-liste a:hover { border-color: var(--green); }
.yazi-liste b { display: block; color: var(--heading); font: 800 20px/1.25 var(--font-display); }
.yazi-liste span { color: var(--muted); font-size: 15px; }
.yazi-son { border-top: 1px solid var(--line); margin-top: 34px; padding-top: 20px; }
/* danışmanlık */
.paketler { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 6px 0 30px; max-width: 860px; }
.paket { border: 1px solid var(--line); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 10px; background: #fff; }
.paket.vurgu { border-color: var(--green); box-shadow: 0 10px 28px rgba(216, 178, 41, .22); }
.paket .fiyat { font: 800 34px/1 var(--font-display); color: var(--heading); }
.paket .fiyat small { font: 600 13px/1.3 var(--font-sans); color: var(--muted); display: block; margin-top: 4px; }
.paket h3 { font: 800 20px/1.2 var(--font-display); color: var(--heading); margin: 4px 0 0; }
.paket p { margin: 0; color: var(--muted); }
.paket ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.paket .ada-btn { align-self: flex-start; }
.paket > .ada-btn, .paket .dugmeler { margin-top: auto; }
.adimlar { counter-reset: a; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.adimlar li { counter-increment: a; background: var(--bant); border-radius: 16px; padding: 18px; }
.adimlar li::before { content: counter(a); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 800; margin-bottom: 8px; }
.sss dt { font-weight: 700; color: var(--heading); margin-top: 14px; }
.sss dd { margin: 4px 0 0; }
.karar { background: #fff3cd; border-radius: 6px; padding: 0 4px; color: #6e5a0e; font-weight: 600; }
.uyari { color: var(--muted); font-size: 14px; margin-top: 24px; }
@media (max-width: 860px) { .paketler, .adimlar { grid-template-columns: 1fr; } }
/* Well-Done maskotu (maskot.svg) kıpırtıları: ana sayfa, düello ve seviye testi ortak. Kapsayıcıya .selam / .ucuyor eklenir. */
/* maskot kıpırtıları: göz kırpma, püskül, kep, el sallama, hafif süzülme */
.maskot .m-govde { transform-origin: 120px 222px; animation: m-sallan 3.2s ease-in-out infinite; }
.maskot .m-goz { transform-origin: 120px 134px; animation: m-kirp 4.6s infinite; }
.maskot .m-puskul { transform-origin: 120px 52px; animation: m-puskul 1.8s ease-in-out infinite; }
.maskot .m-kep { transform-origin: 120px 70px; transform: rotate(-6deg); }
.maskot .m-el { transform-origin: 206px 160px; }
.selam .m-el { animation: m-el 1.1s ease-in-out 1; }
.maskot .m-bebek { transition: transform .4s; }
.ucuyor .m-bebek { transform: translate(5px, -4px); }
@keyframes m-sallan { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-6px); } }
@keyframes m-kirp { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes m-puskul { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(8deg); } }
@keyframes m-el { 0% { transform: none; } 25% { transform: translate(-6px, -58px) rotate(-22deg); } 50% { transform: translate(-6px, -58px) rotate(6deg); }
                  75% { transform: translate(-6px, -58px) rotate(-18deg); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .maskot * { animation: none !important; } }
.maskot.durgun * { animation-play-state: paused !important; }   /* ekran dışı / kaydırırken (vitrin.js) */
/* tepkiler (düello, seviye testi): sevinç zıplaması, üzülme */
.sevinc .maskot { animation: m-zipla .6s cubic-bezier(.3, 1.6, .5, 1) 1; }
.uzgun .maskot .m-govde { animation: m-uzul 1s ease-in-out 1; }
@keyframes m-zipla { 0% { transform: none; } 40% { transform: translateY(-22px) scale(1.06, .96); } 100% { transform: none; } }
@keyframes m-uzul { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-9deg) translateY(4px); } 60% { transform: rotate(6deg) translateY(4px); } }
/* konuşma balonu: maskotun yanında; metin kelime kelime yazılır (data-yaz) */
.balon { position: relative; background: #fff; color: #2B1A1F; border-radius: 18px; padding: 12px 16px; box-shadow: 0 10px 26px rgba(43, 26, 31, .14);
         font: 600 15px/1.4 var(--font-sans); max-width: 280px; }
.balon::before { content: ""; position: absolute; left: -7px; top: 22px; width: 16px; height: 16px; background: inherit; transform: rotate(45deg); border-radius: 3px; }
.balon b { display: block; font: 800 12px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: #A84660; margin-bottom: 5px; }
@media (prefers-reduced-motion: reduce) { .sevinc .maskot, .uzgun .maskot .m-govde { animation: none !important; } }
/* Ana sayfa vitrini (21.10.2026, Kenan: "onlinekocunuz.com tarzında olsun"). Yalnız ana sayfaya gömülür; STIL'in üstüne yazar.
   Kalıp: yüzen ürün kartlı giriş, yaklaşan sınav kartları, Well-Done telefon dizisi + uçan maskot, dikey Shorts şeridi, sekmeli SSS. */
:root { --golge: 0 18px 50px rgba(61, 9, 27, .10); --golge-k: 0 6px 18px rgba(61, 9, 27, .08); --yari: 22px; }
.sayfa { max-width: 1160px; }
section[id], [id="icerik"] { scroll-margin-top: 84px; }
main { overflow-x: clip; }   /* giriş ışığı (.vk::before) yatay kaydırma yaratmasın */

/* üst çubuk: yapışkan, buzlu cam */
.ust-sar { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .82); backdrop-filter: saturate(1.6) blur(14px);
           -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.ust-sar.kaydi { border-bottom-color: var(--line); box-shadow: 0 6px 24px rgba(61, 9, 27, .05); }
.ust { padding: 14px 0; }
.ust nav { gap: 6px; }
.ust nav a:not(.dil):not(.ust-cta) { padding: 8px 12px; border-radius: 99px; }
.ust nav a:not(.dil):not(.ust-cta):hover { background: var(--green-wash); color: var(--heading); }
.ust-cta { background: var(--green); color: var(--on-bright) !important; padding: 10px 16px; border-radius: 12px; font-weight: 700; margin-left: 6px;
           box-shadow: 0 6px 16px rgba(216, 178, 41, .35); transition: transform .15s; }
.ust-cta:hover { transform: translateY(-1px); }

/* giriş */
.vk { position: relative; display: grid; grid-template-columns: 1.02fr .98fr; gap: 36px; align-items: center; padding: 34px 0 64px; }
.vk::before { content: ""; position: absolute; inset: -120px -40vw 0; z-index: -1;
              background: radial-gradient(60% 55% at 78% 40%, rgba(233, 184, 196, .30), transparent 70%),
                          radial-gradient(40% 40% at 10% 10%, rgba(239, 226, 171, .35), transparent 70%); }
.duyuru { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 1px solid var(--line); background: #fff;
          border-radius: 99px; font-size: 14px; color: var(--text); text-decoration: none; box-shadow: var(--golge-k); max-width: 100%; }
.duyuru b { background: var(--navy); color: #fff; font: 800 11px/1 var(--font-sans); letter-spacing: .08em; padding: 6px 9px; border-radius: 99px; }
.duyuru span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duyuru i { font-style: normal; color: var(--green-dark); font-weight: 700; }
.duyuru:hover { border-color: var(--green); }
.vk > div { min-width: 0; }   /* tek satırlık duyuru hapı sütunu genişletmesin */
.vk .ust-yazi { display: block; margin: 26px 0 0; font: 700 15px/1.2 var(--font-sans); letter-spacing: .04em; color: var(--green-dark); }
.vk h1 { font: 800 clamp(44px, 6.6vw, 80px)/.98 var(--font-display); color: var(--heading); letter-spacing: -.025em; margin: 10px 0 20px; }
.vk h1 em { font-style: normal; display: inline-block; padding-right: .06em;
            background: linear-gradient(100deg, #A84660 0%, #D8B229 95%); -webkit-background-clip: text; background-clip: text; color: transparent;
            transform: skewX(-8deg); }
.vk p.alt { font-size: 19px; line-height: 1.55; color: var(--muted); max-width: 31em; margin: 0 0 28px; }
.vk p.alt b { color: var(--heading); }
.vk .dugmeler { gap: 12px; }
.btn-koyu { display: inline-flex; align-items: center; gap: 10px; background: var(--navy); color: #fff; text-decoration: none; font-weight: 700;
            padding: 15px 22px; border-radius: 14px; box-shadow: 0 10px 24px rgba(61, 9, 27, .22); transition: transform .15s, box-shadow .15s; }
.btn-koyu:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(61, 9, 27, .28); }
.btn-acik { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: var(--heading); text-decoration: none; font-weight: 700;
            padding: 15px 22px; border-radius: 14px; border: 1.5px solid var(--line); transition: border-color .15s, transform .15s; }
.btn-acik:hover { border-color: var(--green); transform: translateY(-2px); }
.btn-koyu svg, .btn-acik svg { width: 18px; height: 18px; flex: none; }
.sayilar { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 34px; padding-top: 22px; border-top: 1px dashed var(--line); }
.sayilar div { display: flex; flex-direction: column; }
.sayilar b { font: 800 30px/1 var(--font-display); color: var(--heading); letter-spacing: -.01em; }
.sayilar b sup { font-size: 16px; color: var(--green-dark); }
.sayilar span { font-size: 14px; color: var(--muted); margin-top: 4px; }
.vk .sosyal { margin-top: 22px; }

/* giriş görseli: gezegen + yüzen kartlar */
.vg { position: relative; aspect-ratio: 1 / .98; max-width: 560px; justify-self: end; width: 100%; }
.gezegen { position: absolute; left: 50%; top: 50%; width: 62%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
           background: radial-gradient(circle at 34% 28%, #9C3B57 0%, #5A1A2E 38%, #3D091B 62%, #1F030C 100%);
           box-shadow: 0 40px 80px rgba(61, 9, 27, .35), inset -18px -24px 60px rgba(0, 0, 0, .35), inset 14px 12px 40px rgba(233, 184, 196, .25); }
.gezegen::after { content: ""; position: absolute; inset: -14%; border-radius: 50%; border: 1.5px dashed rgba(138, 106, 14, .35);
                  animation: don 60s linear infinite; }
.gezegen i { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--green); top: -9%; left: 50%; box-shadow: 0 0 0 6px rgba(216, 178, 41, .22); }
@keyframes don { to { transform: rotate(360deg); } }
.yk { position: absolute; background: #fff; border-radius: 18px; box-shadow: var(--golge); border: 1px solid rgba(231, 224, 216, .8); padding: 14px 16px;
      color: var(--text); text-decoration: none; animation: suz 7s ease-in-out infinite; }
.yk:nth-of-type(2) { animation-delay: -2s; } .yk:nth-of-type(3) { animation-delay: -4s; } .yk:nth-of-type(4) { animation-delay: -1s; }
@keyframes suz { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.yk .et { font: 800 11px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.yk-kisi { top: 4%; right: 0; display: flex; align-items: center; gap: 12px; min-width: 250px; }
.yk-kisi .mono { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--green);
                 font: 800 17px/1 var(--font-display); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--green); }
.yk-kisi b { display: block; color: var(--heading); font: 800 16px/1.2 var(--font-display); }
.yk-kisi .rozet { display: inline-block; margin-top: 4px; font: 800 10px/1 var(--font-sans); letter-spacing: .08em; padding: 4px 7px; border-radius: 6px;
                  background: var(--green-soft); color: var(--green-dark); }
.yk-kisi .yil { margin-left: auto; text-align: right; font: 800 26px/1 var(--font-display); color: var(--heading); }
.yk-kisi .yil small { display: block; font: 600 11px/1.2 var(--font-sans); color: var(--muted); }
.yk-sinav { top: 34%; left: 0; width: 250px; }
.yk-sinav .ust-s { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.yk-sinav .yakin { font: 800 10px/1 var(--font-sans); letter-spacing: .06em; padding: 4px 7px; border-radius: 6px; background: #EEF7EE; color: #2E7D32; }
.yk-sinav .n { font: 800 42px/1 var(--font-display); color: var(--heading); margin: 8px 0 2px; letter-spacing: -.02em; }
.yk-sinav .n small { font: 700 16px/1 var(--font-sans); color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.yk-sinav .ad { font-size: 13px; color: var(--muted); }
.yk-sinav .cubuk { display: flex; gap: 4px; align-items: flex-end; height: 26px; margin-top: 10px; }
.yk-sinav .cubuk span { flex: 1; border-radius: 3px; background: var(--green-soft); }
.yk-sinav .cubuk span.d { background: var(--navy); }
.yk-kelime { bottom: 6%; right: 2%; width: 250px; }
.yk-kelime .k { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 8px; }
.yk-kelime .k b { font: 800 24px/1.1 var(--font-display); color: var(--heading); }
.yk-kelime .k span { font-size: 12px; color: var(--green-dark); font-weight: 700; }
.yk-kelime p { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.yk-puan { bottom: 2%; left: 8%; display: flex; align-items: center; gap: 12px; background: var(--green); border-color: var(--green); color: var(--on-bright); }
.yk-puan .ik { width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .55); display: grid; place-items: center; }
.yk-puan .ik svg { width: 22px; height: 22px; }
.yk-puan b { display: block; font: 800 16px/1.2 var(--font-display); }
.yk-puan small { font-size: 13px; opacity: .85; }

/* bölüm başlığı (ortalanmış, etiketli) */
.vb { text-align: center; max-width: 720px; margin: 0 auto 34px; }
.vb .et { display: inline-block; font: 800 12px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--green-dark); }
.vb h2 { font: 800 clamp(32px, 4.4vw, 48px)/1.08 var(--font-display); color: var(--heading); letter-spacing: -.02em; margin: 10px 0 12px; }
.vb p { margin: 0; font-size: 18px; color: var(--muted); }
.v-bolum { padding: 72px 0; }

/* yaklaşan sınavlar */
.vs-kartlar { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.vs-kartlar[hidden] { display: none; }
.vs-kart { flex: 0 1 268px; position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--yari); padding: 22px; background: #fff;
           transition: transform .2s, box-shadow .2s, border-color .2s; min-height: 220px; }
.vs-kart:hover { transform: translateY(-4px); box-shadow: var(--golge); border-color: transparent; }
.vs-kart[hidden] { display: none; }
.vs-kart.ilk { background: var(--navy); color: #fff; border-color: var(--navy); }
.vs-kart .tur { font: 800 28px/1 var(--font-display); color: var(--heading); letter-spacing: -.01em; }
.vs-kart.ilk .tur { color: var(--green); }
.vs-kart .ad { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.vs-kart.ilk .ad, .vs-kart.ilk .bas, .vs-kart.ilk .alt-s small { color: rgba(255, 255, 255, .72); }
.vs-kart .yakin { position: absolute; top: 18px; right: 18px; font: 800 10px/1 var(--font-sans); letter-spacing: .08em; padding: 5px 8px; border-radius: 6px;
                  background: var(--green); color: var(--on-bright); }
.vs-kart .alt-s { margin-top: auto; padding-top: 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; border-top: 1px dashed var(--line); }
.vs-kart.ilk .alt-s { border-top-color: rgba(255, 255, 255, .2); }
.vs-kart .alt-s small { display: block; font: 800 10px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.vs-kart .alt-s span { display: block; font-weight: 700; margin-top: 6px; font-size: 15px; }
.vs-kart .n { font: 800 44px/1 var(--font-display); color: var(--heading); text-align: right; letter-spacing: -.02em; }
.vs-kart.ilk .n { color: #fff; }
.vs-kart .n small { display: block; font: 600 12px/1.2 var(--font-sans); color: var(--muted); letter-spacing: 0; margin-top: 2px; }
.vs-kart .bas { font-size: 13px; color: var(--muted); margin: 10px 0 0; }
.vs-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: 24px; text-align: center; }
.vs-alt p { flex-basis: 100%; margin: 4px 0 0; color: var(--muted); font-size: 14px; }

/* her gün: kelime + soru yan yana */
.gunluk { display: grid; grid-template-columns: .9fr 1.1fr; gap: 18px; align-items: start; }
.gunluk .kelime, .gunluk .soru { margin: 0 !important; grid-template-columns: 1fr; gap: 6px; border-radius: var(--yari); border: 1px solid var(--line);
                                 box-shadow: var(--golge-k); padding: 26px; }
.gunluk .kelime { border-top: 6px solid var(--green); border-left-width: 1px; }
.gunluk .soru { border-top: 6px solid var(--navy); border-left-width: 1px; }
.gunluk .kelime .k-sag { border-top: 1px dashed var(--line); padding-top: 14px; margin-top: 8px; }

/* ücretsiz araçlar */
.arac-liste { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.arac-liste a { border-radius: var(--yari); padding: 24px; gap: 8px; }
.arac-liste a:hover, .arac-liste a:focus-visible { box-shadow: var(--golge); border-color: transparent; transform: translateY(-4px); }
.arac-liste .ik { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--green-soft); color: var(--heading); margin-bottom: 8px; }
.arac-liste .ik svg { width: 24px; height: 24px; }

/* Well-Done: telefon dizisi + uçan maskot */
.wdv { --wd-zemin: #FFF6F4; --wd-yumusak: #F9E4E7; --wd-vurgu: #A84660; --wd-metin: #2B1A1F; background: linear-gradient(180deg, #fff 0%, var(--wd-zemin) 18%, var(--wd-zemin) 82%, #fff 100%);
       padding: 80px 0 72px; overflow: hidden; }
.wdv .vb .imza { font: 700 34px/1 "Dancing Script", cursive; color: var(--wd-vurgu); }
.wdv .vb h2 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; color: var(--wd-metin); letter-spacing: 0; font-size: clamp(36px, 4.8vw, 54px); }
.wdv .vb p { color: #5F5A5C; }
.wdv-sahne { position: relative; padding-top: 214px; }   /* maskot (+ etiket, ad rozeti) üstteki sayılara değmesin */
.wdv-yol { position: absolute; left: 0; right: 0; top: 98px; width: 100%; height: 120px; overflow: visible; pointer-events: none; }
.wdv-yol path { fill: none; stroke: rgba(168, 70, 96, .45); stroke-width: 2; stroke-dasharray: 2 9; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.wdv-yol .yildiz { fill: rgba(168, 70, 96, .5); }
.wdv-ray { position: relative; display: flex; justify-content: center; list-style: none; margin: 0; padding: 0 0 36px; }
.tel { position: relative; flex: 0 0 auto; width: 214px; margin: 0 -10px; cursor: pointer; transition: transform .55s cubic-bezier(.2, .8, .2, 1), filter .4s;
       transform: rotate(var(--d, 0deg)) translateY(var(--y, 0)); z-index: 1; outline: none; }
.tel:nth-child(1) { --d: -5deg; --y: 18px; } .tel:nth-child(2) { --d: 3deg; --y: 4px; } .tel:nth-child(3) { --d: -2deg; --y: 22px; }
.tel:nth-child(4) { --d: 4deg; --y: 2px; } .tel:nth-child(5) { --d: -3deg; --y: 16px; } .tel:nth-child(6) { --d: 5deg; --y: 6px; }
.tel .cer { position: relative; border-radius: 38px; padding: 9px; background: #1C1418; box-shadow: 0 24px 50px rgba(43, 26, 31, .22), inset 0 0 0 2px #3A2C31; }
.tel .cer::before { content: ""; position: absolute; top: 17px; left: 50%; width: 70px; height: 20px; border-radius: 99px; background: #1C1418; transform: translateX(-50%); z-index: 2; }
.tel img { display: block; width: 100%; height: auto; aspect-ratio: 1320 / 2868; border-radius: 30px; background: var(--wd-zemin); }
.tel.aktif { transform: rotate(0deg) translateY(-18px) scale(1.07); z-index: 3; }
.tel.aktif .cer { box-shadow: 0 34px 70px rgba(168, 70, 96, .35), inset 0 0 0 2px #3A2C31, 0 0 0 4px rgba(168, 70, 96, .25); }
.wdv-ray:hover .tel:not(.aktif) { filter: saturate(.9); }
.tel figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tel:focus-visible .cer { box-shadow: 0 0 0 4px var(--focus); }
.wdv-maskot { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; will-change: transform; }   /* 10.11.2026: kutu = yalnız maskot; etiket ona iliştirilir (yan değiştirince maskot ışınlanmasın) */
.wdv-maskot .maskot { width: 104px; height: auto; overflow: visible; filter: drop-shadow(0 10px 14px rgba(168, 70, 96, .25)); }
.wdv-etiket { display: inline-flex; align-items: center; gap: 10px; max-width: 300px; background: var(--wd-metin); color: #fff; font: 700 15px/1 var(--font-sans);
              padding: 9px 18px 9px 9px; border-radius: 22px; box-shadow: 0 10px 22px rgba(43, 26, 31, .25);
              position: absolute; top: 50%; left: calc(100% + 2px); width: max-content; transform: translateY(calc(-50% - 23px));
              transition: opacity .2s; }
.wdv-etiket strong { display: block; white-space: nowrap; }
.wdv-etiket small { display: block; font: 500 13px/1.35 var(--font-sans); color: #F4C9D2; margin-top: 3px; min-height: 1.35em; }
.wdv-etiket small i { font-style: normal; opacity: 0; transition: opacity .18s; }
.wdv-etiket small i.g { opacity: 1; }
.wdv-etiket b { width: 26px; flex: none; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #F4C9D2; color: var(--wd-metin); font-size: 12px; }
.wdv-maskot.ucuyor .wdv-etiket { opacity: 0; }
.wdv-maskot.sol .wdv-etiket { left: auto; right: calc(100% + 2px); }
.wdv-aciklama { text-align: center; min-height: 52px; margin: 6px auto 0; max-width: 560px; }
.wdv-aciklama b { display: block; font: 700 26px/1.2 "Cormorant Garamond", Georgia, serif; color: var(--wd-metin); }
.wdv-aciklama span { color: #5F5A5C; }
.wdv-noktalar { display: flex; justify-content: center; gap: 8px; margin: 18px 0 0; }
.wdv-noktalar button { width: 9px; height: 9px; padding: 0; border-radius: 99px; border: 0; background: #E7C9D0; cursor: pointer; transition: width .3s, background .3s; }
.wdv-noktalar button { position: relative; }
.wdv-noktalar button::after { content: ""; position: absolute; inset: -10px -4px; }   /* dokunma alanı (denetim 10.11.2026) */
.wdv-noktalar button[aria-current="true"] { width: 28px; background: var(--wd-vurgu); }
.wdv-alt { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 30px; }
.wdv-alt .dugme { display: inline-flex; align-items: center; gap: 8px; padding: 15px 22px; border-radius: 14px; font-weight: 700; text-decoration: none; flex: none; white-space: nowrap; }
.wdv-alt .dugme.ana { background: var(--wd-vurgu); color: #fff; box-shadow: 0 10px 24px rgba(168, 70, 96, .3); }
.wdv-alt .dugme.ikinci { background: #fff; color: var(--wd-vurgu); border: 1.5px solid #EED3D9; }
.wdv-alt .cipler { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; flex-basis: 100%; }
.wdv-alt .cip { font: 700 12px/1 var(--font-sans); letter-spacing: .04em; padding: 7px 11px; border-radius: 99px; background: var(--wd-yumusak); color: var(--wd-vurgu); }
.wdv-alt a.cip.ig { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; background: #fff; border: 1.5px solid #EED3D9; padding: 5.5px 10px; }
.wdv-alt a.cip.ig:hover { border-color: var(--wd-vurgu); }
.wdv-sayilar { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 40px; margin: 0 0 8px; }
.wdv-sayilar div { text-align: center; }
.wdv-sayilar b { display: block; font: 700 34px/1 "Cormorant Garamond", Georgia, serif; color: var(--wd-vurgu); }
.wdv-sayilar span { font-size: 14px; color: #5F5A5C; }

/* dikey Shorts şeridi */
.serit { display: grid; grid-auto-flow: column; grid-auto-columns: 210px; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 18px;
         scrollbar-width: thin; }
.kisa-v { position: relative; scroll-snap-align: start; display: block; aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; background: var(--navy);
          color: #fff; text-decoration: none; box-shadow: var(--golge-k); transition: transform .2s, box-shadow .2s; }
.kisa-v:hover, .kisa-v:focus-visible { transform: translateY(-4px); box-shadow: var(--golge); }
.kisa-v img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kisa-v::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .0) 45%, rgba(31, 3, 12, .88) 100%); }
.kisa-v .ust-e { position: absolute; z-index: 1; top: 12px; left: 12px; font: 800 10px/1 var(--font-sans); letter-spacing: .06em; padding: 5px 8px; border-radius: 6px;
                 background: rgba(255, 255, 255, .92); color: var(--heading); max-width: calc(100% - 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kisa-v .oynat { position: absolute; z-index: 1; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%;
                 background: rgba(255, 255, 255, .9); display: grid; place-items: center; opacity: 0; transform: scale(.8); transition: .2s; }
.kisa-v:hover .oynat { opacity: 1; transform: none; }
.kisa-v .oynat svg { width: 20px; height: 20px; fill: var(--navy); margin-left: 3px; }
.kisa-v .alt-e { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 14px; }
.kisa-v .alt-e b { display: block; font: 700 15px/1.3 var(--font-sans); }
.kisa-v .alt-e span { font-size: 12px; opacity: .8; }
.serit-alt { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* hakkımda */
.hakkimda { padding: 72px 0; }
.hk-yan .ada-card { border-radius: var(--yari); box-shadow: var(--golge-k); }

/* SSS */
.sss-sekme { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.sss-sekme button { font: 700 14px/1 var(--font-sans); border: 1.5px solid var(--line); background: #fff; color: var(--text); padding: 10px 16px; border-radius: 99px; cursor: pointer; }
.sss-sekme button sup { font-size: 11px; color: var(--muted); margin-left: 3px; }
.sss-sekme button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.sss-sekme button[aria-pressed="true"] sup { color: var(--green); }
.sss-liste { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
.sss-liste details { border: 1px solid var(--line); border-radius: 18px; background: #fff; transition: box-shadow .2s, border-color .2s; }
.sss-liste details[hidden] { display: none; }
.sss-liste details[open] { box-shadow: var(--golge-k); border-color: transparent; }
.sss-liste summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 18px 20px; font-weight: 700; color: var(--heading); font-size: 17px; }
.sss-liste summary::-webkit-details-marker { display: none; }
.sss-liste summary .no { font: 800 13px/1 var(--font-display); color: var(--green-dark); min-width: 22px; }
.sss-liste summary::after { content: "+"; margin-left: auto; width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center;
                            background: var(--bant); font: 400 22px/1 var(--font-sans); color: var(--heading); transition: transform .25s, background .2s; }
.sss-liste details[open] summary::after { transform: rotate(45deg); background: var(--green); }
.sss-liste details p { margin: 0; padding: 0 20px 20px 56px; color: var(--text); }
.sss-wa { max-width: 820px; margin: 22px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
          padding: 22px 24px; border-radius: var(--yari); background: var(--bant); border: 1px solid var(--line); }
.sss-wa b { display: block; font: 800 20px/1.2 var(--font-display); color: var(--heading); }
.sss-wa span { color: var(--muted); }
.btn-wa { display: inline-flex; align-items: center; gap: 10px; background: #1FAF54; color: #fff; text-decoration: none; font-weight: 700; padding: 13px 18px; border-radius: 14px; }
.btn-wa svg { width: 20px; height: 20px; fill: currentColor; }

/* yüzen WhatsApp */
.wa-yuzen { position: fixed; right: 20px; bottom: 20px; z-index: 50; width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #fff;
            display: grid; place-items: center; box-shadow: 0 12px 28px rgba(37, 211, 102, .4); transition: transform .2s; }
.wa-yuzen:hover { transform: scale(1.07); }
/* girişte içeriğin (sayılar) üstüne binmesin: kahraman geçilince belirir (vitrin.js) */
.wa-yuzen { transition: transform .2s, opacity .3s; }
.wa-yuzen.gizli { opacity: 0; transform: translateY(14px); pointer-events: none; }
.wa-yuzen svg { width: 30px; height: 30px; fill: currentColor; }

/* iletişim + alt bilgi */
.iletisim .ada-card--navy { border-radius: 28px; padding: 36px 34px; background: radial-gradient(80% 140% at 100% 0%, #6B1F38 0%, var(--navy) 60%); }
.iletisim .ada-h { font-size: 32px; }

/* kaydırınca belirme */
.belir { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.belir.gorundu { opacity: 1; transform: none; }

@media (max-width: 1080px) {
  .tel { width: 180px; }
}
@media (max-width: 900px) {
  .vk { grid-template-columns: 1fr; gap: 10px; padding-bottom: 40px; }
  .vg { justify-self: center; max-width: 480px; margin-top: 10px; }
  .yk-kelime { bottom: 18%; }   /* iPad dikeyde "Puan hesapla" kartı kelime kartının üstüne binmesin */
  .gunluk { grid-template-columns: 1fr; }
  .ust-cta { display: none; }
  /* telefonlar yatay kaydırma şeridine döner; maskot şeritle birlikte kayar */
  .wdv-sahne { padding-top: 196px; margin: 0 -20px; }   /* maskot + etiket + ad rozeti sayılara değmesin */
  .wdv-yol { display: none; }
  .wdv-ray { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding: 120px 20px 36px; margin-top: -120px;
             scrollbar-width: none; gap: 16px; }
  .wdv-ray::-webkit-scrollbar { display: none; }
  .tel { width: min(58vw, 230px); margin: 0; scroll-snap-align: center; --d: 0deg !important; --y: 0 !important; }
  .tel.aktif { transform: translateY(-10px) scale(1.03); }
  .wdv-maskot .maskot { width: 84px; }
  .wdv-etiket { font-size: 14px; max-width: 230px; }
}
@media (max-width: 560px) {
  .vs-kart { flex-basis: 100%; }
  .vs-kart { min-height: 0; }
  .vg { aspect-ratio: 1 / 1.22; }
  .yk-kelime p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .yk-kelime { bottom: 17%; }
  .yk { padding: 11px 13px; border-radius: 15px; }
  .yk-kisi { min-width: 0; right: 0; left: 18%; } .yk-kisi .yil { font-size: 22px; }
  .yk-sinav { width: 205px; top: 30%; } .yk-sinav .n { font-size: 34px; }
  .yk-kelime { width: 200px; right: 0; } .yk-kelime .k b { font-size: 20px; }
  .yk-puan { left: 0; bottom: 0; }
  .sayilar { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; } .sayilar b { font-size: 26px; }
  .v-bolum { padding: 56px 0; }
  .serit { grid-auto-columns: 62vw; }
  .sss-liste details p { padding-left: 20px; }
  .wa-yuzen { width: 52px; height: 52px; right: 14px; bottom: 14px; }
  .duyuru { font-size: 13px; }
  .ust nav { gap: 2px; }
  .ust nav a[href^="#hakkimda"], .ust nav a[href^="#about"] { display: none; }
  .ust nav a:not(.dil):not(.ust-cta) { padding: 6px 7px; }
  .marka { font-size: 18px; gap: 8px; }
  .marka-isaret { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .belir { opacity: 1; transform: none; }
  .maskot *, .yk, .gezegen::after { animation: none !important; }
}

/* kendini dene: düello + seviye testi kartları (maskotlu) */
.dene { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.dene-kart { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; text-decoration: none; color: #fff;
             background: radial-gradient(90% 120% at 0% 0%, #6B1F38 0%, #3D091B 70%); border-radius: 26px; padding: 26px 26px 26px 20px; overflow: hidden;
             box-shadow: var(--golge); transition: transform .2s; }
.dene-kart:hover, .dene-kart:focus-visible { transform: translateY(-4px); }
.dene-kart.ikinci { background: radial-gradient(90% 120% at 0% 0%, #F7EFD2 0%, #EBDDAA 75%); color: var(--heading); }
.dene-m .maskot { width: 108px; height: auto; overflow: visible; }
.dene-kart b { display: block; font: 800 28px/1.1 var(--font-display); letter-spacing: -.01em; }
.dene-kart p { margin: 8px 0 14px; opacity: .85; font-size: 15px; }
.dene-kart .git { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; background: var(--green); color: var(--on-bright); padding: 10px 14px; border-radius: 12px; }
.dene-kart.ikinci .git { background: var(--navy); color: #fff; }
.dene-kart .git svg { width: 16px; height: 16px; }
.dene-kart .sure { position: absolute; top: 16px; right: 16px; font: 800 11px/1 var(--font-sans); letter-spacing: .06em; padding: 6px 9px; border-radius: 99px;
                   background: rgba(255, 255, 255, .16); }
.dene-kart.ikinci .sure { background: rgba(61, 9, 27, .1); }
.dene-kart:hover .m-el { animation: m-el 1.1s ease-in-out 1; }

/* Well-Done: App Store rozeti + QR (QR yalnız geniş ekranda; telefondakine telefon QR'ı gerekmez) */
.rozet-as img { display: block; height: 52px; width: auto; }
.wdv-qr { display: flex; align-items: center; gap: 12px; background: #fff; border: 1.5px solid #EED3D9; border-radius: 16px; padding: 10px 14px 10px 10px; text-align: left; }
.wdv-qr svg { width: 74px; height: 74px; flex: none; }
.wdv-qr b { display: block; color: var(--wd-metin); font-size: 15px; }
.wdv-qr span { display: block; color: #5F5A5C; font-size: 13px; }
.wdv-qr small { display: block; color: var(--wd-vurgu); font-weight: 700; font-size: 12px; margin-top: 2px; }
@media (max-width: 900px) { .wdv-qr { display: none; } .dene { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .dene-kart { grid-template-columns: 1fr; padding: 22px; } .dene-m .maskot { width: 84px; } .dene-kart b { font-size: 24px; } }

/* "Telefonuna kur" (PWA): yalnız tarayıcı kurulumu destekliyorsa görünür (Android/Chrome, masaüstü Chrome/Edge) */
.kur-dug { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; font: 700 15px/1.2 var(--font-sans); color: var(--heading); background: var(--green-wash);
           border: 1.5px dashed var(--green); border-radius: 14px; padding: 11px 16px; cursor: pointer; }
.kur-dug[hidden] { display: none; }
.kur-dug svg { width: 20px; height: 20px; }
.kur-dug small { font: 500 13px/1 var(--font-sans); color: var(--muted); }
.vs-paylas { display: inline-block; margin-top: 4px; padding: 8px 0; font: 700 13px/1 var(--font-sans); color: var(--green-dark); text-decoration: none; }
.vs-kart.ilk .vs-paylas { color: var(--green); }
.vs-paylas:hover { text-decoration: underline; }
/* maskotun adı (MASKOT_AD): Well-Done bandında maskotun altında küçük rozet */
.wdv-m { position: relative; display: inline-block; flex: none; }
.wdv-m .ad-rozet { position: absolute; left: 50%; top: calc(100% + 6px);   /* maskotun altında boşlukla, ortalı; kuyruğa değmez */
                    transform: translateX(-50%); font: 800 12px/1 var(--font-sans); letter-spacing: .08em;
                   text-transform: uppercase; font-style: normal; color: #fff; background: #A84660; padding: 4px 9px; border-radius: 99px; box-shadow: 0 4px 10px rgba(168, 70, 96, .3); }
/* sınav takvimi süzgeci + "Tüm takvimi göster" (28.10.2026, ÖSYM 2027) */
.vs-tumu-kap { text-align: center; }
.vs-tumu { font: inherit; font-weight: 700; cursor: pointer; margin-top: 20px; }
.vs-tumu[hidden] { display: none; }

/* Instagram'da (10.11.2026): metin kartları, görsel yok */
.ig-liste a { border-top: 6px solid var(--green); }
.ig-liste b { font: 800 22px/1.2 var(--font-display); color: var(--heading); }
.ig-liste a > span:not(.etiket) { font-size: 15px; color: var(--muted); }

/* Sosyal medya kartları (10.11.2026) */
.sm-buyuk { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; }
.sm-b { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; min-height: 230px; padding: 30px; border-radius: 28px; color: #fff; text-decoration: none;
        box-shadow: 0 24px 60px rgba(61, 9, 27, .18); transition: transform .25s; }
.sm-b:hover, .sm-b:focus-visible { transform: translateY(-4px); }
.sm-ig { background: radial-gradient(120% 120% at 0% 100%, #FEDA75 0%, #FA7E1E 22%, #D62976 48%, #962FBF 72%, #4F5BD5 100%); }
.sm-yt { background: linear-gradient(135deg, #3D091B 0%, #6E0F25 55%, #C4302B 100%); }
.sm-b .sm-ik { width: 54px; height: 54px; border-radius: 16px; background: rgba(255, 255, 255, .2); display: grid; place-items: center; }
.sm-b .sm-ik svg { width: 28px; height: 28px; fill: #fff; color: #fff; }
.sm-b::after { content: ""; position: absolute; right: -40px; top: -40px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.sm-et { font: 800 12px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; opacity: .85; margin-top: 6px; }
.sm-b b { font: 800 28px/1.15 var(--font-display); }
.sm-b p { margin: 0; color: rgba(255, 255, 255, .88); max-width: 460px; }
.sm-dug { margin-top: auto; align-self: flex-start; background: #fff; color: #3D091B; font-weight: 800; border-radius: 999px; padding: 11px 20px; }
.sm-kucuk { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 18px; }
.sm-k { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px 18px; border-radius: 22px; background: #fff; border: 1px solid var(--line);
        text-decoration: none; color: var(--text); box-shadow: 0 8px 22px rgba(61, 9, 27, .06); transition: transform .25s, box-shadow .25s; overflow: hidden; }
.sm-k::before { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: var(--r); opacity: .08; }
.sm-k:hover, .sm-k:focus-visible { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(61, 9, 27, .12); }
.sm-k .sm-ik { width: 44px; height: 44px; border-radius: 14px; background: var(--r); display: grid; place-items: center; margin-bottom: 10px; }
.sm-k .sm-ik svg { width: 22px; height: 22px; fill: #fff; color: #fff; }
.sm-k b { color: var(--heading); font-size: 17px; }
.sm-kul { color: var(--muted); font-size: 13px; }
.sm-acik { color: var(--r); font-size: 13px; font-weight: 600; margin-top: 6px; }
.sm-ok { position: absolute; right: 16px; bottom: 14px; color: var(--muted); }
@media (max-width: 980px) { .sm-kucuk { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .sm-buyuk { grid-template-columns: 1fr; } .sm-kucuk { grid-template-columns: repeat(2, 1fr); } .sm-b { min-height: 0; padding: 24px; } }
/* Üst çubukta sözlük araması (21.10.2026): her sayfada; ⌘K / Ctrl+K ya da "/" ile açılır, /sozluk/veri.json'dan arar. */
.ara-dug { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--font-sans); color: var(--muted); background: var(--bant, #F6F1EC);
           border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px 8px 12px; cursor: pointer; white-space: nowrap; }
.ara-dug:hover { border-color: var(--green); color: var(--heading); }
.ara-dug svg { width: 16px; height: 16px; flex: none; }
.ara-dug kbd { font: 700 11px/1 var(--font-sans); background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 3px 5px; color: var(--muted); }
.ara-pen { border: 0; padding: 0; border-radius: 22px; width: min(620px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - 80px)); margin: 72px auto auto;
           box-shadow: 0 30px 80px rgba(31, 3, 12, .35); overflow: hidden; background: #fff; color: var(--text); }
.ara-pen::backdrop { background: rgba(31, 3, 12, .35); backdrop-filter: blur(3px); }
.ara-pen form { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.ara-pen form svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
.ara-pen input { flex: 1; min-width: 0; border: 0; outline: 0; font: 600 18px/1.3 var(--font-sans); color: var(--heading); background: transparent; }
.ara-pen .kapat { border: 1px solid var(--line); background: #fff; border-radius: 8px; font: 700 12px/1 var(--font-sans); color: var(--muted); padding: 6px 8px; cursor: pointer; }
.ara-sonuc { list-style: none; margin: 0; padding: 8px; overflow-y: auto; max-height: 420px; }
.ara-sonuc a { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: baseline; padding: 11px 12px; border-radius: 14px; text-decoration: none; color: inherit; }
.ara-sonuc a:hover, .ara-sonuc a[aria-selected="true"] { background: var(--green-wash, #FBF6E6); }
.ara-sonuc b { font: 800 18px/1.2 var(--font-display); color: var(--heading); }
.ara-sonuc .tur { font: 700 11px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--green-dark); justify-self: start; }
.ara-sonuc .tr { grid-column: 1 / -1; color: var(--muted); font-size: 14px; }
.ara-bos { padding: 18px 16px; color: var(--muted); margin: 0; }
.ara-alt { display: flex; justify-content: space-between; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.ara-alt a { color: var(--green-dark); font-weight: 700; text-decoration: none; }
@media (max-width: 760px) { .ara-dug span, .ara-dug kbd { display: none; } .ara-dug { padding: 8px; } .ara-pen { margin-top: 16px; } }
@media (max-width: 480px) { .ust nav { gap: 12px; font-size: 14px; } .ust .marka { font-size: 18px; } }
/* menü kalabalıklaşınca (arama + defter rozeti eklendi): düğmeler tek satır, arama yazısı geniş ekran dışında gizli */
.ust-cta, .ust nav a { white-space: nowrap; }
@media (max-width: 1360px) { .ara-dug span { display: none; } .ara-dug { padding: 8px 10px; } }
/* telefonda menü: arama + defter simgeleri sığsın diye yazılı bağlantılardan yalnız Sözlük ve dil kalır (diğerleri sayfa içinde var) */
@media (max-width: 480px) { .ust nav > a:not(.dil):not(.defter-dug):not([href="/sozluk/"]) { display: none; } .ust nav { gap: 8px; } }
/* Kelime defteri + seri (21.10.2026): üst çubuk rozeti, yıldız düğmesi, seri çipi (her sayfada) ve /defter/ sayfası. */
.defter-dug { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line);
              background: var(--bant, #F6F1EC); color: var(--heading) !important; text-decoration: none; padding: 0 !important; }
.defter-dug[hidden] { display: none; }
.defter-dug svg { width: 18px; height: 18px; }
.defter-dug span { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #A84660; color: #fff;
                   font: 800 11px/18px var(--font-sans); text-align: center; }
.yildiz-dug { display: inline-flex; align-items: center; gap: 6px; font: 700 13px/1 var(--font-sans); color: var(--heading); background: #fff;
              border: 1.5px solid var(--line); border-radius: 99px; padding: 7px 12px 7px 9px; cursor: pointer; transition: border-color .15s, background .15s; }
.yildiz-dug:hover { border-color: var(--green); }
.yildiz-dug svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.yildiz-dug[aria-pressed="true"] { background: var(--green-soft, #F7EFD2); border-color: var(--green); }
.yildiz-dug[aria-pressed="true"] svg { fill: var(--green); stroke: var(--green-dark); }
.seri { display: inline-flex; align-items: center; gap: 8px; font: 700 14px/1 var(--font-sans); color: var(--heading); background: var(--green-soft, #F7EFD2);
        border: 1px solid var(--green-line, #EBDDAA); border-radius: 99px; padding: 8px 14px 8px 10px; }
.seri[hidden] { display: none; }
.seri svg { width: 18px; height: 18px; fill: #D8B229; stroke: #8A6A0E; stroke-width: 1.5; }
.seri.sonuk { background: #fff; border-color: var(--line); color: var(--muted); }
.seri.sonuk svg { fill: #EFE2AB; }
.seri [data-en] { font-weight: 600; color: var(--muted); }
.seri [data-en]:empty { display: none; }
.vb .seri { margin-top: 14px; }
/* /defter/ sayfası */
.df-ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.df-ust b { font: 800 18px/1 var(--font-display); color: var(--heading); }
.df-liste { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.df-liste li { position: relative; background: #fff; border: 1px solid #F1DCE1; border-radius: 16px; padding: 14px 40px 14px 16px; }
.df-k { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.df-k a { font: 700 22px/1.1 "Cormorant Garamond", Georgia, serif; color: #2B1A1F; text-decoration: none; }
.df-k a[href]:hover { text-decoration: underline; text-decoration-color: #A84660; }
.df-k .tur { font: 700 11px/1 var(--font-sans); letter-spacing: .05em; text-transform: uppercase; color: #A84660; }
.df-liste .tr { margin: 6px 0 0; color: var(--text); font-size: 15px; }
.df-liste .es { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.df-liste .es:empty { display: none; }
.df-sil { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: #F9E4E7; color: #A84660; font: 700 16px/1 var(--font-sans); cursor: pointer; }
.df-bos[hidden], .df-dolu[hidden], [data-duello][hidden] { display: none; }
.df-kart-pen { border: 0; padding: 0; border-radius: 26px; width: min(460px, calc(100vw - 24px)); background: #FFF6F4; box-shadow: 0 30px 80px rgba(31, 3, 12, .35); }
.df-kart-pen::backdrop { background: rgba(31, 3, 12, .45); }
.df-kart-ic, .df-bitti { padding: 22px; }
.df-kart-ic[hidden], .df-bitti[hidden], .df-kart-dug[hidden] { display: none; }
.df-kart-bas { display: flex; justify-content: space-between; color: var(--muted); font: 700 13px/1 var(--font-sans); margin-bottom: 14px; }
.df-kart-bas button { border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.df-cevir { position: relative; width: 100%; min-height: 220px; border: 0; padding: 0; background: none; cursor: pointer; perspective: 1000px; }
.df-cevir > span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px;
                   border-radius: 20px; background: #fff; box-shadow: 0 10px 26px rgba(168, 70, 96, .12); backface-visibility: hidden; transition: transform .5s; }
.df-cevir .on b { font: 700 40px/1.1 "Cormorant Garamond", Georgia, serif; color: #2B1A1F; }
.df-cevir .on span, .df-cevir .arka span { color: var(--muted); font-size: 14px; text-align: center; }
.df-cevir .on small { color: #A84660; font-weight: 700; font-size: 12px; margin-top: 10px; }
.df-cevir .arka { transform: rotateY(180deg); }
.df-cevir .arka b { font: 800 22px/1.3 var(--font-display); color: var(--heading); text-align: center; }
.df-cevir.dondu .on { transform: rotateY(180deg); } .df-cevir.dondu .arka { transform: rotateY(360deg); }
.df-kart-dug { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.df-kart-dug button { border: 0; border-radius: 14px; padding: 14px; font: 700 15px/1 var(--font-sans); cursor: pointer; color: #fff; }
.df-kart-dug [data-sonuc="tekrar"] { background: #C25B4E; } .df-kart-dug [data-sonuc="bildim"] { background: #4E8B57; }
.df-bitti { text-align: center; } .df-bitti b { display: block; font: 800 26px/1.2 var(--font-display); color: var(--heading); margin-bottom: 6px; }
.df-yazdir-bas { display: none; }
@media print {
  .ust, .ara-pen, footer, .du-bas, .df-ust .du-dugmeler, .df-sil, .df-bos, .du-maskot, .wa-yuzen, .atla, .df-not { display: none !important; }
  .du-kart { box-shadow: none; border: 0; background: #fff; padding: 0; }
  .df-yazdir-bas { display: block; font: 800 22px/1.2 var(--font-display); color: #3D091B; margin-bottom: 4px; }
  .df-liste { grid-template-columns: 1fr 1fr; gap: 6px; } .df-liste li { break-inside: avoid; padding: 8px 10px; border-radius: 8px; }
  .df-k a { font-size: 18px; } .df-liste .tr { font-size: 13px; }
}