/* onaylikroki.com — "çizim masası" tasarım sistemi
   Lacivert mürekkep · turuncu onay damgası · kırık beyaz kağıt · cam eskiz katmanı */

:root{
  /* Marka — logodan alındı, değiştirme */
  --ink:        #14243F;
  --ink-2:      #2A3E5E;
  --muted:      #4E607C;   /* kağıt üstünde 5.95:1 */
  --brand:      #F26A21;
  --brand-text: #B84A12;   /* turuncu METİN yalnız bu tonda — 4.86:1 */
  --paper:      #F7F7F5;
  --white:      #FFFFFF;

  --line:       rgba(20,36,63,.12);
  --line-2:     rgba(20,36,63,.20);

  /* Cam */
  --glass:      rgba(255,255,255,.58);
  --glass-2:    rgba(255,255,255,.74);
  --glass-edge: rgba(255,255,255,.85);
  --glass-ring: rgba(20,36,63,.10);
  --blur:       18px;

  --shadow-s: 0 1px 2px rgba(20,36,63,.05), 0 4px 14px rgba(20,36,63,.05);
  --shadow-m: 0 2px 4px rgba(20,36,63,.05), 0 12px 34px rgba(20,36,63,.09);
  --shadow-l: 0 4px 8px rgba(20,36,63,.05), 0 26px 60px rgba(20,36,63,.13);

  --r-s: 10px; --r-m: 16px; --r-l: 24px; --r-xl: 32px;

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-2: cubic-bezier(.16,1,.3,1);

  --wrap: 1180px;
  --gut: clamp(20px, 5vw, 56px);

  --z-sticky: 100; --z-nav: 200; --z-modal: 400; --z-toast: 600;

  --f-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --f-body: "Work Sans", "Segoe UI", system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  font-family:var(--f-body);
  font-size:clamp(15.5px,.42vw + 14.4px,17px);
  line-height:1.65;
  color:var(--ink-2);
  background:var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ——— Zemin: düz kırık beyaz.
   Izgara/kareli desen YOK (krokicim.com'un defter zeminine benzemesin diye).
   Camın okunabilmesi için yalnızca çok hafif iki ışık lekesi var. ——— */
body::after{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(52rem 34rem at 82% -8%, rgba(242,106,33,.085), transparent 64%),
    radial-gradient(46rem 34rem at 2% 6%, rgba(20,36,63,.05), transparent 66%);
}

/* ——— Tipografi ——— */
h1,h2,h3,h4{
  font-family:var(--f-display);
  color:var(--ink);
  margin:0;
  line-height:1.12;
  letter-spacing:-.025em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.3rem,5.2vw,4.15rem); font-weight:600; letter-spacing:-.035em }
h2{ font-size:clamp(1.75rem,3.3vw,2.75rem); font-weight:600 }
h3{ font-size:clamp(1.12rem,1.5vw,1.35rem); font-weight:600; letter-spacing:-.015em }
h4{ font-size:1rem; font-weight:600; letter-spacing:-.01em }
p{ margin:0; text-wrap:pretty }
a{ color:inherit }
strong{ color:var(--ink); font-weight:600 }

.lede{ font-size:clamp(1.02rem,1.05vw + .78rem,1.28rem); line-height:1.6; color:var(--muted); max-width:56ch }
.prose{ max-width:68ch }
.dim{ color:var(--muted) }
.mark{ color:var(--brand-text); font-weight:600 }

/* ——— Yerleşim ——— */
.wrap{ width:min(var(--wrap),100% - var(--gut)*2); margin-inline:auto }
.section{ padding-block:clamp(44px,5.4vw,80px) }
.section--tight{ padding-block:clamp(34px,4vw,56px) }
.head{ max-width:62ch; margin-bottom:clamp(22px,2.6vw,36px) }
.head p{ margin-top:16px }

/* ——— Cam yüzey: altındaki ızgara görünsün diye yarı saydam ——— */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.5);
  backdrop-filter:blur(var(--blur)) saturate(1.5);
  border:1px solid var(--glass-ring);
  border-top-color:var(--glass-edge);
  border-radius:var(--r-l);
  box-shadow:var(--shadow-m);
}
@supports not (backdrop-filter: blur(1px)){
  .glass{ background:rgba(255,255,255,.92) }
}

/* ——— Butonlar ——— */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--f-display); font-size:.965rem; font-weight:600; letter-spacing:-.01em;
  padding:.86em 1.5em; border-radius:999px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), background-color .25s ease, border-color .25s ease;
}
.btn svg{ flex:none }
.btn--primary{ background:var(--brand); color:var(--ink); box-shadow:0 1px 2px rgba(20,36,63,.10), 0 10px 24px rgba(242,106,33,.30) }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 2px 4px rgba(20,36,63,.10), 0 16px 34px rgba(242,106,33,.38) }
.btn--ghost{ background:var(--glass-2); color:var(--ink); border-color:var(--line-2); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px) }
.btn--ghost:hover{ transform:translateY(-2px); border-color:var(--ink-2); box-shadow:var(--shadow-s) }
.btn--ink{ background:var(--ink); color:var(--paper) }
.btn--ink:hover{ transform:translateY(-2px); box-shadow:var(--shadow-m) }
.btn--lg{ padding:1.02em 1.85em; font-size:1.03rem }
:where(a,button,summary,input,textarea,select):focus-visible{
  outline:2.5px solid var(--brand-text); outline-offset:3px; border-radius:6px;
}

/* ——— Başlık çubuğu ——— */
.bar{ position:sticky; top:0; z-index:var(--z-nav); padding-top:14px }
.bar__in{
  display:flex; align-items:center; gap:clamp(14px,2.4vw,34px);
  padding:11px 12px 11px 20px; border-radius:999px;
  background:rgba(247,247,245,.72);
  -webkit-backdrop-filter:blur(16px) saturate(1.5); backdrop-filter:blur(16px) saturate(1.5);
  border:1px solid transparent;
  transition:border-color .35s ease, box-shadow .35s ease, background-color .35s ease, transform .45s var(--ease);
}
.bar__in{ transform:translateY(0); will-change:transform }
.bar.is-stuck .bar__in{ transform:translateY(-5px); border-color:var(--glass-ring); box-shadow:var(--shadow-m); background:rgba(255,255,255,.7) }

.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:none }
.brand svg{ width:30px; height:30px }
.brand__txt{ font-family:var(--f-display); font-weight:600; font-size:1.12rem; letter-spacing:-.03em; color:var(--ink) }
.brand__txt i{ font-style:normal; color:var(--brand) }

.nav{ display:flex; gap:clamp(4px,1.2vw,16px); margin-left:auto }
.nav a{
  font-family:var(--f-display); font-size:.925rem; font-weight:500; color:var(--ink-2);
  text-decoration:none; padding:.5em .72em; border-radius:999px;
  transition:color .2s ease, background-color .25s ease;
}
.nav a:hover{ color:var(--ink); background:rgba(20,36,63,.055) }
.bar .btn{ flex:none }
.bar__tel{ font-family:var(--f-display); font-weight:600; color:var(--ink); text-decoration:none; font-size:.95rem; white-space:nowrap }
.menu-btn{ display:none }

/* ——— Kanca (hero) ——— */
.hero{ position:relative; padding-top:clamp(38px,5.2vw,72px); padding-bottom:clamp(38px,4.8vw,70px) }
.hero__solo{ display:grid; justify-items:center; text-align:center }
.hero__solo > div{ max-width:min(70ch,100%); display:flex; flex-direction:column; align-items:center }
.hero h1{ margin-top:26px; max-width:15ch }
.hero h1 span{ color:var(--brand-text) }
.hero .lede{ margin-top:24px; max-width:54ch; margin-inline:auto }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; justify-content:center }

.stamp{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-display); font-size:.82rem; font-weight:600;
  color:var(--ink); background:var(--glass-2);
  border:1px solid var(--line-2); border-radius:999px; padding:.5em 1em .5em .72em;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.stamp svg{ width:17px; height:17px; flex:none }

.facts{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:26px; padding-top:20px; border-top:1px solid var(--line) }
.fact{ display:flex; align-items:baseline; gap:8px; font-size:.93rem; color:var(--muted) }
.fact b{ font-family:var(--f-display); font-size:1.02rem; color:var(--ink); font-weight:600 }

/* ——— Teslimat listesi (kart değil, föy satırı) ——— */
.rows{ display:grid; gap:0; border-top:1px solid var(--line) }
.row{
  display:grid; grid-template-columns:auto minmax(0,20ch) minmax(0,1fr);
  gap:clamp(14px,2.4vw,34px); align-items:start;
  padding:clamp(20px,2.6vw,30px) clamp(12px,1.6vw,22px);
  border-bottom:1px solid var(--line);
  border-radius:var(--r-m);
  transition:background-color .35s var(--ease);
}
.row:hover{ background:rgba(255,255,255,.6) }
.row__ico{ width:38px; height:38px; flex:none; color:var(--ink) }
.row__ico svg{ width:100%; height:100% }
.row p{ color:var(--muted) }

/* ——— Süreç: gerçek sıralı akış ——— */
.flow{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:clamp(14px,1.8vw,22px) }
.step{
  position:relative; padding:clamp(22px,2.4vw,30px); border-radius:var(--r-l);
  background:var(--glass); -webkit-backdrop-filter:blur(var(--blur)) saturate(1.5); backdrop-filter:blur(var(--blur)) saturate(1.5);
  border:1px solid var(--glass-ring); border-top-color:var(--glass-edge);
  box-shadow:var(--shadow-s); transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.step:hover{ transform:translateY(-4px); box-shadow:var(--shadow-m) }
.step__n{ font-family:var(--f-display); font-size:.78rem; font-weight:600; color:var(--brand-text) }
.step h3{ margin:12px 0 9px }
.step p{ font-size:.955rem; color:var(--muted) }
.step__t{ display:inline-block; margin-top:14px; font-family:var(--f-display); font-size:.8rem; font-weight:600; color:var(--ink); background:rgba(242,106,33,.16); border-radius:999px; padding:.34em .8em }

/* ——— Cam kart ızgarası ——— */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:clamp(14px,1.7vw,20px) }
.card{
  display:flex; flex-direction:column; gap:9px;
  padding:clamp(22px,2.3vw,28px); border-radius:var(--r-l);
  background:var(--glass); -webkit-backdrop-filter:blur(var(--blur)) saturate(1.5); backdrop-filter:blur(var(--blur)) saturate(1.5);
  border:1px solid var(--glass-ring); border-top-color:var(--glass-edge);
  box-shadow:var(--shadow-s); text-decoration:none;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s ease;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-l); border-color:rgba(242,106,33,.4) }
.card__ico{ width:34px; height:34px; color:var(--ink); margin-bottom:6px }
.card p{ font-size:.94rem; color:var(--muted) }
.card__go{ margin-top:auto; padding-top:14px; font-family:var(--f-display); font-size:.87rem; font-weight:600; color:var(--brand-text); display:inline-flex; align-items:center; gap:7px }
.card__go svg{ width:14px; height:14px; transition:transform .4s var(--ease) }
.card:hover .card__go svg{ transform:translateX(4px) }

/* ——— İlçeler ——— */
.panel{ padding:clamp(26px,3.4vw,46px) }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:26px }
.chip{
  font-family:var(--f-display); font-size:.885rem; font-weight:500; color:var(--ink-2);
  text-decoration:none; padding:.46em .95em; border-radius:999px;
  background:rgba(255,255,255,.66); border:1px solid var(--line);
  transition:color .2s ease, border-color .25s ease, background-color .25s ease, transform .3s var(--ease);
}
.chip:hover{ color:var(--ink); border-color:var(--brand); background:rgba(242,106,33,.10); transform:translateY(-1px) }

/* ——— Fiyat ——— */
.price{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:clamp(26px,3.4vw,52px); align-items:center; padding:clamp(28px,3.6vw,50px) }
.price__fig{ font-family:var(--f-display); font-size:clamp(1.55rem,2.9vw,2.25rem); font-weight:600; color:var(--ink); letter-spacing:-.03em; line-height:1.2; text-wrap:balance }
.price__fig small{ display:block; font-size:.98rem; font-weight:500; color:var(--muted); letter-spacing:0; margin-top:12px; line-height:1.55 }
.price ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px }
.price li{ display:flex; gap:11px; align-items:flex-start; font-size:.96rem }
.price li svg{ width:19px; height:19px; flex:none; margin-top:3px; color:var(--brand) }

/* ——— Kırıntı yolu ——— */
.iz{ padding-top:26px; font-size:.86rem; color:var(--muted) }
.iz a{ color:var(--muted); text-decoration:none; transition:color .2s ease }
.iz a:hover{ color:var(--brand-text) }
.iz__ay{ margin-inline:.5em; opacity:.5 }
.iz [aria-current]{ color:var(--ink); font-weight:500 }

/* ——— Alt sayfa kancası: sola dayalı, daha sakin ——— */
.hero--alt{ padding-top:clamp(22px,2.6vw,36px); padding-bottom:clamp(24px,3vw,42px) }
.hero--alt h1{ margin-top:20px; max-width:19ch }
.hero--alt .lede{ margin-inline:0; max-width:62ch }
.hero--alt .hero__cta{ justify-content:flex-start }
.hero--alt .facts{ margin-top:30px }

/* Föy satırlarında sıra numarası (gerçek bir kontrol listesi) */
.row__n{
  font-family:var(--f-display); font-size:.82rem; font-weight:600; color:var(--brand-text);
  background:rgba(242,106,33,.14); border-radius:8px; padding:.34em .6em; line-height:1;
  align-self:start; margin-top:.25em;
}

/* ——— Rehber gövdesi ——— */
.yazi{ max-width:74ch }
.yazi__b + .yazi__b{ margin-top:clamp(22px,2.6vw,34px) }
.yazi h2{ font-size:clamp(1.32rem,2vw,1.72rem); margin-bottom:14px }
.yazi p{ color:var(--ink-2) }
.yazi p + p{ margin-top:14px }
.yazi a{ color:var(--brand-text); text-decoration:underline; text-underline-offset:3px }

/* ——— Rehber sonu özet listesi ——— */
.ozet{
  margin-top:clamp(26px,3vw,38px);
  padding:clamp(24px,2.8vw,34px);
  border-radius:var(--r-l);
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.5); backdrop-filter:blur(var(--blur)) saturate(1.5);
  border:1px solid var(--glass-ring); border-top-color:var(--glass-edge);
  box-shadow:var(--shadow-s);
}
.ozet h2{ font-size:clamp(1.14rem,1.6vw,1.4rem); margin-bottom:18px }
.ozet ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px }
.ozet li{ display:flex; gap:12px; align-items:flex-start; font-size:.97rem; color:var(--ink-2) }
.ozet li svg{ width:19px; height:19px; flex:none; margin-top:3px; color:var(--brand) }
.ozet em{ font-style:normal; color:var(--ink); font-weight:600 }

/* ——— Rozet şeridi eklentileri ——— */
.chips__et{ font-family:var(--f-display); font-size:.87rem; font-weight:600; color:var(--ink); align-self:center; margin-right:4px }
.chip--go{ background:var(--ink); color:var(--paper); border-color:var(--ink); display:inline-flex; align-items:center; gap:7px }
.chip--go svg{ width:13px; height:13px }
.chip--go:hover{ background:var(--ink-2); color:var(--paper); border-color:var(--ink-2) }
.hub-link{ margin-top:clamp(22px,2.6vw,32px) }
.hub-link .btn svg{ width:14px; height:14px }

/* ——— Revizyon vurgusu ——— */
.vurgu{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(16px,2.2vw,26px); align-items:start;
  margin-top:clamp(16px,1.8vw,22px);
  padding:clamp(24px,3vw,36px);
  border-radius:var(--r-l);
  background:rgba(242,106,33,.10);
  border:1px solid rgba(242,106,33,.32);
}
.vurgu__ico{
  display:grid; place-items:center; width:52px; height:52px; flex:none;
  border-radius:14px; background:var(--brand); color:var(--ink);
}
.vurgu__ico svg{ width:26px; height:26px }
.vurgu h3{ font-size:clamp(1.2rem,1.7vw,1.5rem); margin-bottom:10px }
.vurgu p{ color:var(--ink-2); max-width:70ch }
.vurgu strong{ color:var(--brand-text) }
@media (max-width:560px){
  .vurgu{ grid-template-columns:1fr }
}

/* ——— SSS ——— */
.faq{ display:grid; gap:10px }
.qa{ border-radius:var(--r-m); background:rgba(255,255,255,.55); border:1px solid var(--glass-ring); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); overflow:hidden; transition:border-color .3s ease, box-shadow .4s var(--ease) }
.qa[open]{ border-color:var(--line-2); box-shadow:var(--shadow-s) }
.qa summary{
  display:flex; align-items:center; gap:16px; cursor:pointer; list-style:none;
  padding:clamp(17px,1.9vw,22px) clamp(18px,2vw,26px);
  font-family:var(--f-display); font-weight:600; font-size:1.01rem; color:var(--ink); letter-spacing:-.015em;
}
.qa summary::-webkit-details-marker{ display:none }
.qa summary::after{
  content:""; width:11px; height:11px; margin-left:auto; flex:none;
  border-right:2.2px solid var(--brand); border-bottom:2.2px solid var(--brand);
  transform:rotate(45deg) translate(-3px,-3px); transition:transform .45s var(--ease);
}
.qa[open] summary::after{ transform:rotate(-135deg) translate(-3px,-3px) }
.qa__b{ padding:0 clamp(18px,2vw,26px) clamp(20px,2.2vw,26px); color:var(--muted); max-width:72ch }

/* ——— Kapanış bandı ——— */
.close{ position:relative; overflow:hidden; border-radius:var(--r-xl); padding:clamp(38px,5vw,72px) clamp(24px,4vw,64px); background:var(--brand); isolation:isolate }
.close::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(120% 140% at 85% 10%, rgba(255,255,255,.24), transparent 62%);
}
.close h2{ color:var(--ink); max-width:20ch }
.close p{ color:rgba(20,36,63,.84); margin-top:16px; max-width:48ch; font-size:1.04rem }
.close__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px }
.close .btn--ink{ background:var(--ink); color:#fff }
.close .btn--ghost{ background:rgba(255,255,255,.92); border-color:transparent; color:var(--ink) }

/* ——— Alt bilgi ——— */
.foot{ border-top:1px solid var(--line); margin-top:clamp(34px,4vw,58px); padding-block:clamp(30px,3.4vw,46px) 26px }
.foot__grid{ display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:clamp(24px,3vw,44px) }
.foot h4{ margin-bottom:14px }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px }
.foot a{ text-decoration:none; color:var(--muted); font-size:.93rem; transition:color .2s ease }
.foot a:hover{ color:var(--brand-text) }
.foot__brand p{ color:var(--muted); font-size:.94rem; margin-top:14px; max-width:38ch }
.foot__end{ display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:space-between; align-items:center; margin-top:clamp(24px,2.8vw,36px); padding-top:20px; border-top:1px solid var(--line); font-size:.87rem; color:var(--muted) }

/* ——— Giriş animasyonu: içerik varsayılan olarak GÖRÜNÜR ——— */
@media (prefers-reduced-motion: no-preference){
  .js .rise{ opacity:0; transform:translateY(20px); transition:opacity .75s var(--ease), transform .75s var(--ease) }
  .js .rise.in{ opacity:1; transform:none }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}

/* ——— Duyarlılık ——— */
@media (max-width:1000px){
  .hero__grid{ grid-template-columns:1fr; gap:clamp(30px,5vw,44px) }
  .price{ grid-template-columns:1fr }
  .foot__grid{ grid-template-columns:1fr 1fr }
  .foot__brand{ grid-column:1 / -1 }
}
@media (max-width:880px){
  .nav,.bar__tel{ display:none }
  .menu-btn{ display:inline-flex; margin-left:auto }
  .row{ grid-template-columns:auto 1fr; row-gap:6px }
  .row p{ grid-column:2 }
}
@media (max-width:620px){
  /* Çubuk tek satırda kalsın: marka yazısı ve menü etiketi düşer,
     CTA görünür kalır. */
  .brand__txt{ display:none }
  .menu-btn__t{ display:none }
  .menu-btn{ padding:.86em 1.05em }
  .bar__in{ padding:9px 10px 9px 14px; gap:10px }
  .bar .btn--primary{ padding:.8em 1.15em; font-size:.9rem }
}
@media (max-width:560px){
  .foot__grid{ grid-template-columns:1fr }
  .hero__cta .btn,.close__cta .btn{ flex:1 1 100% }
}

/* Mobil menü */
.sheetnav{ border:0; padding:0; max-width:min(420px,92vw); width:100%; margin:0 0 0 auto; height:100dvh; max-height:100dvh; background:var(--paper); box-shadow:var(--shadow-l) }
.sheetnav::backdrop{ background:rgba(20,36,63,.42); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px) }
.sheetnav__in{ padding:22px; display:flex; flex-direction:column; gap:6px; height:100% }
.sheetnav a{ font-family:var(--f-display); font-weight:600; font-size:1.14rem; color:var(--ink); text-decoration:none; padding:.72em .4em; border-bottom:1px solid var(--line) }
.sheetnav .btn{ margin-top:auto }
.x{ align-self:flex-end; background:none; border:1px solid var(--line-2); border-radius:999px; width:40px; height:40px; cursor:pointer; color:var(--ink); font-size:1.2rem; line-height:1; margin-bottom:10px }

/* Rehber yazısının kapanış cümlesi */
.yazi__son{ margin-top:clamp(22px,2.6vw,32px); color:var(--muted); font-size:.97rem; border-top:1px solid var(--line); padding-top:20px }

/* ——— Sabit WhatsApp düğmesi ———
   Sayfa CTA'larıyla yarışmasın diye lacivert; turuncu birincil eylemin rengi. */
.wafab{
  position:fixed; right:clamp(16px,2.4vw,26px); bottom:clamp(16px,2.4vw,26px);
  z-index:var(--z-toast);
  display:inline-flex; align-items:center; gap:10px;
  padding:14px; border-radius:999px;
  background:var(--ink); color:#fff; text-decoration:none;
  box-shadow:0 4px 10px rgba(20,36,63,.18), 0 14px 34px rgba(20,36,63,.26);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), background-color .25s ease;
}
.wafab svg{ width:26px; height:26px; flex:none }
.wafab__t{ font-family:var(--f-display); font-weight:600; font-size:.94rem; letter-spacing:-.01em; padding-right:6px; white-space:nowrap }
.wafab:hover{ transform:translateY(-3px); background:var(--ink-2); box-shadow:0 6px 14px rgba(20,36,63,.20), 0 20px 44px rgba(20,36,63,.30) }
.wafab:focus-visible{ outline:3px solid var(--brand); outline-offset:3px }

/* Dar ekranda yalnız simge */
@media (max-width:640px){
  .wafab__t{ display:none }
  .wafab{ padding:15px; right:16px; bottom:16px }
  .wafab svg{ width:27px; height:27px }
}
/* Alt bilgi düğmenin altında kalmasın */
.foot{ padding-bottom:clamp(84px,10vw,96px) }
@media (prefers-reduced-motion: reduce){ .wafab{ transition:none } }

/* ══════════════════════════════════════════════════════════════════════════
   HIZLI TEKLİF  (.tek)  —  ana sayfa kapanış bloğu
   ❗Kontrast kilidi: turuncu #F26A21 kağıt üstünde 2.85 — METİN OLAMAZ.
     · turuncu METİN gerektiğinde  --brand-text (#B84A12, 4.86)
     · turuncu ZEMİN üstünde yazı  --ink (#14243F, 5.07)  ·  beyaz (3.06) KULLANMA
   ❗Izgara üstte, mesaj rayı altta tam genişlik — krokicim'in sol form /
     sağ yapışkan kart düzeninden kasten farklı.
   ══════════════════════════════════════════════════════════════════════════ */
.tek{ padding:clamp(18px,2.4vw,30px); overflow:hidden }

.tek__et{
  font-family:var(--f-display); font-size:.78rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand-text); margin-bottom:10px;
}

.tek__grid{
  display:grid; gap:clamp(18px,2.2vw,30px);
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .tek__grid{ grid-template-columns:1.55fr .95fr 1fr }
}

.tek__ad{ border:0; margin:0; padding:0; min-width:0 }
.tek__ad legend{
  display:flex; align-items:center; gap:10px; padding:0; margin-bottom:12px;
  font-family:var(--f-display); font-weight:650; font-size:1.02rem; color:var(--ink);
}
.tek__ad legend i{
  flex:none; width:23px; height:23px; border-radius:50%;
  background:var(--ink); color:var(--paper);
  display:grid; place-items:center;
  font-style:normal; font-size:.76rem; font-weight:700;
}

.tek__kume{
  font-size:.76rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); margin:14px 0 8px;
}
.tek__kume:first-of-type{ margin-top:0 }

/* Seçim çipleri — .chip bir bağlantı stili, bu ise basılabilir düğme */
.tek__c{
  display:inline-block; margin:0 6px 6px 0;
  padding:.5em .95em; border-radius:999px;
  border:1px solid var(--line-2); background:var(--white);
  font:inherit; font-size:.9rem; color:var(--ink-2);
  cursor:pointer;
  /* ❗Yalnız transform/box-shadow geçiyor. SEÇİLİ GÖRÜNÜM (zemin, yazı, kenar)
     bilerek geçişsiz: CSS geçişleri arka plan sekmesinde ve derleme yapmayan
     render ortamlarında DONAR — geçişe bağlanan durum orada hiç görünmez.
     Aynı kural app.js'teki giriş animasyonu için de geçerli, bozma. */
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.tek__c:hover{ border-color:var(--brand); background:rgba(242,106,33,.08); color:var(--ink); transform:translateY(-1px) }
.tek__c:focus-visible{ outline:2px solid var(--ink); outline-offset:2px }
.tek__c[aria-pressed="true"]{
  background:var(--brand); border-color:var(--brand);
  color:var(--ink);              /* turuncu zeminde lacivert — 5.07 */
  font-weight:600;
  box-shadow:0 1px 2px rgba(20,36,63,.10), 0 6px 16px rgba(242,106,33,.26);
}

.tek__ipucu{ font-size:.85rem; color:var(--muted); margin-top:12px; line-height:1.55 }

/* İlçe seçimi */
.tek__gizli{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.tek__sec select{
  width:100%; max-width:100%; font:inherit; font-size:.96rem; color:var(--ink);
  padding:.72em .9em; border-radius:var(--r-s);
  border:1px solid var(--line-2); background:var(--white);
  cursor:pointer;
}
.tek__sec select:focus-visible{ outline:2px solid var(--ink); outline-offset:2px }

/* ── Mesaj rayı — tam genişlik, ızgaranın altında ── */
.tek__ray{
  display:grid; gap:clamp(16px,2vw,26px);
  grid-template-columns:1fr;
  margin-top:clamp(20px,2.4vw,30px);
  padding-top:clamp(18px,2.2vw,26px);
  border-top:1px solid var(--line);
}
@media (min-width:900px){
  .tek__ray{ grid-template-columns:1.6fr 1fr; align-items:start }
}

.tek__et2{
  display:block; font-family:var(--f-display);
  font-size:.76rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:9px;
}
.tek__yaz textarea{
  width:100%; max-width:100%; font:inherit; font-size:.97rem; line-height:1.6;
  color:var(--ink); background:var(--white);
  border:1px solid var(--line-2); border-radius:var(--r-m);
  padding:.85em 1em; resize:vertical; min-height:5.4em;
}
.tek__yaz textarea:focus-visible{ outline:2px solid var(--ink); outline-offset:2px }

.tek__sayfa{ margin-top:11px; font-size:.9rem }
.tek__sayfa a{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--brand-text); font-weight:600; text-decoration:none;
  border-bottom:1px solid rgba(184,74,18,.32); padding-bottom:1px;
}
.tek__sayfa a:hover{ border-bottom-color:var(--brand-text) }
.tek__sayfa svg{ width:14px; height:14px; flex:none }

.tek__git{ display:flex; flex-direction:column; gap:10px; align-items:stretch }
.tek__git .btn{ width:100%; justify-content:center }
.tek__not{ font-size:.83rem; color:var(--muted); line-height:1.55; margin-top:2px }

@media (max-width:480px){
  .tek__c{ font-size:.86rem; padding:.48em .85em }
}

/* ── Rehber listesi (.reh) — ana sayfa "Başvurmadan önce okuyun" ── */
.reh{ list-style:none; display:grid; gap:10px; grid-template-columns:1fr }
@media (min-width:640px){ .reh{ grid-template-columns:1fr 1fr } }
@media (min-width:1000px){ .reh{ grid-template-columns:1fr 1fr 1fr } }
.reh a{
  display:block; height:100%; text-decoration:none;
  padding:.9em 1.05em; border-radius:var(--r-m);
  background:var(--glass); border:1px solid var(--glass-ring);
  -webkit-backdrop-filter:blur(var(--blur)); backdrop-filter:blur(var(--blur));
  transition:transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.reh a:hover{ transform:translateY(-2px); border-color:var(--brand); box-shadow:var(--shadow-s) }
.reh a:focus-visible{ outline:2px solid var(--ink); outline-offset:2px }
.reh b{ display:block; font-family:var(--f-display); font-weight:620; font-size:.99rem; color:var(--ink) }
.reh span{ display:block; margin-top:4px; font-size:.87rem; line-height:1.5; color:var(--muted) }

/* SSS cevabı içindeki bağlam bağlantıları */
.qa__b a{ color:var(--brand-text); font-weight:600; text-decoration:none;
          border-bottom:1px solid rgba(184,74,18,.30) }
.qa__b a:hover{ border-bottom-color:var(--brand-text) }