/* =========================================================================
   BizimPati tanıtım sitesi — ortak tasarım sistemi (v2, 2026-11-05)

   TEK HAREKET FİKRİ: İZ. Uygulamanın yürüyüş ekranındaki durum çizelgesi
   (Havuzda → Gezdirici atandı → Yürüyüşte → Tamamlandı) ve canlı rota
   sitenin dilidir: bölümler kesik çizgili bir izle bağlanır, duraklar
   geçildikçe dolar, telefon ekranları gerçek uygulama görüntüleridir.

   Renk: gece mavisi + gün batımı degradesi (logo), kâğıt zemin, uygulamanın
   kiremit tonu. Rol renkleri: sahip turuncu, gezdirici deniz yeşili,
   veteriner gök mavisi — sayfanın <body data-rol> değeri vurguyu seçer.
   Üçüncü taraf istek YOK: yazı tipleri /assets/fonts/ altından.
   ========================================================================= */

/* ---------- yazı tipleri (SIL OFL 1.1, assets/fonts/KAYNAK.txt) ---------- */
@font-face{font-family:"Bricolage";font-style:normal;font-display:swap;font-weight:200 800;
  src:url(/assets/fonts/bricolage-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:"Bricolage";font-style:normal;font-display:swap;font-weight:200 800;
  src:url(/assets/fonts/bricolage-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Nunito";font-style:normal;font-display:swap;font-weight:200 1000;
  src:url(/assets/fonts/nunito-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:"Nunito";font-style:normal;font-display:swap;font-weight:200 1000;
  src:url(/assets/fonts/nunito-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";font-style:italic;font-display:swap;font-weight:400;
  src:url(/assets/fonts/instrument-serif-italic-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:"Instrument Serif";font-style:italic;font-display:swap;font-weight:400;
  src:url(/assets/fonts/instrument-serif-italic-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- belirteçler ---------- */
:root{
  --gece:#0E1525; --gece-2:#141D33; --gece-3:#1C2741; --gece-4:#26345A;
  --gece-cizgi:rgba(214,224,255,.12);
  --acik:#F5F2EC; --acik-2:#B4BDD0;
  --kagit:#F7F4EE; --kagit-2:#EDE8DE; --kagit-3:#E4DDD0; --kart:#FFFFFF;
  --murekkep:#121A2C; --murekkep-2:#4A5269; --cizgi:rgba(18,26,44,.12);
  --gunes-1:#FFC170; --gunes-2:#F5873E; --gunes-3:#EE5560;
  --marka:linear-gradient(110deg,#FFC170 0%,#F5873E 46%,#EE5560 100%);
  --kiremit:#A33E12;            /* uygulamanın birincil düğmesi */
  --seftali:#FFF3EE;            /* uygulamanın zemin tonu */
  --vurgu-acik:#AD4410;         /* açık zeminde turuncu metin (AA) */
  --sahip:#F5873E; --gezdirici:#3DD3B2; --veteriner:#86B6FF;
  --sahip-k:#A94310; --gezdirici-k:#0A7360; --veteriner-k:#2554B0;
  --rol:var(--sahip); --rol-k:var(--sahip-k);
  --rota:#FF9F4D;
  --display:"Bricolage","Nunito",system-ui,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --body:"Nunito","Segoe UI",system-ui,sans-serif;
  --egri:cubic-bezier(.22,.9,.24,1);
  --egri-yay:cubic-bezier(.34,1.56,.64,1);
  --golge-tel:0 50px 80px -40px rgba(0,0,0,.75), 0 18px 30px -18px rgba(0,0,0,.45);
  --golge-kart:0 30px 60px -32px rgba(18,26,44,.45), 0 0 0 1px rgba(18,26,44,.06);
  --sarici:1240px;
}
body[data-rol="gezdirici"]{--rol:var(--gezdirici); --rol-k:var(--gezdirici-k)}
body[data-rol="veteriner"]{--rol:var(--veteriner); --rol-k:var(--veteriner-k)}
body[data-rol="guven"]{--rol:#7FD6A8; --rol-k:#0E6B45}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--kagit); color:var(--murekkep); font-family:var(--body);
  font-size:clamp(16px, .42vw + 14.6px, 18px); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:clip}
h1,h2,h3,h4{font-family:var(--display); margin:0; text-wrap:balance; font-optical-sizing:auto}
h1{font-size:clamp(2.5rem, 6.2vw, 5.6rem); line-height:.95; letter-spacing:-.04em; font-weight:800}
h2{font-size:clamp(2rem, 4.4vw, 3.8rem); line-height:1; letter-spacing:-.035em; font-weight:800}
h3{font-size:clamp(1.15rem, 1.5vw, 1.35rem); line-height:1.2; letter-spacing:-.012em; font-weight:700}
h4{font-size:1rem; line-height:1.3; font-weight:700}
h1 em,h2 em,h3 em,.buyuk em,.serif{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em}
p{margin:0}
a{color:inherit; text-underline-offset:3px}
img{max-width:100%; display:block; height:auto}
ul,ol{margin:0; padding:0}
.sarici{width:min(var(--sarici), 100% - 32px); margin-inline:auto}
/* [hidden] her sınıf kuralını yener: `.kucuk-dugme{display:inline-flex}` hareketi azalt tercihinde
   gizlenen Durdur/Yeniden oynat düğmelerini görünür bırakıyordu (hakem S12, ölçüldü). */
[hidden]{display:none!important}
.gizli{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.atla{position:absolute; left:16px; top:-80px; z-index:100; background:var(--acik); color:var(--murekkep); padding:.7rem 1.1rem; border-radius:12px; font-weight:800}
.atla:focus{top:12px}
/* Odak halkası zeminle en az 3:1 (WCAG 1.4.11): açık zeminde kiremit, koyu zeminde gün ışığı. */
:focus-visible{outline:3px solid var(--vurgu-acik); outline-offset:3px; border-radius:6px}
.koyu :focus-visible,.ust :focus-visible,.rol-serit :focus-visible,.alt-bilgi :focus-visible,.kapi:focus-visible{outline-color:var(--gunes-1)}
.koyu .yaptim-kart :focus-visible{outline-color:#7A2E0C}
.no-js .js-yalniz{display:none!important}
.js .nojs-yalniz{display:none!important}

/* ---------- metin parçaları ---------- */
.etiket{font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.16em; font-size:.74rem; color:var(--vurgu-acik)}
.koyu .etiket{color:var(--gunes-1)}
.etiket-rol{color:var(--rol-k)} .koyu .etiket-rol{color:var(--rol)}
.giris{max-width:62ch; color:var(--murekkep-2); font-size:1.08em}
.koyu .giris{color:var(--acik-2)}
.buyuk{font-family:var(--display); font-weight:700; font-size:clamp(1.6rem, 3.4vw, 2.9rem); line-height:1.1; letter-spacing:-.025em; text-wrap:balance}
.buyuk em{color:var(--vurgu-acik)} .koyu .buyuk em{color:var(--gunes-1)}
.bolum-bas{display:grid; gap:.9rem; margin-bottom:clamp(2.2rem, 4vw, 3.6rem)}
.bolum-bas h2{max-width:19ch}
.bolum-bas.genis h2{max-width:24ch}
.bolum{padding:clamp(4.5rem, 9vw, 8rem) 0; position:relative}
.bolum.siki{padding:clamp(3rem, 6vw, 5rem) 0}
/* telefonda bölüm boşlukları (satış turu: ana sayfa 375 px'te 28,7 ekrandı) */
@media (max-width:560px){.bolum{padding:3rem 0} .bolum.siki{padding:2.4rem 0}}
.koyu{background:var(--gece); color:var(--acik)}
.kagit-2{background:var(--kagit-2)}
.mono{font-variant-numeric:tabular-nums}
/* gorunur kirinti (alt sayfalar; JSON-LD BreadcrumbList ile ayni, tool/site-seo-uret.py) */
.kirinti{display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; margin-bottom:.9rem; font-size:.82rem; font-weight:700; color:var(--murekkep-2)}
.koyu .kirinti{color:var(--acik-2)}
.kirinti a{color:inherit; text-underline-offset:3px; display:inline-flex; align-items:center; min-height:24px}
.kirinti [aria-current]{color:var(--murekkep)} .koyu .kirinti [aria-current]{color:var(--acik)}
.alinti{font-family:var(--serif); font-style:italic; font-size:clamp(1.5rem, 3vw, 2.4rem); line-height:1.15; letter-spacing:-.01em}

/* koyu bölümlerde sokak ızgarası dokusu (haritadan) */
.doku{position:relative; isolation:isolate}
.doku::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.55;
  background-image:linear-gradient(rgba(214,224,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(214,224,255,.035) 1px, transparent 1px);
  background-size:64px 64px; -webkit-mask-image:radial-gradient(70% 60% at 70% 30%, #000, transparent 75%); mask-image:radial-gradient(70% 60% at 70% 30%, #000, transparent 75%)}

/* ---------- düğmeler ---------- */
.dugme{display:inline-flex; align-items:center; justify-content:center; gap:.55rem; min-height:48px; padding:.85rem 1.35rem; border-radius:999px;
  font-weight:800; text-decoration:none; border:2px solid transparent; cursor:pointer; font:inherit; font-weight:800; line-height:1.2;
  transition:transform .25s var(--egri), background-color .2s, box-shadow .25s, border-color .2s, color .2s}
.dugme svg{width:1.15em; height:1.15em; flex:0 0 auto}
.dugme-dolu{background:var(--marka); color:#1A0F0A; box-shadow:0 14px 34px -14px rgba(238,85,96,.75)}
.dugme-dolu:hover{transform:translateY(-2px); box-shadow:0 18px 40px -14px rgba(238,85,96,.9)}
.dugme-bos{border-color:var(--gece-cizgi); color:var(--acik); background:rgba(255,255,255,.03)}
.dugme-bos:hover{border-color:rgba(214,224,255,.4); transform:translateY(-2px)}
.acik-zemin .dugme-bos,.dugme-bos.acik{border-color:var(--cizgi); color:var(--murekkep); background:transparent}
.acik-zemin .dugme-bos:hover,.dugme-bos.acik:hover{border-color:rgba(18,26,44,.35)}
.dugme-rol{background:var(--rol); color:#0B1120; box-shadow:0 14px 34px -16px var(--rol)}
.dugme-rol:hover{transform:translateY(-2px)}
.ok-bag{display:inline-flex; align-items:center; gap:.4rem; font-weight:800; text-decoration:none; color:var(--rol-k); border-bottom:2px solid currentColor; padding-bottom:1px}
.koyu .ok-bag{color:var(--rol)}
.ok-bag svg{width:1em; height:1em; transition:transform .25s var(--egri)}
.ok-bag:hover svg{transform:translateX(4px)}

/* ---------- üst çubuk ---------- */
.ust{position:sticky; top:0; z-index:60; background:rgba(14,21,37,.82); -webkit-backdrop-filter:saturate(1.3) blur(14px); backdrop-filter:saturate(1.3) blur(14px);
  border-bottom:1px solid var(--gece-cizgi); color:var(--acik)}
.ust-ic{display:flex; align-items:center; gap:1rem; min-height:64px}
.marka{display:inline-flex; align-items:center; gap:.55rem; text-decoration:none; font-family:var(--display); font-weight:800; font-size:1.2rem; letter-spacing:-.02em; flex:0 0 auto}
.marka img{width:32px; height:32px; border-radius:10px}
.marka b{font-weight:800; background:var(--marka); -webkit-background-clip:text; background-clip:text; color:transparent}
.rol-gecis{display:flex; gap:2px; padding:4px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid var(--gece-cizgi); margin-left:clamp(.5rem, 2vw, 1.6rem)}
.rol-gecis a{display:inline-flex; align-items:center; gap:.45rem; padding:.42rem .85rem; min-height:36px; border-radius:999px; text-decoration:none; font-weight:800; font-size:.88rem; color:var(--acik-2); transition:background-color .25s, color .25s}
.rol-gecis a::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--n); flex:0 0 auto}
.rol-gecis a:hover{color:var(--acik)}
.rol-gecis a[aria-current="page"]{background:var(--gece-4); color:var(--acik); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.rol-gecis [data-rol="sahip"]{--n:var(--sahip)} .rol-gecis [data-rol="gezdirici"]{--n:var(--gezdirici)} .rol-gecis [data-rol="veteriner"]{--n:var(--veteriner)}
.ust-baglar{display:flex; gap:1.3rem; margin-left:auto; font-weight:700; font-size:.92rem}
.ust-baglar a{text-decoration:none; color:var(--acik-2); padding:.4rem 0; transition:color .2s}
.ust-baglar a:hover,.ust-baglar a[aria-current="page"]{color:var(--acik)}
.ust-baglar a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--gunes-2)}
.ust-cta{min-height:40px; padding:.5rem 1rem; font-size:.9rem}
.rol-serit{display:none}
@media (max-width:860px){
  .ust .rol-gecis{display:none}
  .rol-serit{display:block; background:var(--gece); border-bottom:1px solid var(--gece-cizgi); padding:.5rem 0}
  .rol-serit .rol-gecis{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); margin:0}
  .rol-serit .rol-gecis a{justify-content:center; padding:.42rem .3rem; font-size:.82rem; white-space:nowrap}
}
@media (max-width:520px){ .ust-cta{display:none} .ust-baglar{gap:.9rem; font-size:.86rem} }
@media (max-width:360px){ .rol-serit .rol-gecis a::before{display:none} .marka span{font-size:1.05rem} }

/* ---------- telefon, yarım telefon, kesit ---------- */
.telefon{--gen:300px; position:relative; width:min(var(--gen), 78vw); border-radius:calc(var(--gen) * .15); padding:calc(var(--gen) * .032);
  background:linear-gradient(145deg,#2A3044,#07090F 38%,#07090F 70%,#2A3044); box-shadow:var(--golge-tel), inset 0 0 0 1.5px rgba(255,255,255,.12)}
.telefon::before{content:""; position:absolute; right:-3px; top:22%; width:3px; height:12%; border-radius:0 3px 3px 0; background:#1D2232}
.telefon .ekran{position:relative; border-radius:calc(var(--gen) * .118); overflow:hidden; background:var(--seftali); aspect-ratio:1170/2532}
.telefon .ekran img{width:100%; height:100%; object-fit:cover; object-position:top}
.telefon.yarim .ekran{aspect-ratio:1170/1350; border-bottom-left-radius:0; border-bottom-right-radius:0}
.telefon.yarim{border-bottom-left-radius:0; border-bottom-right-radius:0; padding-bottom:0;
  -webkit-mask-image:linear-gradient(#000 78%, transparent); mask-image:linear-gradient(#000 78%, transparent)}
.kesit{margin:0; border-radius:22px; overflow:hidden; background:var(--seftali); box-shadow:var(--golge-kart); position:relative}
.kesit img{width:100%}
.kesit.solgun-sag img{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent); mask-image:linear-gradient(90deg,#000 82%,transparent)}
.kesit.solgun-alt img{-webkit-mask-image:linear-gradient(#000 80%,transparent); mask-image:linear-gradient(#000 80%,transparent)}
.koyu .kesit{box-shadow:0 40px 70px -36px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06)}
figure{margin:0}
.yol{display:inline-flex; flex-wrap:wrap; align-items:center; gap:.2rem .45rem; margin-top:.9rem; font-size:.8rem; font-weight:700; color:var(--murekkep-2); line-height:1.35}
.yol::before{content:""; width:16px; height:16px; flex:0 0 auto; border-radius:5px; background:var(--kiremit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFF3EE'%3E%3Ccircle cx='7' cy='8' r='2.2'/%3E%3Ccircle cx='12' cy='5.6' r='2.2'/%3E%3Ccircle cx='17' cy='8' r='2.2'/%3E%3Cpath d='M12 11c3.2 0 6 3.4 6 6.2 0 1.7-1.3 2.3-2.6 2.3-1.2 0-2-.6-3.4-.6s-2.2.6-3.4.6C7.3 19.5 6 18.9 6 17.2 6 14.4 8.8 11 12 11z'/%3E%3C/svg%3E") center/12px no-repeat}
.yol b{font-weight:800; color:var(--murekkep); letter-spacing:.02em}
.koyu .yol{color:var(--acik-2)} .koyu .yol b{color:var(--acik)}
.yol .ok{opacity:.55}
.osm{display:block; margin-top:.35rem; font-size:.72rem; color:var(--murekkep-2)}
.koyu .osm{color:var(--acik-2)}
.osm a{color:inherit}

/* uygulama bildirimi taklidi (metinler uygulamanın kendi sözlüğünden) */
.bildirim{display:grid; grid-template-columns:34px minmax(0,1fr); gap:.65rem; align-items:start; padding:.7rem .85rem; border-radius:18px;
  background:rgba(250,248,244,.97); color:var(--murekkep); box-shadow:0 24px 50px -22px rgba(0,0,0,.65), 0 0 0 1px rgba(18,26,44,.06); font-size:.84rem; line-height:1.35; max-width:300px}
.bildirim img{width:34px; height:34px; border-radius:10px}
.bildirim .bas{display:flex; justify-content:space-between; gap:.5rem; font-size:.72rem; font-weight:800; color:var(--murekkep-2); letter-spacing:.02em}
.bildirim .bas time{font-weight:700}
.bildirim p{font-weight:700}
.bildirim-kap{display:grid; gap:.5rem; justify-items:start; margin-bottom:1rem}
.sahne-bildirim .bildirim{width:100%}
@media (min-width:980px){
  .sahne-bildirim.etkin .bildirim{animation:bildirim-in .6s var(--egri-yay) both}
  .sahne-bildirim.etkin .bildirim + .bildirim{animation-delay:.9s}
}
@keyframes bildirim-in{from{opacity:0; transform:translateY(-14px) scale(.96)}to{opacity:1; transform:none}}

/* ---------- ayrıntı çekmecesi ---------- */
.ayrinti{margin-top:1.1rem; border-top:1px solid var(--cizgi)}
.koyu .ayrinti{border-color:var(--gece-cizgi)}
.ayrinti summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:.6rem; padding:.85rem 0; min-height:48px; font-weight:800; font-size:.92rem; color:var(--rol-k)}
.koyu .ayrinti summary{color:var(--rol)}
.ayrinti summary::-webkit-details-marker{display:none}
.ayrinti summary::before{content:""; width:24px; height:24px; flex:0 0 auto; border-radius:50%; border:2px solid currentColor;
  background:linear-gradient(currentColor,currentColor) center/10px 2px no-repeat, linear-gradient(currentColor,currentColor) center/2px 10px no-repeat; transition:transform .3s var(--egri)}
.ayrinti[open] summary::before{transform:rotate(135deg)}
.ayrinti summary:hover{text-decoration:underline; text-underline-offset:4px}
.ayrinti-ic{padding:0 0 1rem; display:grid; gap:.7rem; color:var(--murekkep-2); font-size:.95rem}
.koyu .ayrinti-ic{color:var(--acik-2)}
.ayrinti-ic ul{display:grid; gap:.55rem; padding-left:1.15rem}
.ayrinti-ic li::marker{color:var(--rol-k)} .koyu .ayrinti-ic li::marker{color:var(--rol)}
.ayrinti-ic strong{color:var(--murekkep)} .koyu .ayrinti-ic strong{color:var(--acik)}
.ayrinti[open] .ayrinti-ic{animation:acil .45s var(--egri)}
@keyframes acil{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}
.kaynak{font-size:.8rem; color:var(--murekkep-2)}
.koyu .kaynak{color:var(--acik-2)}

/* ---------- hikâye (kaydırmayla oynayan telefon) ---------- */
.hikaye{position:relative}
.hikaye-sol{position:relative}
.hikaye-adimlar{list-style:none; display:grid; gap:clamp(3.5rem, 8vw, 6rem); position:relative}
.hikaye-adim{display:grid; grid-template-columns:minmax(0,1fr); gap:1.8rem; position:relative; padding-left:3.4rem}
.adim-zaman{display:flex; align-items:baseline; gap:.7rem; font-family:var(--display); font-weight:700; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--rol-k); margin-bottom:.7rem}
.koyu .adim-zaman{color:var(--rol)}
.adim-zaman time{font-size:1.02rem; letter-spacing:.02em; font-variant-numeric:tabular-nums; color:var(--murekkep)}
.koyu .adim-zaman time{color:var(--acik)}
.hikaye-adim h3{font-size:clamp(1.55rem, 2.6vw, 2.2rem); line-height:1.05; letter-spacing:-.03em; font-weight:800; max-width:18ch}
.hikaye-adim .adim-metin > p:not(.adim-zaman){margin-top:.9rem; color:var(--murekkep-2); max-width:48ch}
.koyu .hikaye-adim .adim-metin > p:not(.adim-zaman){color:var(--acik-2)}
.adim-ekran{display:grid; justify-items:start; gap:.2rem}
.adim-ekran .telefon{--gen:260px}
.adim-ekran .kesit{max-width:400px}
/* iz: dikey kesik çizgi + doldurulan degrade, durak halkaları */
.iz-hat{position:absolute; left:15px; top:6px; bottom:6px; width:6px; border-radius:6px; pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(18,26,44,.16) 0 12px, transparent 12px 22px)}
.koyu .iz-hat{background:repeating-linear-gradient(180deg, rgba(214,224,255,.18) 0 12px, transparent 12px 22px)}
.iz-hat i{position:absolute; inset:0; border-radius:inherit; background:linear-gradient(var(--gunes-1), var(--gunes-2) 55%, var(--gunes-3)); transform-origin:top; transform:scaleY(1)}
@supports (animation-timeline: view()){
  .js .iz-hat i{animation:iz-dol linear both; animation-timeline:--hikaye; animation-range:contain 0% contain 100%}
  .js .hikaye{view-timeline-name:--hikaye}
}
@keyframes iz-dol{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.adim-metin{position:relative}
.durak-halka{position:absolute; left:-3.4rem; top:-.35rem; width:36px; height:36px; border-radius:50%; background:var(--kagit); border:6px solid var(--gunes-2); display:grid; place-items:center; z-index:1;
  transition:background-color .4s, border-color .4s, transform .5s var(--egri-yay)}
.koyu .durak-halka{background:var(--gece)}
.durak-halka svg{width:16px; height:16px; color:#1A0F0A; opacity:1; transition:opacity .3s}
.hikaye-adim.gecti .durak-halka,.no-js .durak-halka{background:var(--gunes-2); border-color:var(--gunes-3)}
.js .hikaye-adim:not(.gecti) .durak-halka{transform:scale(.82); border-color:rgba(18,26,44,.25)}
.js .koyu .hikaye-adim:not(.gecti) .durak-halka{border-color:rgba(214,224,255,.25)}
.js .hikaye-adim:not(.gecti) .durak-halka svg{opacity:0}
/* masaüstü sahnesi (JS kurar): tek telefon, ekran adımla değişir */
.hikaye-sahne{display:none}
@media (min-width:980px){
  .hikaye.canli{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:clamp(2rem, 5vw, 5rem)}
  .hikaye.canli .hikaye-adimlar{gap:0}
  .hikaye.canli .hikaye-adim{min-height:min(76vh, 700px); align-content:start; padding-top:clamp(2rem, 14vh, 8rem)}
  .hikaye.canli .hikaye-adim:first-child{padding-top:0; min-height:min(64vh, 600px)}
  .hikaye.canli .hikaye-adim:last-child{min-height:0; padding-bottom:clamp(2rem, 18vh, 10rem)}
  .hikaye.canli .adim-ekran{display:none}
  .hikaye.canli .hikaye-sahne{display:block; position:relative}
  .sahne-yapiskan{position:sticky; top:calc(50vh - min(34vh, 330px)); display:grid; justify-items:center; gap:1rem}
  .sahne-yapiskan .telefon{--gen:min(300px, 31vh)}
  .sahne-yapiskan .ekran img{position:absolute; inset:0; opacity:0; transform:scale(1.035); transition:opacity .55s var(--egri), transform .8s var(--egri)}
  .sahne-yapiskan .ekran img.etkin{opacity:1; transform:none}
  .sahne-yapiskan .ekran::after{content:""; position:absolute; inset:0; background:rgba(14,21,37,.42); opacity:0; transition:opacity .45s var(--egri); pointer-events:none}
  .sahne-yapiskan.kesitte .ekran::after{opacity:1}
  .sahne-kesit-kat{position:absolute; left:50%; top:24%; width:128%; transform:translateX(-50%); pointer-events:none; z-index:2}
  .sahne-kesit-kat img{position:absolute; left:0; top:0; width:100%; height:auto; border-radius:20px; box-shadow:0 40px 70px -30px rgba(18,26,44,.7), 0 0 0 1px rgba(18,26,44,.06);
    opacity:0; transform:translateY(24px) scale(.94); transition:opacity .5s var(--egri), transform .7s var(--egri-yay)}
  .sahne-kesit-kat img.etkin{opacity:1; transform:none}
  .sahne-yol{min-height:2.6em; text-align:center; justify-content:center}
  .sahne-noktalar{display:flex; gap:6px}
  .sahne-noktalar button{width:28px; height:28px; border:0; padding:0; background:none; cursor:pointer; display:grid; place-items:center; border-radius:50%}
  .sahne-noktalar button::before{content:""; width:8px; height:8px; border-radius:50%; background:rgba(18,26,44,.22); transition:transform .3s var(--egri), background-color .3s}
  .koyu .sahne-noktalar button::before{background:rgba(214,224,255,.25)}
  .sahne-noktalar button[aria-current="step"]::before{background:var(--gunes-2); transform:scale(1.5)}
  .sahne-bildirim{position:absolute; z-index:3; left:50%; top:16%; width:min(290px, 92%); transform:translate(-50%, -12px); opacity:0; transition:opacity .45s var(--egri), transform .6s var(--egri-yay); pointer-events:none}
  .sahne-bildirim.etkin{opacity:1; transform:translate(-50%, 0)}
}
/* mobil: her adım kendi ekranını gösterir */
@media (max-width:979px){
  .adim-ekran .telefon{--gen:240px}
  .adim-ekran{justify-items:start}
}
/* tablet: metin solda, ekran sağda (tek sütunda sağ yarı boş kalıyordu) */
@media (min-width:640px) and (max-width:979px){
  .hikaye-adim{grid-template-columns:minmax(0,1fr) auto; column-gap:clamp(1.2rem, 3vw, 2.4rem); align-items:start}
  .adim-ekran .telefon{--gen:220px}
  .adim-ekran .kesit{max-width:300px}
  .adim-ekran .bildirim{max-width:260px}
  .adim-ekran .yol{max-width:260px}
}

/* ---------- sekmeler (ARIA) ---------- */
.sekme-liste{display:flex; flex-wrap:wrap; gap:6px; padding:5px; border-radius:18px; background:rgba(18,26,44,.06); border:1px solid var(--cizgi); width:max-content; max-width:100%}
.koyu .sekme-liste{background:rgba(255,255,255,.04); border-color:var(--gece-cizgi)}
.sekme-liste [role="tab"]{font:inherit; font-weight:800; font-size:.9rem; color:var(--murekkep-2); background:none; border:0; border-radius:13px; padding:.6rem 1rem; min-height:44px; cursor:pointer; transition:background-color .25s, color .25s, box-shadow .25s}
.koyu .sekme-liste [role="tab"]{color:var(--acik-2)}
.sekme-liste [role="tab"]:hover{color:var(--murekkep)}
.koyu .sekme-liste [role="tab"]:hover{color:var(--acik)}
.sekme-liste [role="tab"][aria-selected="true"]{background:var(--kart); color:var(--murekkep); box-shadow:0 6px 16px -10px rgba(18,26,44,.5), inset 0 -3px 0 var(--rol)}
.koyu .sekme-liste [role="tab"][aria-selected="true"]{background:var(--gece-4); color:var(--acik); box-shadow:inset 0 -3px 0 var(--rol)}
.sekme-paneli[hidden]{display:none}
.js .sekme-paneli.oynat > *{animation:panel-gel .55s var(--egri) both}
.js .sekme-paneli.oynat > :nth-child(2){animation-delay:.07s}
@keyframes panel-gel{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
.no-js [role="tablist"]{display:none}
.no-js .sekme-paneli + .sekme-paneli{margin-top:2.5rem}

/* uygulama sekme çubuğu taklidi (sağlık defteri, hasta kaydı) */
.uyg-sekmeler{display:flex; border-bottom:1.5px solid #F0D9CF; background:var(--seftali); border-radius:16px 16px 0 0; overflow-x:auto; scrollbar-width:none}
.uyg-sekmeler [role="tab"]{flex:1 0 auto; font:inherit; font-size:.9rem; font-weight:700; color:#6E5A50; background:none; border:0; padding:.8rem .9rem; min-height:48px; cursor:pointer; position:relative}
.uyg-sekmeler [role="tab"][aria-selected="true"]{color:var(--kiremit)}
.uyg-sekmeler [role="tab"][aria-selected="true"]::after{content:""; position:absolute; left:22%; right:22%; bottom:-1.5px; height:3px; border-radius:3px 3px 0 0; background:var(--kiremit)}

/* ---------- kapılar (rol sayfalarına) ---------- */
.kapilar{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(.8rem, 1.6vw, 1.4rem)}
@media (max-width:960px){.kapilar{grid-template-columns:minmax(0,1fr)}}
.kapi{--n:var(--sahip); position:relative; display:grid; grid-template-rows:auto 1fr auto; min-height:clamp(380px, 40vw, 480px); padding:1.6rem 1.6rem 0; border-radius:28px; overflow:hidden; isolation:isolate;
  text-decoration:none; color:var(--acik); background:var(--gece-2); border:1px solid var(--gece-cizgi); transition:transform .45s var(--egri), border-color .3s}
.kapi::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(80% 60% at 80% 100%, color-mix(in srgb, var(--n) 30%, transparent), transparent 70%); transition:opacity .4s}
.kapi:hover{transform:translateY(-6px); border-color:color-mix(in srgb, var(--n) 55%, transparent)}
.kapi .kapi-etiket{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--display); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.74rem; color:var(--n)}
.kapi .kapi-etiket::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--n)}
.kapi h3{font-size:clamp(1.6rem, 2.6vw, 2.2rem); line-height:1.02; letter-spacing:-.03em; font-weight:800; margin-top:.7rem}
.kapi h3 em{color:var(--n)}
.kapi p{color:var(--acik-2); margin-top:.7rem; font-size:.95rem; max-width:36ch}
.kapi .ok-bag{color:var(--n); margin-top:1rem; justify-self:start}
.kapi-gorsel{align-self:end; justify-self:end; margin-right:-.2rem; width:62%; max-width:260px; transform:translateY(14%) rotate(-4deg); transition:transform .6s var(--egri)}
.kapi:hover .kapi-gorsel{transform:translateY(8%) rotate(-2deg)}
.kapi-gorsel .telefon{--gen:240px; width:100%}
.kapi[data-rol="gezdirici"]{--n:var(--gezdirici)} .kapi[data-rol="veteriner"]{--n:var(--veteriner)} .kapi[data-rol="guven"]{--n:#7FD6A8}
@media (max-width:960px){.kapi{min-height:0; grid-template-columns:minmax(0,1fr) 38%; grid-template-rows:auto; padding:1.4rem 0 0 1.4rem; column-gap:1rem}
  .kapi > div{padding-bottom:1.4rem} .kapi-gorsel{width:100%; align-self:end; transform:translateY(10%) rotate(-3deg)}}
@media (max-width:420px){.kapi{grid-template-columns:minmax(0,1fr) 34%} .kapi p{font-size:.88rem}}

/* ---------- SSS ---------- */
.sss-izgara{display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:clamp(2rem, 5vw, 5rem); align-items:start}
@media (max-width:900px){.sss-izgara{grid-template-columns:minmax(0,1fr)}}
.sss-izgara .bolum-bas{position:sticky; top:96px}
@media (max-width:900px){.sss-izgara .bolum-bas{position:static}}
.sss{display:grid; gap:.6rem}
.sss details{border-radius:18px; background:var(--kart); border:1px solid var(--cizgi); transition:box-shadow .3s}
.sss details[open]{box-shadow:0 18px 40px -28px rgba(18,26,44,.5)}
.sss summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.05rem 1.2rem; min-height:56px;
  font-family:var(--display); font-weight:700; font-size:1.04rem; border-radius:18px}
.sss summary::-webkit-details-marker{display:none}
.sss summary::after{content:""; flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:var(--kagit-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AD4410' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/16px no-repeat; transition:transform .3s var(--egri)}
.sss details[open] summary::after{transform:rotate(135deg)}
.sss details > p,.sss details > div{padding:0 1.2rem 1.15rem; color:var(--murekkep-2)}
.sss details > div{display:grid; gap:.6rem}
.sss .grup{font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--vurgu-acik); margin:1.2rem 0 .2rem .3rem}
.sss .grup:first-child{margin-top:0}

/* ---------- kapanış çağrısı ---------- */
.cagri{position:relative; overflow:hidden; isolation:isolate}
.cagri::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 90% at 100% 100%, color-mix(in srgb, var(--rol) 26%, transparent), transparent 65%), radial-gradient(50% 70% at 0% 0%, rgba(255,193,112,.14), transparent 70%)}
.cagri .sarici{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(2rem, 5vw, 4rem); align-items:center}
@media (max-width:900px){.cagri .sarici{grid-template-columns:minmax(0,1fr)}}
.cagri h2{max-width:15ch; margin-top:.8rem}
.cagri .cta{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem}
.cagri .not{margin-top:1.2rem; font-size:.9rem; color:var(--acik-2); max-width:62ch}

/* ---------- alt bilgi ---------- */
.alt-bilgi{background:#0A0F1B; color:var(--acik-2); padding:3.4rem 0 2.2rem; font-size:.92rem}
.alt-izgara{display:grid; grid-template-columns:minmax(0,1.3fr) repeat(3, minmax(0,1fr)); gap:2rem}
@media (max-width:860px){.alt-izgara{grid-template-columns:repeat(2, minmax(0,1fr))} .alt-izgara > :first-child{grid-column:1/-1}}
@media (max-width:340px){.alt-izgara{grid-template-columns:minmax(0,1fr)}}
.alt-bilgi .marka{color:var(--acik)}
.alt-bilgi h2{font-family:var(--display); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gunes-1); font-weight:700; margin-bottom:.8rem}
.alt-bilgi ul{list-style:none; display:grid; gap:.45rem}
.alt-bilgi a{text-decoration:none; color:var(--acik-2)}
.alt-bilgi a:hover{color:var(--acik); text-decoration:underline}
.alt-bilgi .eposta{display:inline-block; margin-top:.9rem; color:var(--acik); font-weight:700; text-decoration:underline; text-decoration-color:rgba(255,193,112,.6)}
.alt-bilgi .kucuk{margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid var(--gece-cizgi); font-size:.8rem; display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; justify-content:space-between}
.alt-bilgi .kucuk a{text-decoration:underline}

/* ---------- veri grafikleri ---------- */
/* iptal çizelgesi */
.cizelge{border-radius:24px; background:var(--kart); box-shadow:var(--golge-kart); padding:clamp(1.2rem, 3vw, 2rem)}
.cizelge-eksen{list-style:none; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:4px; margin-top:1.2rem}
.cizelge-dilim{position:relative; padding:.9rem .8rem 1rem; border-radius:14px; background:var(--kagit); min-height:132px; display:grid; align-content:start; gap:.35rem;
  transition:background-color .35s, transform .35s var(--egri), box-shadow .35s}
.cizelge-dilim b{font-family:var(--display); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--murekkep-2)}
.cizelge-dilim strong{font-family:var(--display); font-size:1.05rem; line-height:1.2}
.cizelge-dilim span{font-size:.84rem; color:var(--murekkep-2); line-height:1.4}
.cizelge-dilim::before{content:""; position:absolute; left:0; right:0; top:0; height:5px; border-radius:14px 14px 0 0; background:var(--d)}
.cizelge-dilim.secili{background:#FFF1E8; transform:translateY(-4px); box-shadow:0 18px 30px -22px rgba(169,67,16,.6), inset 0 0 0 2px var(--d)}
.cizelge-kaydir{display:grid; gap:.5rem; margin-top:1.4rem}
.cizelge-kaydir label{font-weight:800; font-size:.92rem}
.cizelge-kaydir input[type="range"]{width:100%; accent-color:var(--kiremit); min-height:32px; cursor:pointer}
.cizelge-sonuc{font-weight:700; padding:.8rem 1rem; border-radius:14px; background:var(--gece); color:var(--acik); font-size:.95rem; min-height:3.2em}
.cizelge-sonuc b{color:var(--gunes-1)}
.cizelge-istisna{margin-top:1rem; display:grid; gap:.5rem; font-size:.9rem; color:var(--murekkep-2)}
.cizelge-istisna li{list-style:none; padding-left:1.4rem; position:relative}
.cizelge-istisna li::before{content:""; position:absolute; left:0; top:.55em; width:.7rem; height:.7rem; border-radius:50%; background:var(--gezdirici-k)}
@media (max-width:760px){.cizelge-eksen{grid-template-columns:repeat(2, minmax(0,1fr))}}

/* haftalık hakediş şeridi */
.hafta{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; margin-top:1rem}
.gun{border-radius:12px; background:rgba(255,255,255,.05); border:1px solid var(--gece-cizgi); padding:.6rem .4rem; min-height:110px; display:grid; align-content:space-between; font-size:.78rem; text-align:center; color:var(--acik-2); position:relative}
.gun b{font-family:var(--display); font-size:.9rem; color:var(--acik)}
.gun.kesim{background:color-mix(in srgb, var(--gezdirici) 16%, transparent); border-color:color-mix(in srgb, var(--gezdirici) 50%, transparent)}
.gun.odeme{background:color-mix(in srgb, var(--gunes-1) 18%, transparent); border-color:color-mix(in srgb, var(--gunes-1) 55%, transparent)}
.gun i{font-style:normal; font-weight:800; color:var(--acik); font-size:.74rem; line-height:1.25}
@media (max-width:560px){.gun{min-height:96px; font-size:.7rem; padding:.5rem .2rem} .gun i{font-size:.66rem}}
.durum-zinciri{list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:1.2rem}
.durum-zinciri li{display:inline-flex; align-items:center; gap:.5rem; padding:.45rem .8rem; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--gece-cizgi); font-weight:800; font-size:.86rem}
.durum-zinciri li + li::before{content:"→"; margin-right:.35rem; color:var(--rol); font-weight:800}
.durum-zinciri.yan li{background:transparent; border-style:dashed}
.durum-zinciri.yan li + li::before{content:"·"}

/* seviye merdiveni */
.merdiven{list-style:none; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); align-items:end; gap:clamp(.4rem, 1vw, .8rem); margin-top:1rem}
.basamak{display:grid; gap:.4rem; align-content:start; padding:1rem .9rem; border-radius:18px 18px 6px 6px; background:var(--kart); box-shadow:var(--golge-kart); min-height:calc(110px + var(--i) * 46px); position:relative}
.basamak .rozet{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-family:var(--display); font-weight:800; color:var(--murekkep); background:var(--r)}
.basamak strong{font-family:var(--display); font-size:1.05rem}
.basamak span{font-size:.82rem; color:var(--murekkep-2); line-height:1.4}
.basamak.bronz{--r:#D9A57C} .basamak.gumus{--r:#DAD6CF} .basamak.altin{--r:#EBC65E} .basamak.usta{--r:var(--marka)}
@media (max-width:560px){.merdiven{grid-template-columns:repeat(2, minmax(0,1fr))} .basamak{min-height:0}}

/* terazi: puanı artıran / düşüren */
.terazi{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1rem}
@media (max-width:640px){.terazi{grid-template-columns:minmax(0,1fr)}}
.terazi > div{border-radius:20px; padding:1.2rem 1.3rem; background:var(--kart); box-shadow:var(--golge-kart)}
.terazi h3{display:flex; align-items:center; gap:.5rem; font-size:1.05rem}
.terazi h3 svg{width:22px; height:22px}
.terazi ul{list-style:none; display:grid; gap:.5rem; margin-top:.8rem; font-size:.92rem; color:var(--murekkep-2)}
.terazi .arti h3{color:var(--gezdirici-k)} .terazi .eksi h3{color:#B3261E}

/* erişim süreleri (veteriner) */
.sureler{display:grid; gap:1rem}
.sure{display:grid; grid-template-columns:minmax(0,14rem) minmax(0,1fr); gap:1rem; align-items:center}
@media (max-width:700px){.sure{grid-template-columns:minmax(0,1fr); gap:.5rem}}
.sure-ad strong{display:block; font-family:var(--display); font-size:1.05rem}
.sure-ad span{font-size:.85rem; color:var(--acik-2)}
.sure-cubuk{position:relative; height:46px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid var(--gece-cizgi); overflow:hidden}
.sure-cubuk i{position:absolute; left:0; top:0; bottom:0; width:var(--w); border-radius:11px; background:var(--c, var(--veteriner)); transform-origin:left; display:flex; align-items:center; padding-left:.8rem; font-style:normal; font-weight:800; font-size:.82rem; color:#0B1120; white-space:nowrap}
.sure-cubuk.sonsuz i{background:linear-gradient(90deg, var(--veteriner) 70%, rgba(134,182,255,0))}
@supports (animation-timeline: view()){
  .js .sure-cubuk i{animation:cubuk-dol linear both; animation-timeline:view(); animation-range:entry 20% cover 45%}
}
@keyframes cubuk-dol{from{transform:scaleX(.04)}to{transform:scaleX(1)}}

/* mahremiyet matrisi */
.matris-kap{overflow-x:auto; border-radius:22px; box-shadow:var(--golge-kart); background:var(--kart)}
.matris{border-collapse:separate; border-spacing:0; width:100%; min-width:760px; font-size:.9rem}
.matris caption{text-align:left; padding:1.1rem 1.2rem .4rem; font-weight:800; font-family:var(--display)}
.matris th,.matris td{padding:.8rem .9rem; border-bottom:1px solid var(--cizgi); vertical-align:top; text-align:left}
.matris thead th{font-family:var(--display); font-size:.8rem; letter-spacing:.04em; color:var(--murekkep-2); background:var(--kagit); position:sticky; top:0}
.matris tbody th{font-weight:800; width:26%}
.matris tbody tr:last-child > *{border-bottom:0}
.var,.yok,.kosul{display:inline-flex; align-items:flex-start; gap:.4rem; font-weight:700; line-height:1.35}
.var::before,.yok::before,.kosul::before{content:""; flex:0 0 auto; width:18px; height:18px; margin-top:.05em; border-radius:50%; background:center/12px no-repeat}
.var{color:var(--gezdirici-k)} .var::before{background-color:#D9F3EA; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A7360' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")}
.yok{color:#8A2A23} .yok::before{background-color:#FBE3E0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A2A23' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
.kosul{color:#7A4A06} .kosul::before{background-color:#FCEBC9; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A4A06' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Cpath d='M12 8v4l2.5 1.5'/%3E%3C/svg%3E")}
.matris td small{display:block; font-weight:600; color:var(--murekkep-2); font-size:.78rem; margin-top:.2rem; padding-left:1.6rem}
/* telefonda tablo yerine satır kartları: her hücre kendi sütun adını taşır (data-etiket) */
@media (max-width:860px){
  .matris{min-width:0}
  .matris thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  /* iki sütunlu hücreler: satır kartının yüksekliği yarıya iner (hakem S13: 375 px'te 2147 px'lik blok) */
  .matris tbody{display:block}
  .matris tr{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.55rem .9rem; padding:.85rem 1rem; border-bottom:1px solid var(--cizgi)}
  .matris tbody tr:last-child{border-bottom:0}
  .matris tbody th{grid-column:1 / -1; width:auto; padding:0; border:0}
  .matris td{display:grid; gap:.15rem; align-content:start; padding:0; border:0}
  .matris td::before{content:attr(data-etiket); font-size:.74rem; color:var(--murekkep-2); font-weight:700; line-height:1.3}
  .matris td small{padding-left:1.6rem; margin-top:0}
}

/* kanıt zinciri */
.zincir{list-style:none; display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:0; position:relative; counter-reset:z}
.zincir::before{content:""; position:absolute; left:8%; right:8%; top:31px; height:4px; border-radius:4px; background:repeating-linear-gradient(90deg, rgba(18,26,44,.18) 0 10px, transparent 10px 18px)}
.zincir li{position:relative; display:grid; justify-items:center; text-align:center; gap:.5rem; padding:0 .4rem}
.zincir .halka{width:66px; height:66px; border-radius:50%; display:grid; place-items:center; background:var(--kart); box-shadow:0 0 0 6px var(--kagit-2), var(--golge-kart); color:var(--rol-k); z-index:1}
.zincir .halka svg{width:28px; height:28px}
.zincir strong{font-family:var(--display); font-size:1rem; line-height:1.2}
.zincir span{font-size:.84rem; color:var(--murekkep-2); line-height:1.45}
@media (max-width:900px){
  .zincir{grid-template-columns:minmax(0,1fr); gap:1.2rem}
  .zincir::before{left:31px; right:auto; top:8px; bottom:8px; width:4px; height:auto; background:repeating-linear-gradient(180deg, rgba(18,26,44,.18) 0 10px, transparent 10px 18px)}
  .zincir li{grid-template-columns:66px minmax(0,1fr); justify-items:start; text-align:left; column-gap:1rem; padding:0}
  .zincir .halka{grid-row:span 2}
}

/* olay akışı */
.akis{list-style:none; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1rem; position:relative}
@media (max-width:900px){.akis{grid-template-columns:minmax(0,1fr)}}
.akis > li{position:relative; border-radius:22px; padding:1.3rem 1.3rem 1.4rem; background:var(--kart); box-shadow:var(--golge-kart); display:grid; gap:.55rem; align-content:start}
.akis > li + li::before{content:""; position:absolute; left:-1rem; top:50%; width:1rem; height:3px; background:var(--rol-k)}
@media (max-width:900px){.akis > li + li::before{left:2rem; top:-1rem; width:3px; height:1rem}}
.akis .adim-no{font-family:var(--display); font-weight:800; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--rol-k)}
.akis h3{font-size:1.15rem}
.akis p,.akis li li{font-size:.9rem; color:var(--murekkep-2)}
.akis ul{list-style:none; display:grid; gap:.3rem}
.akis ul li::before{content:"· "; color:var(--rol-k); font-weight:800}

/* özellik kartları (atlas) */
.atlas-arac{display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.2rem; margin-bottom:2rem}
.atlas-arac input[type="search"]{font:inherit; min-height:48px; padding:.6rem 1rem .6rem 2.6rem; border-radius:999px; border:2px solid var(--cizgi); background:var(--kart) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5269' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") 1rem center/18px no-repeat; width:min(340px, 100%)}
.atlas-arac input[type="search"]:focus-visible{border-color:var(--gunes-2); outline-offset:2px}
.suzgec{display:flex; flex-wrap:wrap; gap:6px}
.suzgec button{font:inherit; font-weight:800; font-size:.88rem; min-height:44px; padding:.5rem 1rem; border-radius:999px; border:2px solid var(--cizgi); background:transparent; color:var(--murekkep-2); cursor:pointer; display:inline-flex; align-items:center; gap:.45rem}
.suzgec button::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--n, var(--murekkep-2))}
.suzgec button[aria-pressed="true"]{background:var(--murekkep); color:var(--acik); border-color:var(--murekkep)}
.atlas-sayac{font-weight:800; font-size:.9rem; color:var(--murekkep-2)}
.atlas-grup{padding-top:2.4rem}
.atlas-grup > h2{font-size:clamp(1.5rem, 2.6vw, 2.1rem); display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap}
.atlas-grup > h2 small{font-family:var(--body); font-size:.9rem; font-weight:700; letter-spacing:0; color:var(--murekkep-2)}
.atlas-grup > p{color:var(--murekkep-2); margin-top:.4rem; max-width:62ch}
.atlas-izgara{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap:.9rem; margin-top:1.4rem}
.oz{border-radius:20px; background:var(--kart); border:1px solid var(--cizgi); padding:1.15rem 1.2rem .3rem; display:grid; align-content:start; gap:.35rem; transition:box-shadow .3s, transform .3s var(--egri)}
.oz:hover{box-shadow:0 20px 40px -30px rgba(18,26,44,.55)}
.oz-rol{display:flex; flex-wrap:wrap; gap:.3rem}
.oz-rol span{font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:.12rem .5rem; border-radius:999px; background:color-mix(in srgb, var(--n) 18%, white); color:var(--k)}
.oz-rol .r-sahip{--n:var(--sahip); --k:var(--sahip-k)} .oz-rol .r-gezdirici{--n:var(--gezdirici); --k:var(--gezdirici-k)} .oz-rol .r-veteriner{--n:var(--veteriner); --k:var(--veteriner-k)} .oz-rol .r-herkes{--n:#9AA3B5; --k:#3B4356}
.oz h3{font-size:1.08rem; margin-top:.2rem}
.oz .oz-deger{color:var(--murekkep-2); font-size:.92rem; line-height:1.45}
.oz details{border-top:1px solid var(--cizgi); margin-top:.5rem}
.oz summary{list-style:none; cursor:pointer; font-weight:800; font-size:.85rem; color:var(--vurgu-acik); padding:.7rem 0; min-height:44px; display:flex; align-items:center; gap:.4rem}
.oz summary::-webkit-details-marker{display:none}
.oz summary::after{content:"+"; font-size:1.1rem; line-height:1; transition:transform .3s var(--egri)}
.oz details[open] summary::after{transform:rotate(45deg)}
.oz details > div{display:grid; gap:.6rem; padding-bottom:1rem; font-size:.9rem; color:var(--murekkep-2)}
.oz details img{border-radius:14px; box-shadow:0 0 0 1px var(--cizgi); max-height:260px; width:auto; max-width:100%; object-fit:contain; object-position:left top}
.oz .yol{margin-top:0}
.oz[hidden],.atlas-grup[hidden]{display:none}
.henuz{border-radius:26px; padding:clamp(1.4rem, 3vw, 2.2rem); background:var(--gece); color:var(--acik)}
.henuz ul{list-style:none; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap:.8rem 1.4rem; margin-top:1.2rem}
.henuz li{padding-left:1.6rem; position:relative; font-size:.92rem; color:var(--acik-2)}
.henuz li strong{color:var(--acik); display:block}
.henuz li::before{content:""; position:absolute; left:0; top:.4em; width:12px; height:12px; border-radius:50%; border:2px dashed var(--gunes-1)}

/* ---------- ortak bölüm iskeletleri ---------- */
.iki-sutun{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem, 5vw, 5rem); align-items:center}
.iki-sutun.ters > :first-child{order:2}
@media (max-width:900px){.iki-sutun{grid-template-columns:minmax(0,1fr)} .iki-sutun.ters > :first-child{order:0}}
.madde-liste{list-style:none; display:grid; gap:1.1rem; margin-top:1.6rem}
.madde-liste li{display:grid; grid-template-columns:28px minmax(0,1fr); gap:.85rem; color:var(--murekkep-2); font-size:.96rem}
.koyu .madde-liste li{color:var(--acik-2)}
.madde-liste svg{width:24px; height:24px; color:var(--rol-k); margin-top:.15rem}
.koyu .madde-liste svg{color:var(--rol)}
.madde-liste strong{display:block; font-family:var(--display); font-weight:700; color:var(--murekkep); font-size:1.04rem}
.koyu .madde-liste strong{color:var(--acik)}
.yigin{position:relative; display:grid; justify-items:center}
.yigin .telefon{z-index:1}
.yigin .uzanti{position:absolute; z-index:2; width:min(300px, 64%)}
.cip-dizi{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem}
.cip{display:inline-flex; align-items:center; gap:.35rem; padding:.32rem .75rem; border-radius:999px; background:#F7DDD2; color:#5E3A2B; font-weight:800; font-size:.84rem}
.koyu .cip{background:rgba(255,255,255,.07); color:var(--acik); border:1px solid var(--gece-cizgi)}

/* ---------- işaretli telefon (numaralı açıklamalar) ---------- */
.not-tel{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(1.5rem, 4vw, 3.5rem); align-items:center}
@media (max-width:760px){.not-tel{grid-template-columns:minmax(0,1fr); justify-items:start}}
.not-tel .yer{position:relative}
.isaret{position:absolute; left:var(--x); top:var(--y); width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%; display:grid; place-items:center; z-index:2;
  font-family:var(--display); font-weight:800; font-size:.85rem; color:#0B1120; background:var(--rol); box-shadow:0 0 0 4px rgba(14,21,37,.55), 0 6px 14px -4px rgba(0,0,0,.6); transition:transform .3s var(--egri-yay), opacity .3s}
.isaret::after{content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid var(--rol); opacity:0}
.js .not-tel.oynat .isaret::after{animation:isaret-nabiz 1.6s ease-out 2 both; animation-delay:calc(var(--i) * .25s)}
@keyframes isaret-nabiz{0%{opacity:.8; transform:scale(.8)}100%{opacity:0; transform:scale(1.8)}}
.notlar{list-style:none; display:grid; gap:1rem; counter-reset:n}
.notlar li{display:grid; grid-template-columns:30px minmax(0,1fr); gap:.8rem; align-items:start; color:var(--murekkep-2); font-size:.95rem; border-radius:14px; padding:.35rem; margin:-.35rem; transition:background-color .25s}
.koyu .notlar li{color:var(--acik-2)}
.notlar li::before{counter-increment:n; content:counter(n); width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:.85rem; color:#0B1120; background:var(--rol)}
.notlar strong{display:block; color:var(--murekkep); font-family:var(--display); font-size:1.03rem}
.koyu .notlar strong{color:var(--acik)}
.not-tel:has(.notlar li:hover) .isaret{opacity:.45}
.not-tel:has(.notlar li:nth-child(1):hover) .isaret:nth-of-type(1),.not-tel:has(.notlar li:nth-child(2):hover) .isaret:nth-of-type(2),
.not-tel:has(.notlar li:nth-child(3):hover) .isaret:nth-of-type(3),.not-tel:has(.notlar li:nth-child(4):hover) .isaret:nth-of-type(4),
.not-tel:has(.notlar li:nth-child(5):hover) .isaret:nth-of-type(5){opacity:1; transform:scale(1.25)}
.notlar li:hover{background:rgba(255,255,255,.05)}

/* ---------- saha hattı (gezdiricinin düğmeleri, sırasıyla) ---------- */
.saha-hatti{list-style:none; display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:.6rem; position:relative; padding-top:1.4rem}
.saha-hatti::before,.saha-hatti::after{content:""; position:absolute; left:4%; right:4%; top:calc(1.4rem + 22px); height:4px; border-radius:4px}
.saha-hatti::before{background:repeating-linear-gradient(90deg, rgba(214,224,255,.25) 0 10px, transparent 10px 18px)}
.saha-hatti::after{background:linear-gradient(90deg, var(--gezdirici), var(--gunes-1)); transform-origin:left; transform:scaleX(1)}
.js .saha-hatti:not(.oynat):not(.oynadi)::after{transform:scaleX(0)}
.saha-hatti.oynat::after{animation:hat-dol 5.4s cubic-bezier(.45,.05,.3,1) both}
@keyframes hat-dol{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.saha-hatti li{position:relative; z-index:1; display:grid; justify-items:center; align-content:start; text-align:center; gap:.55rem}
.saha-dugme{display:inline-flex; align-items:center; justify-content:center; gap:.35rem; min-height:46px; padding:.55rem .9rem; border-radius:999px; font-weight:800; font-size:.86rem; line-height:1.2;
  background:#FFF3EE; color:#7A3416; border:1.5px solid #CDA594; box-shadow:0 10px 24px -14px rgba(0,0,0,.9)}
.saha-dugme.dolu{background:#A33E12; color:#FFF3EC; border-color:transparent}
.saha-dugme.yesil{background:#2BB39A; color:#06231D; border-color:transparent}
.saha-dugme.cip-li{font-size:.74rem; padding:.45rem .7rem}
.saha-hatti small{font-size:.78rem; color:var(--acik-2); line-height:1.35; max-width:17ch}
.saha-hatti.oynat .saha-dugme{animation:bas .55s var(--egri-yay) both; animation-delay:calc(var(--i) * .9s + .2s)}
@keyframes bas{0%{transform:scale(1)}40%{transform:scale(.9)}70%{transform:scale(1.06); box-shadow:0 0 0 10px rgba(61,211,178,.2)}100%{transform:none}}
@media (max-width:900px){
  .saha-hatti{grid-template-columns:minmax(0,1fr); gap:1rem; padding-top:0}
  .saha-hatti::before,.saha-hatti::after{left:22px; right:auto; top:12px; bottom:12px; width:4px; height:auto}
  .saha-hatti::before{background:repeating-linear-gradient(180deg, rgba(214,224,255,.25) 0 10px, transparent 10px 18px)}
  .saha-hatti::after{transform-origin:top}
  .saha-hatti.oynat::after{animation-name:hat-dol-y}
  .js .saha-hatti:not(.oynat):not(.oynadi)::after{transform:scaleY(0)}
  .saha-hatti li{grid-template-columns:auto minmax(0,1fr); justify-items:start; text-align:left; align-items:center; column-gap:1rem}
  .saha-hatti small{max-width:none}
}
@keyframes hat-dol-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
/* 320 px: uzun çip (Kaka · Çiş · …) yanındaki açıklamayı ekran dışına itiyordu (ölçüldü +24 px) */
@media (max-width:480px){
  .saha-hatti li{grid-template-columns:minmax(0,1fr); row-gap:.3rem}
  .saha-hatti small{padding-left:2.6rem}
  .saha-dugme.cip-li{flex-wrap:wrap; justify-content:flex-start}
}

/* ---------- kod devri (sahip telefonu → veteriner telefonu) ---------- */
.kod-devri{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.7fr) minmax(0,1fr); align-items:center; gap:clamp(.8rem, 2vw, 2rem)}
.kod-devri figure{display:grid; justify-items:center; gap:.3rem}
.kod-devri .telefon{--gen:270px}
.rol-ad{--n:var(--sahip); font-family:var(--display); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.74rem; display:inline-flex; gap:.45rem; align-items:center; margin-bottom:.6rem; color:var(--n)}
.rol-ad::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--n)}
.rol-ad.vet{--n:var(--veteriner)}
.kod-yol{position:relative; display:grid; justify-items:center; gap:1rem; text-align:center}
.kod-hane{display:flex; gap:4px; justify-content:center; font-family:var(--display); font-weight:800; font-variant-numeric:tabular-nums}
.kod-hane span{display:grid; place-items:center; width:1.6em; height:2em; border-radius:8px; background:var(--acik); color:var(--murekkep); font-size:clamp(1rem, 1.6vw, 1.25rem); box-shadow:0 10px 20px -12px rgba(0,0,0,.8)}
.kod-hane span:nth-child(5){margin-left:.5rem}
.js .kod-devri.oynat .kod-hane span{animation:hane-uc 1.4s var(--egri) both; animation-delay:calc(var(--i) * .09s + .3s)}
@keyframes hane-uc{0%{opacity:0; transform:translateX(-80px) translateY(-18px) rotate(-10deg)}60%{opacity:1}100%{opacity:1; transform:none}}
.kod-ok{width:min(220px, 100%); height:auto; color:var(--veteriner)}
.kod-ok .yol-cizgi{fill:none; stroke:currentColor; stroke-width:2.5; stroke-dasharray:4 8; opacity:.6}
.kod-yol p{font-size:.86rem; color:var(--acik-2); max-width:26ch}
@media (max-width:900px){.kod-devri{grid-template-columns:minmax(0,1fr)} .kod-ok{transform:rotate(90deg); width:90px}}

/* ---------- süreç rayı (numaralı duraklar = gerçek sıra) ---------- */
.surec{list-style:none; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:.6rem; counter-reset:s}
.surec li{position:relative}
.surec a{display:grid; gap:.3rem; align-content:start; height:100%; padding:1rem 1rem 1.1rem; border-radius:18px; text-decoration:none; background:rgba(255,255,255,.04); border:1px solid var(--gece-cizgi); transition:background-color .25s, border-color .25s, transform .3s var(--egri)}
.surec a:hover{background:rgba(255,255,255,.08); border-color:color-mix(in srgb, var(--rol) 60%, transparent); transform:translateY(-3px)}
.surec a::before{counter-increment:s; content:counter(s, decimal-leading-zero); font-family:var(--display); font-weight:800; font-size:.85rem; color:var(--rol); letter-spacing:.06em}
.surec strong{font-family:var(--display); font-size:1.08rem; color:var(--acik)}
.surec span{font-size:.84rem; color:var(--acik-2); line-height:1.4}
@media (max-width:900px){.surec{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width:480px){.surec{grid-template-columns:minmax(0,1fr)}}

/* ---------- görür / görmez ---------- */
.gorur{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1rem}
@media (max-width:760px){.gorur{grid-template-columns:minmax(0,1fr)}}
.gorur > div{border-radius:22px; padding:1.3rem 1.4rem; background:var(--kart); box-shadow:var(--golge-kart)}
.gorur h3{display:flex; gap:.55rem; align-items:center}
.gorur ul{list-style:none; display:grid; gap:.55rem; margin-top:.9rem; font-size:.93rem; color:var(--murekkep-2)}
.gorur li{display:grid; grid-template-columns:20px minmax(0,1fr); gap:.6rem}
.gorur li::before{content:""; width:18px; height:18px; margin-top:.15em; border-radius:50%; background:center/12px no-repeat}
.gorur .evet li::before{background-color:#D9F3EA; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A7360' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")}
.gorur .hayir li::before{background-color:#FBE3E0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A2A23' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
.gorur .evet h3{color:var(--gezdirici-k)} .gorur .hayir h3{color:#8A2A23}

/* ---------- bilgi kartları (mevzuat, güvence) ---------- */
.kartlar{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap:1rem}
.bilgi-kart{border-radius:22px; padding:1.3rem 1.3rem 1.4rem; background:var(--kart); box-shadow:var(--golge-kart); display:grid; gap:.5rem; align-content:start}
.koyu .bilgi-kart{background:var(--gece-2); box-shadow:none; border:1px solid var(--gece-cizgi)}
.bilgi-kart .ust-etiket{font-family:var(--display); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:.72rem; color:var(--rol-k)}
.koyu .bilgi-kart .ust-etiket{color:var(--rol)}
.bilgi-kart h3{font-size:1.12rem}
.bilgi-kart p{font-size:.92rem; color:var(--murekkep-2)}
.koyu .bilgi-kart p{color:var(--acik-2)}

/* ---------- görsel kaynakları ---------- */
.kaynak-liste{list-style:none; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap:.2rem 1.6rem; font-size:.88rem; color:var(--murekkep-2)}
.kaynak-liste li{padding:.6rem 0; border-bottom:1px solid var(--cizgi)}
.kaynak-liste strong{color:var(--murekkep)}

/* =========================================================================
   SATIŞ TURU (2026-11-05): cihaza göre düğme, QR, alt çubuk, canlı sayılar,
   kupon, "haber ver" formu, mobil gün şeridi. Ana sayfa + rol sayfaları ortak.
   ========================================================================= */
/* ---------- cihaza göre ana düğme ----------
   <head>'deki tek satırlık betik <html data-cihaz="android|iphone|masaustu|mobil"> yazar (ilk boyamadan önce;
   yanlış düğme bir an görünüp değişmez). JS yoksa data-cihaz yok → "varsayilan" (Android indir + web). */
.cihaz-cta [data-cihaz-secenek]{display:none}
html:not([data-cihaz]) .cihaz-cta [data-cihaz-secenek~="varsayilan"],
html[data-cihaz="mobil"] .cihaz-cta [data-cihaz-secenek~="varsayilan"],
html[data-cihaz="android"] .cihaz-cta [data-cihaz-secenek~="android"],
html[data-cihaz="iphone"] .cihaz-cta [data-cihaz-secenek~="iphone"],
html[data-cihaz="masaustu"] .cihaz-cta [data-cihaz-secenek~="masaustu"]{display:block}
.cihaz-cta .cta{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; align-items:flex-start}
.cta-cihaz{margin-top:.8rem; font-size:.86rem; color:var(--murekkep-2); max-width:58ch}
.koyu .cta-cihaz{color:var(--acik-2)}
.cta-cihaz a{font-weight:800}
.cta-alt{margin-top:.45rem; font-size:.86rem; font-weight:700; color:var(--murekkep-2)}
.koyu .cta-alt{color:var(--acik)}
.cta-kosul{display:inline-flex; align-items:center; gap:.45rem; margin-top:.9rem; padding:.4rem .8rem; border-radius:12px; font-size:.86rem; font-weight:800; background:rgba(255,193,112,.12); color:var(--gunes-1); border:1px solid rgba(255,193,112,.35)}
.cta-kosul svg{width:18px; height:18px; flex:0 0 auto}

/* ---------- QR (masaüstü → telefona indir) ---------- */
.qr-ac{position:relative}
.qr-ac summary{list-style:none; cursor:pointer}
.qr-ac summary::-webkit-details-marker{display:none}
.qr-ac summary::after{content:""; width:.5em; height:.5em; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-.15em) rotate(45deg); margin-left:.15rem; transition:transform .25s var(--egri)}
.qr-ac[open] summary::after{transform:translateY(.12em) rotate(-135deg)}
.qr-kutu{position:absolute; z-index:20; left:0; top:calc(100% + .6rem); width:220px; padding:.9rem; border-radius:20px; background:#fff; color:var(--murekkep-2); box-shadow:0 30px 60px -24px rgba(0,0,0,.7); display:grid; gap:.6rem; justify-items:center; text-align:center; font-size:.8rem; line-height:1.4}
.qr-kutu b{color:var(--murekkep); overflow-wrap:anywhere}
.qr-kutu img,.qr-satir img{width:148px; height:148px; flex:0 0 auto}
.qr-satir{display:flex; align-items:center; gap:1rem; margin-top:1.1rem; padding:.7rem 1rem .7rem .7rem; border-radius:20px; background:#fff; color:var(--murekkep-2); max-width:440px; font-size:.86rem; line-height:1.45}
.qr-satir b{display:block; color:var(--murekkep); font-family:var(--display); font-size:1rem; margin-bottom:.2rem}

/* ---------- telefonda alt çubuk (≤520 px; ana düğmeler ekrandayken gizli) ---------- */
.alt-cubuk{position:fixed; left:0; right:0; bottom:0; z-index:70; padding:.6rem 16px calc(.6rem + env(safe-area-inset-bottom, 0px));
  background:rgba(14,21,37,.95); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-top:1px solid var(--gece-cizgi); color:var(--acik);
  animation:cubuk-gel .35s var(--egri) both}
.alt-cubuk-ic{display:flex; align-items:center; gap:1rem}
.alt-cubuk .dugme{flex:1 1 auto; min-height:46px; padding:.6rem 1rem}
.alt-cubuk-ikincil{flex:0 0 auto; display:inline-flex; align-items:center; min-height:44px; font-weight:800; font-size:.9rem; color:var(--acik); text-underline-offset:4px}
.alt-cubuk :focus-visible{outline-color:var(--gunes-1)}
@keyframes cubuk-gel{from{transform:translateY(100%)}to{transform:none}}
@media (min-width:521px){.alt-cubuk{display:none!important}}

/* ---------- APK güvencesi ---------- */
.apk-not{margin-top:2rem; padding:1.2rem 1.3rem .4rem; border-radius:22px; background:rgba(255,255,255,.04); border:1px solid var(--gece-cizgi); max-width:68ch}
.apk-not h3{font-size:1.05rem}
.apk-not > p{margin-top:.5rem; font-size:.92rem; color:var(--acik-2)}

/* ---------- canlı sayılar (vitrin: fiyat, hakediş) ---------- */
.vitrin{border-radius:24px; padding:clamp(1.2rem, 3vw, 1.8rem); background:var(--gece-2); border:1px solid var(--gece-cizgi); color:var(--acik)}
.vitrin-yedek{font-size:1rem; line-height:1.55}
.vitrin-canli{display:grid; gap:1.1rem}
.vitrin h3{font-size:1rem; letter-spacing:.01em; margin-bottom:.6rem}
.sure-listesi,.paket-listesi{list-style:none; display:grid; gap:.5rem}
.sure-listesi{grid-template-columns:repeat(auto-fit, minmax(88px, 1fr))}
.paket-listesi{grid-template-columns:repeat(auto-fit, minmax(128px, 1fr))}
.sure-listesi li{border-radius:16px; padding:.7rem .85rem; background:rgba(255,255,255,.05); border:1px solid var(--gece-cizgi); display:grid; gap:.1rem}
.sure-listesi b{font-family:var(--display); font-size:1.35rem; font-variant-numeric:tabular-nums}
.sure-listesi span{font-size:.82rem; color:var(--acik-2)}
.paket-listesi li{border-radius:16px; padding:.8rem .9rem; background:var(--acik); color:var(--murekkep); display:grid; gap:.15rem}
.paket-listesi .ad{font-weight:800; font-size:.88rem}
.paket-listesi .fiyat{font-family:var(--display); font-weight:800; font-size:1.3rem; font-variant-numeric:tabular-nums}
.paket-listesi .birim{font-size:.8rem; color:var(--murekkep-2)}
.vitrin-not{font-size:.9rem; color:var(--acik-2)}
.vitrin .kaynak{margin-top:-.4rem}

/* ---------- kupon ---------- */
.kupon-kutu{display:grid; gap:.5rem; font-size:.94rem; color:var(--murekkep-2)}
.kupon-kod{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem}
.kupon-kod code{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:1.15rem; font-weight:800; letter-spacing:.06em; padding:.35rem .7rem; border-radius:10px; background:var(--gece); color:var(--gunes-1)}
.kupon-kopyala{font:inherit; font-weight:800; font-size:.86rem; min-height:44px; padding:.4rem 1rem; border-radius:999px; border:2px solid rgba(18,26,44,.25); background:transparent; color:var(--murekkep); cursor:pointer}
.kupon-not{min-height:1.2em; font-size:.84rem; font-weight:800; color:var(--gezdirici-k)}

/* ---------- "ilime gelince haber ver" formu ---------- */
.haber-kap{position:relative; border-radius:22px; padding:0 1.35rem; background:var(--kart); box-shadow:var(--golge-kart)}
.haber-kap > summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:60px; padding:1rem 0; font-family:var(--display); font-weight:700; font-size:1.12rem}
.haber-kap > summary::-webkit-details-marker{display:none}
.haber-kap > summary::after{content:""; flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:var(--kagit-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AD4410' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/16px no-repeat; transition:transform .3s var(--egri)}
.haber-kap[open] > summary::after{transform:rotate(135deg)}
.haber-kap > :last-child{padding-bottom:1.35rem}
.haber-form{display:grid; gap:.85rem}
.haber-giris,.haber-nojs{font-size:.94rem; color:var(--murekkep-2)}
.alanlar{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:.8rem}
@media (max-width:560px){.alanlar{grid-template-columns:minmax(0,1fr)}}
.alan{display:grid; gap:.3rem}
.alan label{font-weight:800; font-size:.88rem}
.alan input,.alan select{font:inherit; min-height:48px; padding:.55rem .85rem; border-radius:14px; border:2px solid rgba(18,26,44,.25); background:var(--kart); color:var(--murekkep); width:100%}
.alan input:focus-visible,.alan select:focus-visible{border-color:var(--vurgu-acik)}
.alan [aria-invalid="true"],.onay input[aria-invalid="true"]{border-color:#B3261E; outline:2px solid #B3261E; outline-offset:2px}
.tuzak{position:absolute!important; left:-10000px; top:0; width:1px; height:1px; overflow:hidden}
.aydinlatma{font-size:.84rem; color:var(--murekkep-2); line-height:1.5}
.aydinlatma strong{color:var(--murekkep)}
.onay{display:grid; grid-template-columns:24px minmax(0,1fr); gap:.6rem; align-items:start; font-size:.9rem; font-weight:700; color:var(--murekkep); cursor:pointer}
.onay input{width:22px; height:22px; margin:.15rem 0 0; accent-color:var(--kiremit)}
.haber-form .dugme{justify-self:start}
.form-durum{min-height:1.3em; font-weight:800; font-size:.92rem}
.form-durum.hata{color:#A1271E} .form-durum.tamam{color:var(--gezdirici-k)}

/* ---------- telefonda yarım telefon (uzunluğu yarıya indirir) ---------- */
@media (max-width:639px){
  .mobilde-yarim .telefon{--gen:190px; border-bottom-left-radius:0; border-bottom-right-radius:0; padding-bottom:0;
    -webkit-mask-image:linear-gradient(#000 78%, transparent); mask-image:linear-gradient(#000 78%, transparent)}
  .mobilde-yarim .telefon .ekran{aspect-ratio:1170/1350; border-bottom-left-radius:0; border-bottom-right-radius:0}
}

/* ---------- hikâye, telefonda yatay gün şeridi (satış hakemi §2.3: 8 durak 10+ ekrandı) ---------- */
.mobil-ipucu{display:none}
@media (max-width:639px){
  .serit-mobil .iz-hat{display:none}
  .serit-mobil .hikaye-adimlar{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    margin:0 -16px; padding:6px 16px 18px; scroll-padding-inline:16px; scrollbar-width:thin}
  .serit-mobil .hikaye-adim{flex:0 0 min(86%, 340px); scroll-snap-align:start; padding:1.1rem 1rem 1.2rem; border-radius:22px; background:var(--kart); box-shadow:var(--golge-kart); gap:1rem; align-content:start}
  .serit-mobil .durak-halka{display:none}
  .serit-mobil .hikaye-adim h3{font-size:1.45rem}
  .serit-mobil .adim-ekran .telefon{--gen:200px; border-bottom-left-radius:0; border-bottom-right-radius:0; padding-bottom:0;
    -webkit-mask-image:linear-gradient(#000 80%, transparent); mask-image:linear-gradient(#000 80%, transparent)}
  .serit-mobil .adim-ekran .telefon .ekran{aspect-ratio:1170/1350; border-bottom-left-radius:0; border-bottom-right-radius:0}
  .serit-mobil .adim-ekran .bildirim-kap{margin-bottom:.4rem}
  .serit-mobil .adim-ekran .bildirim-kap .bildirim:not(:last-child){display:none}
  .mobil-ipucu{display:flex; align-items:center; gap:.5rem; font-weight:800; font-size:.86rem; color:var(--vurgu-acik)}
  .mobil-ipucu::after{content:""; width:28px; height:2px; background:currentColor; box-shadow:4px 0 0 -0 currentColor}
}

/* ---------- belirme (kaydırmaya bağlı; destek yoksa her şey zaten görünür) ---------- */
@supports (animation-timeline: view()){
  .js .bel{animation:bel linear both; animation-timeline:view(); animation-range:entry 0% entry 70%}
  .js .bel-tel{animation:bel-tel linear both; animation-timeline:view(); animation-range:entry 0% cover 35%}
  .js .parallaks{animation:parallaks linear both; animation-timeline:view(); animation-range:cover 0% cover 100%}
}
@keyframes bel{from{opacity:0; transform:translateY(28px)}to{opacity:1; transform:none}}
@keyframes bel-tel{from{opacity:0; transform:translateY(60px) rotate(var(--r0, -4deg)) scale(.96)}to{opacity:1; transform:rotate(var(--r1, 0deg))}}
@keyframes parallaks{from{transform:translateY(var(--p0, 40px))}to{transform:translateY(var(--p1, -40px))}}

/* HAREKETİ AZALT: her animasyon durur; dinlenme hali zaten son karedir. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important; transition:none!important}
  .js .hikaye-adim:not(.gecti) .durak-halka{transform:none; border-color:var(--gunes-3); background:var(--gunes-2)}
  .js .hikaye-adim:not(.gecti) .durak-halka svg{opacity:1}
  .iz-hat i{transform:none}
}