/* ============================================================
   SİTE TASARIM SİSTEMİ
   Kaynak: fiverr.com / legora.com / complexlaw.co.uk üzerinden
   ölçülen gerçek değerler.
     H1 ağırlık 300 · gövde 16px/400 · metin #62646A
     koyu yeşil #003912 · bordo #4D1727 · köşe 16/12/8/pill
   Mevcut 50 servis sayfası bu sınıfları kullanıyor; içeriğe
   dokunmadan tasarım buradan değişir.
   ============================================================ */

:root{
  --ink:#222325; --body:#62646A; --body-2:#404145;
  --line:#DADBDD; --line-2:#E4E5E7;
  --bg:#FFFFFF; --bg-2:#FAFAFA; --bg-3:#F5F5F5;
  --green:#003912; --green-2:#0B4A1F; --green-br:#1DBF73; --green-pale:#E8F5EC;
  --maroon:#4D1727; --orange:#FF7640;
  --sand:#F5EDE3; --rose:#F7E4E4; --mint:#E3F2E8; --sky:#E4EEF7;
  /* Complex Law'dan olculdu: kagit kremi ve soluk dis bant */
  --paper:#FDF9F6; --teal-pale:#EDF5F4;
  /* pastel besli - servis basligi, kartlar ve metin ici bilesenler ortak kullanir */
  --p-teal:#DEF1F2; --p-teal-ink:#003943; --p-teal-rgb:0,57,67;
  --p-mint:#E3F2E8; --p-mint-ink:#0B4A1F; --p-mint-rgb:11,74,31;
  --p-sky:#E7EEFB;  --p-sky-ink:#203A6E;  --p-sky-rgb:32,58,110;
  --p-sand:#FFF5E5; --p-sand-ink:#5D3D0C; --p-sand-rgb:93,61,12;
  --p-rose:#FBE6E2; --p-rose-ink:#552019; --p-rose-rgb:85,32,25;
  --wa:#25D366; --alarm:#B3392E;
  --hd:78px; --bar:64px;
  --gut:clamp(1.1rem,4vw,3.5rem);
  --r:8px; --r2:12px; --r3:16px;
  --sh:0 6px 20px rgba(0,0,0,.09);
  --sh-2:0 12px 34px rgba(0,0,0,.13);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hd) + 16px)}
body{
  background:var(--bg);color:var(--body);
  font-family:Figtree,-apple-system,'Segoe UI',system-ui,sans-serif;
  font-size:16px;font-weight:400;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom,0px));
}
@media (min-width:900px){body{padding-bottom:0}}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
::selection{background:var(--green-pale);color:var(--green)}

.container,.wrap{width:100%;max-width:1400px;margin-inline:auto;padding-inline:var(--gut)}
.container--narrow{max-width:820px}

/* ---------------- tipografi ---------------- */
h1,h2,h3,h4{color:var(--ink);font-weight:400;letter-spacing:-.02em;line-height:1.18}
h1{font-size:clamp(2.1rem,1.1rem + 4.4vw,3.9rem);font-weight:300;letter-spacing:-.045em;line-height:1.14}
h2{font-size:clamp(1.55rem,1.05rem + 1.9vw,2.25rem);letter-spacing:-.032em;line-height:1.16}
h3{font-size:1.14rem;font-weight:600;letter-spacing:-.012em}
h4{font-size:1rem;font-weight:600}
p{text-wrap:pretty}
strong,b{font-weight:600;color:var(--ink)}

.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--green);margin-bottom:14px}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green-br);flex:none}
.lede{font-size:clamp(1.02rem,.97rem + .4vw,1.22rem);line-height:1.58;color:var(--body-2);max-width:52ch;margin-top:14px}
.text-muted{color:var(--body)}
.text-center{text-align:center}

/* düz metin blokları — servis sayfalarının gövdesi */
.prose{max-width:72ch;font-size:16.5px;line-height:1.72}
.prose>*+*{margin-top:1.05em}
.prose h2{margin-top:2.1em}
.prose h3{margin-top:1.7em}
.prose h2+*,.prose h3+*{margin-top:.7em}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.45em}
.prose li::marker{color:var(--green-br)}
.prose a{color:var(--green);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(0,57,18,.32)}
.prose a:hover{text-decoration-color:var(--green)}
.prose>:first-child{margin-top:0}

/* kanun maddesi rozeti */
.madde{display:inline-block;padding:3px 9px;border-radius:5px;background:var(--green-pale);
  color:var(--green);font-size:12.5px;font-weight:600;letter-spacing:.02em;white-space:nowrap}

/* ---------------- yerleşim ---------------- */
.section{padding-block:clamp(44px,5.5vw,76px)}
.section--tight{padding-block:clamp(30px,3.5vw,48px)}
.section--alt{background:var(--bg-2)}
.section--surface{background:#fff}
.section--deep{background:var(--green);color:rgba(255,255,255,.82)}
.section--deep h1,.section--deep h2,.section--deep h3{color:#fff}
.section-head{max-width:60ch;margin-bottom:26px}
.section-head p{margin-top:12px}
.grid{display:grid;gap:14px}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.cluster{display:flex;flex-wrap:wrap;gap:11px;align-items:center}

/* ---------------- buton ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;
  padding:0 24px;border-radius:var(--r);font-weight:600;font-size:16px;
  transition:background-color .18s,color .18s,border-color .18s,transform .18s}
.btn svg{width:17px;height:17px;flex:none}
.btn--call,.btn--dark{background:var(--ink);color:#fff}
.btn--call:hover,.btn--dark:hover{background:#000;transform:translateY(-1px)}
.btn--green{background:var(--green);color:#fff}
.btn--green:hover{background:var(--green-2);transform:translateY(-1px)}
.btn--whatsapp{background:var(--wa);color:#05291A}
.btn--whatsapp:hover{background:#1FB558;transform:translateY(-1px)}
.btn--secondary{border:1px solid var(--line);color:var(--ink)}
.btn--secondary:hover{border-color:var(--ink);background:var(--bg-2)}
.btn--wht{background:#fff;color:var(--ink)}
.btn--wht:hover{background:#F1F1F1}
.btn--sm{min-height:42px;padding:0 18px;font-size:14.5px}
.btn--block{width:100%}
@media (max-width:520px){.cluster .btn,.cta-band__actions .btn{width:100%}}

/* ---------------- kart ---------------- */
.card{position:relative;background:#fff;border:1px solid var(--line-2);border-radius:var(--r3);
  padding:24px 22px;display:flex;flex-direction:column;gap:9px;
  transition:box-shadow .22s,transform .22s,border-color .22s}
.card:hover{box-shadow:var(--sh);transform:translateY(-2px);border-color:var(--line)}
.card h3{margin-bottom:2px}
.card p{font-size:14.6px;line-height:1.56;color:var(--body)}
.card__link{color:inherit}
.card__link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.card__icon{width:46px;height:46px;border-radius:50%;background:var(--green-pale);color:var(--green);
  display:grid;place-items:center;flex:none;margin-bottom:6px;transition:background-color .22s,color .22s}
.card__icon svg{width:22px;height:22px}
.card:hover .card__icon{background:var(--green);color:#fff}
.card__more{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:10px;
  font-size:14px;font-weight:600;color:var(--green)}
.card__more svg{width:14px;height:14px;transition:transform .22s}
.card:hover .card__more svg{transform:translateX(4px)}
.card--urgent{border-color:rgba(179,57,46,.28)}
.card--urgent .card__icon{background:#FBE9E7;color:var(--alarm)}
.card--urgent:hover .card__icon{background:var(--alarm);color:#fff}
.card--urgent .card__more{color:var(--alarm)}

/* ---------------- servis sayfası başlığı ----------------
   Pastel bant + serif başlık + madde rozetleri + illüstrasyon */
.svc-hero{background:var(--h-bg,#DEF1F2);border-radius:var(--r3);
  padding:clamp(26px,3.4vw,46px);display:grid;gap:26px;align-items:center;margin-top:4px}
@media (min-width:880px){.svc-hero{grid-template-columns:1.08fr .92fr;padding:clamp(34px,3.6vw,56px)}}
.svc-hero h1{font-family:Newsreader,Georgia,serif;font-weight:400;color:var(--h-fg,#003943);
  font-size:clamp(2.05rem,1.3rem + 3.2vw,3.4rem);letter-spacing:-.02em;line-height:1.12}
.svc-hero .eyebrow{color:var(--h-fg,#003943);opacity:.72}
.svc-hero .eyebrow::before{background:var(--h-fg,#003943);opacity:.5}
.svc-hero .lede{color:var(--h-fg,#003943);opacity:.86;margin-top:14px;max-width:46ch}
.svc-hero .lede .madde{background:none;padding:0;border-radius:0;font-size:inherit;
  font-weight:500;color:inherit;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,currentColor 35%,transparent)}
.svc-hero .cluster{margin-top:24px}
.svc-hero__ill{display:grid;place-items:center}
.svc-hero__ill svg,.svc-hero__ill img{width:100%;max-width:340px;height:auto;color:var(--h-fg,#003943)}
@media (max-width:879px){.svc-hero__ill{order:-1}.svc-hero__ill svg,.svc-hero__ill img{max-width:210px}}
.svc-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.svc-meta span{display:inline-flex;align-items:center;padding:5px 11px;border-radius:999px;
  background:rgba(255,255,255,.62);font-size:12.5px;font-weight:500;color:var(--h-fg,#003943)}
.svc-hero--teal{--h-bg:#DEF1F2;--h-fg:#003943}
.svc-hero--mint{--h-bg:#E3F2E8;--h-fg:#0B4A1F}
.svc-hero--sky {--h-bg:#E7EEFB;--h-fg:#203A6E}
.svc-hero--sand{--h-bg:#FFF5E5;--h-fg:#5D3D0C}
.svc-hero--rose{--h-bg:#FBE6E2;--h-fg:#552019}

/* sayfa içi gezinme */
.svc-toc{background:var(--bg-2);border-radius:var(--r2);padding:20px 22px;margin-block:26px}
.svc-toc p{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--body);margin-bottom:10px}
.svc-toc ol{margin:0;padding-left:1.1em;display:grid;gap:6px;font-size:15px}
.svc-toc a{color:var(--green);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(0,57,18,.3)}
.svc-toc a:hover{text-decoration-color:var(--green)}

/* çizgi illüstrasyon ayracı */
.ill-divider{display:block;margin:clamp(32px,4vw,54px) auto;max-width:300px;color:var(--green);opacity:.7}
.ill-divider svg{width:100%;height:auto}

/* ---------------- illüstrasyonlu pastel kart ----------------
   Complex Law dilindeki bileşen: pastel zemin + kesikli çerçeve +
   serif başlık + altta renkli düz vektör sahne.               */
.ill-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--ic-bg,var(--mint));
  border:1.5px dashed var(--ic-br,rgba(0,57,67,.28));
  border-radius:var(--r3);padding:26px 24px 0;overflow:hidden;
  transition:transform .24s cubic-bezier(.22,.61,.36,1),box-shadow .24s}
.ill-card:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.ill-card h3{
  font-family:Newsreader,Georgia,serif;font-weight:400;font-size:1.42rem;
  letter-spacing:-.015em;line-height:1.2;color:var(--ic-fg,#003943);margin-bottom:11px}
.ill-card p{font-size:15px;line-height:1.6;color:var(--ic-fg,#003943);opacity:.86}
a.ill-card{text-decoration:none;color:inherit}
.ill-card__ill{margin:22px -6px 0;padding-bottom:6px;margin-top:auto}
.ill-card__ill img,.ill-card__ill svg{width:100%;height:auto;display:block}
.ill-card__more{display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-size:14px;font-weight:600;color:var(--ic-fg,#003943)}
.ill-card__more svg{width:14px;height:14px;transition:transform .24s}
.ill-card:hover .ill-card__more svg{transform:translateX(4px)}
.ill-card__link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.svc-hub{margin-top:26px;text-align:center;font-size:15.5px;color:var(--body)}
.svc-hub a{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--green);
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(0,57,18,.3)}
.svc-hub a:hover{text-decoration-color:var(--green)}
.svc-hub a svg{width:14px;height:14px;transition:transform .24s}
.svc-hub a:hover svg{transform:translateX(4px)}

/* pastel varyantlar — Complex Law'ın ölçülen tonları */
.ill-card--teal {--ic-bg:#DEF1F2;--ic-br:rgba(0,57,67,.26);--ic-fg:#003943}
.ill-card--mint {--ic-bg:#E3F2E8;--ic-br:rgba(11,74,31,.24);--ic-fg:#0B4A1F}
.ill-card--sky  {--ic-bg:#E7EEFB;--ic-br:rgba(32,58,110,.22);--ic-fg:#203A6E}
.ill-card--sand {--ic-bg:#FFF5E5;--ic-br:rgba(93,61,12,.24);--ic-fg:#5D3D0C}
.ill-card--rose {--ic-bg:#FBE6E2;--ic-br:rgba(85,32,25,.22);--ic-fg:#552019}

/* tek renk çizgi çizim — metin arasında dekoratif kullanım */
.ill-line{display:block;margin:34px auto;max-width:420px;color:var(--green)}
.ill-line svg,.ill-line img{width:100%;height:auto;display:block}
.ill-line--sm{max-width:260px}

/* illüstrasyon şeridi: sayfa başında geniş görsel */
.ill-band{background:var(--ic-bg,var(--sand));border-radius:var(--r3);
  padding:clamp(22px,3vw,40px);display:grid;gap:24px;align-items:center}
@media (min-width:820px){.ill-band{grid-template-columns:1.05fr .95fr}}
.ill-band h2{font-family:Newsreader,Georgia,serif;font-weight:400;color:var(--ic-fg,#5D3D0C)}
.ill-band p{color:var(--ic-fg,#5D3D0C);opacity:.86;margin-top:12px}

@media (max-width:759px){
  .ill-card{padding:22px 18px 0;border-radius:var(--r2)}
  .ill-card h3{font-size:1.28rem}
  .ill-card p{font-size:14.5px}
  .ill-line{margin:26px auto;max-width:300px}
}

/* ---------------- adım / süreç ---------------- */
.steps{display:grid;gap:26px;margin-top:8px}
@media (min-width:900px){.steps{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:24px}}
.step{counter-increment:adim}
.step::before{content:counter(adim,decimal-leading-zero);display:grid;place-items:center;
  width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--line);
  font-size:14px;font-weight:600;color:var(--body);margin-bottom:14px}
.steps{counter-reset:adim}
.step h3{margin-bottom:7px}
.step p{font-size:14.6px;line-height:1.58;color:var(--body)}

/* ---------------- bilgi kutusu ---------------- */
.note{background:var(--green-pale);border-radius:var(--r3);padding:24px 24px;font-size:16px;line-height:1.62}
.note__title{display:flex;align-items:center;gap:9px;font-weight:600;color:var(--green);margin-bottom:10px}
.note__title svg{width:19px;height:19px;flex:none}
.note ul{margin-top:10px;padding-left:1.2em}
.note li+li{margin-top:.4em}
.note li::marker{color:var(--green-br)}
.note--urgent{background:#FBE9E7}
.note--urgent .note__title{color:var(--alarm)}

/* ---------------- SSS ---------------- */
.faq{margin-top:8px;max-width:78ch}
.faq__item{background:#fff;border:1px solid var(--line-2);border-radius:var(--r2);margin-bottom:9px;overflow:hidden}
.faq__item summary{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:19px 21px;font-size:16.5px;font-weight:600;color:var(--ink);cursor:pointer;list-style:none}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--green)}
.faq__item summary::after{content:"";flex:none;width:19px;height:19px;margin-top:3px;border-radius:50%;
  background:var(--green-pale);position:relative;
  background-image:linear-gradient(var(--green),var(--green)),linear-gradient(var(--green),var(--green));
  background-size:9px 1.6px,1.6px 9px;background-position:center,center;background-repeat:no-repeat;
  transition:transform .28s,background-color .2s}
.faq__item[open] summary::after{transform:rotate(90deg);background-size:9px 1.6px,0 0}
.faq__answer{padding:0 21px 20px;font-size:15.6px;line-height:1.7;color:var(--body);max-width:70ch}
.faq__answer>*+*{margin-top:.8em}

/* ---------------- CTA bandı ---------------- */
.cta-band{background:var(--maroon);border-radius:var(--r3);color:rgba(255,255,255,.82);
  padding:clamp(34px,4.5vw,64px) clamp(22px,3.5vw,56px);position:relative;overflow:hidden}
.cta-band h2{color:#fff;max-width:18ch}
.cta-band p{margin-top:14px;max-width:48ch}
.cta-band__actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}
.cta-band .btn--secondary{border-color:rgba(255,255,255,.45);color:#fff}
.cta-band .btn--secondary:hover{background:#fff;color:var(--maroon);border-color:#fff}

/* ---------------- kırıntı yolu ---------------- */
.breadcrumb{padding-block:18px;font-size:13.5px;color:var(--body)}
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;padding:0}
.breadcrumb li{display:flex;align-items:center;gap:8px}
.breadcrumb li+li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--line)}
.breadcrumb a:hover{color:var(--green);text-decoration:underline}
.breadcrumb [aria-current="page"]{color:var(--ink)}

/* ---------------- iletişim listesi ---------------- */
.contact-list{display:grid;gap:18px}
.contact-item{display:flex;align-items:flex-start;gap:14px}
.contact-item svg{width:20px;height:20px;color:var(--green-br);flex:none;margin-top:3px}
.contact-item__label{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--body)}
.contact-item__value{font-size:16.5px;font-weight:600;color:var(--ink)}
a.contact-item__value:hover{color:var(--green)}

/* ---------------- başlık / alt bilgi / mobil çubuk ---------------- */
.site-header,.top{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line-2)}
.site-header__inner,.top__in{display:flex;align-items:center;gap:20px;min-height:var(--hd)}
.brand,.logo{display:flex;align-items:baseline;gap:2px;font-size:23px;font-weight:700;
  letter-spacing:-.04em;color:var(--ink)}
.brand__mark,.logo i{font-style:normal;color:var(--green-br)}
.brand__sub{display:none}
.nav{display:none;align-items:center;gap:24px;margin-left:auto;font-size:15px;color:var(--body-2)}
@media (min-width:1100px){.nav{display:flex}}
.nav__link:hover,.nav a:hover{color:var(--green)}
.header__phone,.tphone{margin-left:auto;display:flex;align-items:center;gap:8px;
  font-weight:600;color:var(--ink);font-size:15px}
@media (min-width:1100px){.header__phone,.tphone{margin-left:0}}
.header__phone svg,.tphone svg{width:16px;height:16px;color:var(--green-br)}
/* dar ekranda logo ile çakışıyordu; alt çubukta zaten arama düğmesi var */
@media (max-width:520px){.header__phone,.tphone{display:none}}
@media (max-width:400px){.brand span:first-child{font-size:15px;letter-spacing:.01em}}
.header__cta{display:none}
@media (min-width:1100px){.header__cta{display:inline-flex}}

.urgent-strip{background:var(--ink);color:#E6E7E8;font-size:13.5px}
.urgent-strip__inner{display:flex;align-items:center;justify-content:center;gap:11px;
  padding:10px 0;flex-wrap:wrap;text-align:center}
.urgent-strip a{color:#7FE3AE;font-weight:600}
@media (max-width:560px){
  .urgent-strip{font-size:12.5px}
  .urgent-strip__inner{gap:8px;padding-block:9px;flex-wrap:nowrap;white-space:nowrap}
  /* dar ekranda soru metni sığmıyor; numara kalıyor */
  .urgent-strip__inner > span:not(.urgent-strip__dot){display:none}
}
.urgent-strip__dot{width:7px;height:7px;border-radius:50%;background:var(--alarm);flex:none;
  animation:nabiz 2.2s ease-in-out infinite}
@keyframes nabiz{0%,100%{opacity:1}50%{opacity:.32}}

.site-footer,.foot{border-top:1px solid var(--line-2);padding-block:52px 30px;
  font-size:14.5px;color:var(--body);background:#fff}
.footer__grid,.foot__g{display:grid;gap:28px}
@media (min-width:640px){.footer__grid,.foot__g{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.footer__grid,.foot__g{grid-template-columns:repeat(4,1fr)}}
.footer__title,.foot h4{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:13px}
.footer__links{display:grid;gap:8px}
.site-footer a:hover,.foot a:hover{color:var(--green);text-decoration:underline}
.footer__bottom,.foot__b{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;margin-top:40px;padding-top:22px;border-top:1px solid var(--line-2);font-size:13.5px}
.footer__legal,.foot__n{margin-top:16px;font-size:12.5px;line-height:1.6;color:#8A8D92;max-width:82ch}

.actionbar,.abar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;
  grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  box-shadow:0 -6px 22px rgba(0,0,0,.12);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (min-width:900px){.actionbar,.abar{display:none}}
.actionbar__btn,.abar a{display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:var(--bar);font-weight:600;font-size:15.5px}
.actionbar__btn svg,.abar svg{width:18px;height:18px}
.actionbar__btn--call,.abar__c{background:var(--ink);color:#fff}
.actionbar__btn--wa,.abar__w{background:var(--wa);color:#05291A}

.skip-link{position:absolute;top:0;left:var(--gut);transform:translateY(-120%);z-index:99;
  background:var(--green);color:#fff;padding:12px 20px;border-radius:0 0 var(--r) var(--r);font-weight:600}
.skip-link:focus-visible{transform:translateY(0)}

/* eski kabuktan gelen menü bileşenleri */
.nav__item{position:relative}
.nav__toggle{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:400;color:var(--body-2)}
.nav__toggle:hover{color:var(--green)}
.nav__toggle svg{width:11px;height:11px;transition:transform .2s}
.nav__item:hover .nav__toggle svg,.nav__item:focus-within .nav__toggle svg,
.nav__item.is-open .nav__toggle svg{transform:rotate(180deg)}
.nav__menu{
  position:absolute;top:calc(100% + 12px);left:0;min-width:19rem;padding:8px;
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r2);box-shadow:var(--sh-2);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s,transform .16s,visibility .16s;z-index:20}
.nav__item:hover .nav__menu,.nav__item:focus-within .nav__menu,
.nav__item.is-open .nav__menu{opacity:1;visibility:visible;transform:none}
.nav__menu a{display:block;padding:9px 12px;border-radius:var(--r);font-size:14.5px;color:var(--body-2)}
.nav__menu a:hover{background:var(--green-pale);color:var(--green);text-decoration:none}

/* tek tema kullaniyoruz; eski tema dugmesi gizlenir */
.theme-toggle{display:none!important}

/* mobil cekmece */
.drawer{
  position:fixed;inset:var(--hd) 0 0 0;z-index:59;background:#fff;overflow-y:auto;
  overscroll-behavior:contain;padding:20px 0 40px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s,transform .22s,visibility .22s}
.drawer.is-open{opacity:1;visibility:visible;transform:none}
@media (min-width:1100px){.drawer{display:none}}
.drawer__group+.drawer__group{margin-top:22px;padding-top:22px;border-top:1px solid var(--line-2)}
.drawer__label{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--body);margin-bottom:10px}
.drawer a{display:block;padding:11px 0;font-size:16px;color:var(--ink);border-bottom:1px solid var(--line-2)}
.drawer a:hover{color:var(--green)}
.drawer__actions{display:grid;gap:10px;margin-top:24px}
.drawer__actions a{border:0;padding:0}

.burger{display:grid;gap:5px;padding:8px;margin-left:auto;margin-right:-8px}
@media (min-width:1100px){.burger{display:none}}
.burger span,.burger i{display:block;width:20px;height:1.6px;background:var(--ink);
  transition:transform .22s,opacity .18s}
.burger span{position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:1.6px;background:var(--ink);transition:transform .22s}
.burger span::before{top:-6.5px}
.burger span::after{top:6.5px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6.5px) rotate(-45deg)}

/* ---------------- mobil ---------------- */
@media (max-width:759px){
  :root{--gut:20px;--hd:64px}
  .brand,.logo{font-size:21px}
  h1{font-size:2.08rem;line-height:1.14;letter-spacing:-.03em}
  h2{font-size:1.72rem}
  .section{padding-block:44px}
  .section-head{margin-bottom:20px}
  .prose{font-size:16px;line-height:1.7}
  .card{padding:20px 18px;border-radius:var(--r2)}
  .note{padding:20px 18px;border-radius:var(--r2)}
  .faq__item summary{padding:17px 18px;font-size:15.8px}
  .faq__answer{padding:0 18px 18px;font-size:15.2px}
  .cta-band{border-radius:var(--r2)}
  .steps{gap:22px}
  .site-footer,.foot{padding-block:36px 24px}
}
@media (max-width:400px){:root{--gut:16px}h1{font-size:1.92rem}}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
  html{scroll-behavior:auto}
}

@media print{
  .site-header,.top,.urgent-strip,.actionbar,.abar,.breadcrumb,.cta-band{display:none!important}
  body{padding-bottom:0;color:#000}
}


/* ============================================================
   .ag-  Yapışkan başlık + akordeon ızgarası   (gözaltı sayfası)
   ------------------------------------------------------------
   Sol sütun : yapışkan (sticky) başlık bloğu — kağıt zemini.
   Sağ sütun : sitenin MEVCUT .faq / .faq__item akordeonu.
               Yeni bir akordeon dili üretilmedi; sayfanın altındaki
               SSS ile aynı işaret, aynı köşe, aynı boşluk kalsın diye
               bilerek yeniden kullanıldı. .ag-faq yalnızca sütuna
               oturması (genişlik/dış boşluk) ve iki satırlı özet için
               yapısal düzeltme yapar — görsel dil değişmez.
   Davranış  : <ul data-faq> -> js/main.js aynı anda tek öğeyi açık
               tutar; sayfanın alt SSS'i ile birebir aynı davranış.
               Bileşen kendi JS'ini GETİRMEZ; <details>/<summary> ile
               JS hiç yüklenmese de tamamen çalışır.
   Belirteç  : --paper ve --teal-pale css/site.css :root'ta zaten
               tanımlı (satır 19); burada YENİDEN TANIMLANMAZ.
   Kırılma   : tek eşik = 760px. Konteyner sorgusu desteklenmiyorsa
               aynı sayıyla görüntü sorgusuna düşer; dar ekran
               geçersiz kılmaları 759px'te biter — tam devir teslim.
   ============================================================ */

/* Bu bölüm .section KULLANMAZ: üstündeki ve altındaki .section
   blokları dikey boşluğu zaten veriyor (çift padding olmasın). */
.ag{padding-block:0}

.ag-in{
  container-type:inline-size;container-name:ag-akordeon;
  max-width:1140px;margin-inline:auto}

.ag-grid{
  display:grid;align-items:start;
  grid-template-columns:var(--ag-kol, minmax(0, 1fr));
  gap:var(--ag-ara, 22px)}

/* --- tek eşik: 760px (konteyner genişliği) ------------------- */
@container ag-akordeon (min-width:760px){
  .ag-grid{
    --ag-kol:minmax(0, 1fr) minmax(0, 1.04fr);
    --ag-ara:clamp(26px, 3cqi, 44px)}
  .ag-head{
    --ag-yapis:sticky;
    --ag-kose:var(--r3);
    --ag-dolgu:clamp(24px, 2.6cqi, 32px)}
}
/* konteyner sorgusu yoksa aynı sayı, görüntü genişliğiyle */
@supports not (container-type:inline-size){
  @media (min-width:760px){
    .ag-grid{
      --ag-kol:minmax(0, 1fr) minmax(0, 1.04fr);
      --ag-ara:clamp(26px, 3vw, 44px)}
    .ag-head{
      --ag-yapis:sticky;
      --ag-kose:var(--r3);
      --ag-dolgu:clamp(24px, 2.6vw, 32px)}
  }
}

/* --- sol sütun: yapışkan başlık ------------------------------ */
.ag-head{
  position:var(--ag-yapis, static);top:calc(var(--hd) + 18px);
  background:var(--paper);border:1px solid var(--line-2);
  border-radius:var(--ag-kose, var(--r2));
  padding:var(--ag-dolgu, 22px 20px)}

/* etiket/vurgu — Newsreader bu sitede yalnız italik 400 yüklü */
.ag-kicker{
  font-family:Newsreader,Georgia,serif;font-style:italic;font-weight:400;
  font-size:1.06rem;line-height:1.3;color:var(--green);margin-bottom:9px}

/* bölüm başlığı düz kalsın diye Figtree 300 */
.ag-head h2{
  margin:0;font-family:Figtree,-apple-system,'Segoe UI',system-ui,sans-serif;
  font-weight:300;font-size:clamp(1.5rem, 1.05rem + 1.5vw, 2.05rem);
  letter-spacing:-.03em;line-height:1.16;color:var(--ink);
  overflow-wrap:break-word}

.ag-lede{
  margin-top:12px;font-size:15.6px;line-height:1.62;
  color:var(--body-2);max-width:46ch}

.ag-cta{margin-top:20px}

.ag-foot{
  margin-top:16px;padding:11px 13px;border-radius:var(--r);
  background:var(--teal-pale);
  font-size:13.4px;line-height:1.55;color:var(--body-2)}
.ag-foot .madde{background:var(--bg);font-size:12px}

/* --- sağ sütun: mevcut .faq bileşeni, sütuna oturtulmuş ------ */
/* .faq.ag-faq -> site.css'teki .faq ile aynı özgüllükte kalmasın */
.faq.ag-faq{margin:0;padding:0;max-width:none;list-style:none}
.ag-faq .ag-row{margin:0}
.ag-faq .ag-row:last-child .faq__item{margin-bottom:0}

/* başlık + tek satır özet: iki satıra sar, işaret sağ üstte kalsın */
.ag-faq .faq__item summary{flex-wrap:wrap;row-gap:5px}
.ag-qt{
  flex:1 1 auto;min-width:0;margin:0;
  font-family:inherit;font-size:inherit;font-weight:inherit;
  line-height:inherit;letter-spacing:-.012em;color:inherit;
  overflow-wrap:break-word}
.ag-ozet{
  flex:1 0 100%;order:1;
  font-size:14.2px;font-weight:400;line-height:1.5;
  color:var(--body);overflow-wrap:break-word}

/* klavye odak halkası: .faq__item{overflow:hidden} kırpmasın diye
   negatif offset ile kutunun içine alınır (WCAG 2.4.7) */
.ag-faq .faq__item summary:focus-visible{
  outline:2px solid var(--green);outline-offset:-3px;
  border-radius:inherit}

.ag-faq .faq__answer{max-width:none}

/* --- dar ekran ----------------------------------------------- */
/* .faq__item dolguları site.css:400-415'te zaten küçülüyor;
   burada yalnızca bu bloğa özgü metinler ayarlanır. */
@media (max-width:759px){
  .ag-kicker{font-size:1rem}
  .ag-lede{font-size:15.2px}
  .ag-ozet{font-size:13.8px}
  .ag-foot{padding:10px 12px;font-size:13.2px}
}
@media (max-width:400px){
  .ag-head{padding:20px 16px}
}

/* ============================================================
   KONTROL LİSTESİ BLOĞU  (.kl-)
   Complex Law "Do you have a claim?" bileşeninin karşılığı.
   Katmanlama: dış bant (--teal-pale) > klasör (--kl-teal) >
   defter (--paper) ; üstte sekme çıkıntısı + spiral cilt.

   NOT: --paper ve --teal-pale site.css :root'ta (satır 19) zaten
   tanımlı; burada YENİDEN TANIMLANMAZ, miras yoluyla gelir.
   Teal ikilisi ileride site.css :root'a
     --teal-card:#DEF1F2; --teal-deep:#003943;
   olarak eklenirse blok onu otomatik izler; eklenmediği sürece
   aşağıdaki yedek değerler çalışır.
   ============================================================ */

.kl-sec{
  --kl-teal:var(--teal-card,#DEF1F2);
  --kl-fg:var(--teal-deep,#003943);
  --kl-pad:clamp(15px,4vw,26px);
  --kl-tick:28px;
  --kl-gap:14px;
  --kl-top:clamp(22px,4.4vw,28px);
  --kl-hair:rgba(0,57,67,.13);
}
.kl-grid{display:grid;gap:clamp(26px,4vw,42px);max-width:1152px;margin-inline:auto}
@media (min-width:900px){
  .kl-grid{grid-template-columns:1fr 1fr;gap:clamp(34px,4.4vw,64px);align-items:center}
}

/* ---------------- sol sütun ---------------- */
.kl-intro{max-width:34rem}
/* eyebrow global sınıftan gelir — kopyalanmaz */
.kl-title{color:var(--ink);text-wrap:balance}   /* boyut/ağırlık global h2'den */
.kl-p{margin-top:14px;font-size:16px;line-height:1.68;color:var(--body)}
/* madde rozeti bu blokta defterin teal ailesine uyar */
.kl-sec .madde{background:var(--kl-teal);color:var(--kl-fg)}
.kl-link{display:inline-flex;align-items:center;gap:8px;margin-top:22px;
  font-size:15.5px;font-weight:600;color:var(--green);
  text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(0,57,18,.32)}
.kl-link:hover{text-decoration-color:var(--green)}
.kl-link svg{width:15px;height:15px;flex:none;transition:transform .24s}
.kl-link:hover svg{transform:translateX(4px)}

/* ---------------- sağ sütun: dış bant ----------------
   Yatay dolgu VAR: klasör içeri girer, bant gerçek bir çerçeve olur. */
.kl-graphic{background:var(--teal-pale);border-radius:var(--r3);
  padding:clamp(24px,3.4vw,36px) clamp(14px,2.4vw,22px)}

/* sekme çıkıntısı — klasörün üstünde ayrı SVG */
.kl-tab{display:block;width:clamp(92px,30%,126px);height:auto;aspect-ratio:102 / 26;
  color:var(--kl-teal);margin:0 0 -1px clamp(18px,6%,34px)}

/* klasör: üst köşeler düz, alt köşeler yuvarlak */
.kl-folder{background:var(--kl-teal);border-radius:0 0 var(--r3) var(--r3);padding:10px 10px 18px}

/* defter */
.kl-notepad{position:relative;background:var(--paper);border-radius:var(--r3);
  padding:var(--kl-top) 0 22px;box-shadow:var(--sh)}

/* spiral cilt — defterin üst kenarına oturan halkalar */
.kl-spiral{position:absolute;top:-8px;left:clamp(20px,7%,34px);right:clamp(20px,7%,34px);
  display:flex;justify-content:space-between;pointer-events:none}
.kl-spiral span{display:block;width:7px;height:17px;border-radius:4px;background:rgba(0,57,67,.26)}

/* etiket şeridi + katlanmış uç (uç, şeridin koyu tonu) */
.kl-label{position:relative;z-index:1;display:inline-block;max-width:calc(100% - 22px);
  margin:0 0 4px;padding:8px var(--kl-pad) 10px;background:var(--kl-fg);color:#fff;
  border-radius:0 var(--r) var(--r) 0;
  font-family:Newsreader,Georgia,serif;font-style:italic;font-weight:400;letter-spacing:0;
  font-size:clamp(1.12rem,1rem + .6vw,1.5rem);line-height:1.22}
.kl-label::after{content:"";position:absolute;left:0;top:100%;width:0;height:0;
  border-top:9px solid var(--kl-fg);border-right:11px solid transparent;opacity:.55}

/* liste kabı — dikey çizgi tam listenin boyunda durur */
.kl-list{position:relative;margin-top:18px}
.kl-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--kl-hair)}
.kl-row{display:grid;grid-template-columns:var(--kl-tick) 1fr;gap:var(--kl-gap);align-items:start;
  padding:14px var(--kl-pad)}
.kl-row + .kl-row{border-top:1px solid var(--kl-hair)}

/* BOŞ kutucuk: bu bir "yapıldı" listesi değil, doğrulanacaklar listesi.
   Kutunun kendisi işaret alanıdır; içine ayrıca ikon konmaz. */
.kl-tick{width:var(--kl-tick);height:var(--kl-tick);border-radius:50%;
  background:rgba(0,57,67,.09);display:grid;place-items:center;margin-top:-1px;flex:none}
.kl-tick svg{width:16px;height:16px;stroke:var(--kl-fg);stroke-width:2.4;
  fill:none;stroke-linecap:round;stroke-linejoin:round}
.kl-text{font-size:15.4px;line-height:1.5;color:var(--kl-fg);overflow-wrap:break-word}
.kl-ref{color:rgba(0,57,67,.72);white-space:nowrap}

/* kutucuk sütunu ile metin sütununu ayıran dikey çizgi — oluğun tam ortası */
.kl-rule{position:absolute;top:0;bottom:0;
  left:calc(var(--kl-pad) + var(--kl-tick) + var(--kl-gap) / 2);
  width:1px;background:rgba(0,57,67,.22)}

/* tek sütuna düşünce grafik ölçüsünü koru */
@media (max-width:899px){
  .kl-graphic{max-width:600px;margin-inline:auto}
}

@media (max-width:759px){
  .kl-sec{--kl-gap:12px}
  .kl-graphic{border-radius:var(--r2);padding:clamp(20px,4vw,28px) clamp(12px,3vw,18px)}
  .kl-folder{border-radius:0 0 var(--r2) var(--r2);padding:9px 8px 16px}
  .kl-notepad{border-radius:var(--r2)}
  .kl-text{font-size:14.9px}
}

/* ============================================================
   PASTEL TON KAYNAĞI — --p-*
   Servis sayfalarının beş pastel tonu (hero · illüstrasyon kartı
   · sayı şeridi) bugüne kadar üç ayrı yerde elle kopyalanıyordu.
   Tek kaynak artık burasıdır; ton değişecekse yalnız bu blok
   düzenlenir. Aşağıdaki üç varyant seti aynı değerleri yeniden
   bağlar — hesaplanan sonuç birebir eskisiyle aynıdır, hiçbir
   sayfada görsel değişiklik yoktur.
   DİKKAT: :root'taki eski --mint/--sky/--sand/--rose başka (daha
   soluk) YÜZEY tonlarıdır ve .ill-band gibi bileşenlerde
   kullanılıyor; bu beşli için var(--sky) değil var(--p-sky) yazın.
   ============================================================ */
.svc-hero--teal{--h-bg:var(--p-teal);--h-fg:var(--p-teal-ink)}
.svc-hero--mint{--h-bg:var(--p-mint);--h-fg:var(--p-mint-ink)}
.svc-hero--sky {--h-bg:var(--p-sky); --h-fg:var(--p-sky-ink)}
.svc-hero--sand{--h-bg:var(--p-sand);--h-fg:var(--p-sand-ink)}
.svc-hero--rose{--h-bg:var(--p-rose);--h-fg:var(--p-rose-ink)}
.ill-card--teal{--ic-bg:var(--p-teal);--ic-br:rgba(var(--p-teal-rgb),.26);--ic-fg:var(--p-teal-ink)}
.ill-card--mint{--ic-bg:var(--p-mint);--ic-br:rgba(var(--p-mint-rgb),.24);--ic-fg:var(--p-mint-ink)}
.ill-card--sky {--ic-bg:var(--p-sky); --ic-br:rgba(var(--p-sky-rgb),.22); --ic-fg:var(--p-sky-ink)}
.ill-card--sand{--ic-bg:var(--p-sand);--ic-br:rgba(var(--p-sand-rgb),.24);--ic-fg:var(--p-sand-ink)}
.ill-card--rose{--ic-bg:var(--p-rose);--ic-br:rgba(var(--p-rose-rgb),.22);--ic-fg:var(--p-rose-ink)}

/* ============================================================
   SAYI ŞERİDİ — .sy-
   Süreleri, uzun metne girmeden önce gösteren editoryal şerit.
   Kırtasiye metaforu: sol üstte çıkıntılı bir DOSYA SEKMESİ,
   altında soluk pastel "dosya" matı; matın içinde beyaz sayfa,
   saç çizgileriyle ayrılmış sütunlar. Her sütunda önce ölçüyü
   resmeden minik düz vektör (tam kadran · yarım kadran · üç gün
   yaprağı · iki satırlı takvim), sonra büyük ince italik serif
   sayı, ledger çizgisi, kısa açıklama ve madde atfı.

   YERLEŞİM: sekme MUTLAK KONUMLU DEĞİL — .sy-band bir sütun
   flex kabıdır, sekme onun ilk (daralan) öğesi, sayfa ikinci
   (tam genişlik) öğesidir. Bu yüzden şerit kendi kutusunun
   dışına taşmaz: overflow:hidden olan bir kapsayıcıya (.ill-card,
   .faq__item, .cta-band) konsa da başlık kaybolmaz, üstündeki
   margin de gerçek boşluk üretir.

   IZGARA: sabit sütun sayısı yok. .sy-item flex:1 1 126px ile
   yer buldukça 2→3→4 sütuna açılır; son satırda tek kalan öğe
   satırı doldurur, boş hücre oluşmaz. Yani bileşen 3, 4 veya 5
   öğeyle de çalışır. Saç çizgileri gerçek boşluk değil, öğelerin
   sol/üst 1px box-shadow'udur; dış kenardakiler .sy-list'in
   overflow:hidden'ı tarafından kırpılır.

   Mobil öncelikli · JavaScript yok · tek tema · gradyan yok.
   ============================================================ */

.sy-band{
  --sy-mat:var(--p-teal);      /* soluk turkuaz dosya zemini */
  --sy-ink:var(--p-teal-ink);  /* koyu turkuaz mürekkep */
  display:flex;flex-direction:column;align-items:flex-start;
  margin:38px 0 30px;
}

/* sol üstteki dosya sekmesi — akış içinde, mat ile aynı renk */
.sy-band__tab{
  display:flex;align-items:center;height:28px;padding:0 18px;max-width:100%;
  background:var(--sy-mat);color:var(--sy-ink);
  border-radius:10px 10px 0 0;
  font-family:Newsreader,Georgia,serif;font-style:italic;font-weight:400;
  font-size:15px;line-height:1;
}

/* dosya matı — sol üst köşe sekmeye kaynadığı için köşesiz */
.sy-band__sheet{
  width:100%;padding:13px;
  background:var(--sy-mat);
  border-radius:0 var(--r3) var(--r3) var(--r3);
}

/* beyaz sayfa */
.sy-list{
  display:flex;flex-wrap:wrap;
  background:var(--bg);
  border-radius:var(--r2);overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  list-style:none;margin:0;padding:0;
}

.sy-item{
  flex:1 1 126px;min-width:0;
  display:flex;flex-direction:column;align-items:flex-start;
  padding:18px 15px 17px;
  box-shadow:-1px 0 0 var(--line-2),0 -1px 0 var(--line-2); /* saç çizgileri */
}

.sy-item__fig{display:block;line-height:0;color:var(--sy-ink);margin-bottom:13px}
.sy-item__fig svg{width:28px;height:28px;display:block}

/* sayı + birim ortak taban çizgisinde; altında ledger çizgisi */
.sy-item__num{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;
  width:100%;margin:0 0 12px;padding-bottom:12px;
  border-bottom:1px solid var(--line-2);
}
.sy-item__val{
  font-family:Newsreader,Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(2.4rem,1.35rem + 4.6vw,3.2rem);
  line-height:.94;letter-spacing:-.02em;color:var(--sy-ink);
  font-variant-numeric:lining-nums tabular-nums;
}
.sy-item__unit{
  font-size:12px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--sy-ink);white-space:nowrap;
}

.sy-item__txt{
  width:100%;margin:0 0 14px;
  font-size:14.2px;line-height:1.42;font-weight:500;color:var(--body-2);
}
.sy-item__sub{
  display:block;margin-top:4px;
  font-size:13px;line-height:1.45;font-weight:400;color:var(--body);
}

/* madde atfı — sütunların alt hizasında. Tek satıra zorlanmaz:
   uzun atıf (ör. "AY m. 19 · CMK m. 91") sessizce kesilmek yerine
   iki satıra sarar. Yanlış madde numarası okutmak yasak. */
.sy-item__ref{
  margin:auto 0 0;max-width:100%;
  padding:3px 9px;border-radius:5px;
  background:var(--sy-mat);color:var(--sy-ink);
  font-size:11.5px;font-weight:600;letter-spacing:.02em;
  overflow-wrap:anywhere;
}

.sy-band__foot{
  margin:13px 3px 1px;
  font-size:12.6px;line-height:1.5;color:var(--sy-ink);
}

/* .prose içindeki liste ve akış kurallarını sıfırla */
.prose .sy-band{margin-top:34px}
.prose .sy-list{padding-left:0;list-style:none}
.prose .sy-list li+li{margin-top:0}

/* pastel varyantlar — sayfanın hero tonuna eşlenir */
.sy-band--teal{--sy-mat:var(--p-teal);--sy-ink:var(--p-teal-ink)}
.sy-band--mint{--sy-mat:var(--p-mint);--sy-ink:var(--p-mint-ink)}
.sy-band--sky {--sy-mat:var(--p-sky); --sy-ink:var(--p-sky-ink)}
.sy-band--sand{--sy-mat:var(--p-sand);--sy-ink:var(--p-sand-ink)}
.sy-band--rose{--sy-mat:var(--p-rose);--sy-ink:var(--p-rose-ink)}

@media (max-width:759px){
  .sy-band{margin:32px 0 26px}
  .sy-band__sheet{padding:11px;border-radius:0 var(--r2) var(--r2) var(--r2)}
  .sy-item{padding:16px 13px 15px}
  .sy-item__fig{margin-bottom:11px}
  .sy-item__fig svg{width:25px;height:25px}
  .sy-item__num{margin-bottom:11px;padding-bottom:11px}
  .sy-item__txt{font-size:13.8px;margin-bottom:12px}
  .sy-item__sub{font-size:12.6px}
  /* dar sütunda atıf tek satırda kalsın: 320px'te ölçülen
     içerik kutusu 107px, "CMK m. 268/1" bu ölçüde 104px */
  .sy-item__ref{font-size:11px;padding:3px 7px;letter-spacing:0}
  .sy-band__foot{font-size:12.2px;margin:11px 2px 1px}
}
@media (max-width:380px){
  .sy-band__tab{padding:0 14px;font-size:14px}
  .sy-item{padding:15px 11px 14px}
}

/* Baskı: matlar, sekme zemini, rozet dolguları ve saç çizgileri
   yalnız arka plan boyamasıydı; tarayıcı kağıtta bunları basmaz.
   Yapıyı gerçek kenarlıklarla yeniden kur ve şeridi bölünmez yap.
   Pastel ton kağıtta isteniyorsa bu bloğun yerine .sy-band'e
   print-color-adjust:exact verilebilir. */
@media print{
  .sy-band{break-inside:avoid;margin:24px 0 20px}
  .sy-band__tab{height:auto;padding:0 0 7px;background:none;font-size:13px}
  .sy-band__sheet{padding:0;background:none;border-radius:0}
  .sy-list{box-shadow:none;border:1px solid #999;border-radius:8px}
  .sy-item{break-inside:avoid;box-shadow:none;border-left:1px solid #BBB;padding:12px}
  .sy-item:first-child{border-left:0}
  .sy-item__ref{background:none;border:1px solid #BBB}
  .sy-band__foot{margin:9px 0 0}
}

/* ============================================================
   PASTEL PALET TOKENLERİ — :root'a taşınan sabit hex'ler
   .svc-hero--*, .ill-card--* ve .zc bileşeni aynı beşliyi
   kopyalayarak kullanıyordu; tek kaynağa bağlandı.
   NOT: :root'taki eski --sand:#F5EDE3, sayfalarda fiilen
   kullanılan #FFF5E5'ten farklıydı. Pastel zemin artık
   --p-sand'dir; --sand tokeni kullanılmıyorsa silinebilir.
   ============================================================ */
.svc-hero--teal{--h-bg:var(--p-teal);--h-fg:var(--p-teal-ink)}
.svc-hero--mint{--h-bg:var(--p-mint);--h-fg:var(--p-mint-ink)}
.svc-hero--sky {--h-bg:var(--p-sky); --h-fg:var(--p-sky-ink)}
.svc-hero--sand{--h-bg:var(--p-sand);--h-fg:var(--p-sand-ink)}
.svc-hero--rose{--h-bg:var(--p-rose);--h-fg:var(--p-rose-ink)}
.ill-card--teal{--ic-bg:var(--p-teal);--ic-fg:var(--p-teal-ink)}
.ill-card--mint{--ic-bg:var(--p-mint);--ic-fg:var(--p-mint-ink)}
.ill-card--sky {--ic-bg:var(--p-sky); --ic-fg:var(--p-sky-ink)}
.ill-card--sand{--ic-bg:var(--p-sand);--ic-fg:var(--p-sand-ink)}
.ill-card--rose{--ic-bg:var(--p-rose);--ic-fg:var(--p-rose-ink)}

/* ============================================================
   SAAT ÇİZELGESİ (.zc-) — gözaltı süreleri
   Dosya klasörü + delikli kağıt metaforu. Mobilde dikey akış,
   >=1000px'te yatay eksen. JavaScript yok, tek tema.

   OKUMA YÖNÜ: 0 saat -> 24 saat -> +3 gün (uzatma) -> +12 saat
   (yol süresi). DÜZ çizgi = kanunî gözaltı süresi (uzatma DÂHİL;
   CMK m. 91/3 uzatmayı gözaltı süresinin kendisine ekler).
   KESİK çizgi YALNIZCA son segmentte: sürenin DIŞINDA kalan yol
   süresi (m. 91/1 "zorunlu süre hariç"). Bu ayrım bileşenin tüm
   anlamını taşıdığı için dekoratif sayılamaz; çizgi ve nokta
   kontrastı WCAG 1.4.11'in 3:1 eşiğinin üstünde tutuldu (~4.1:1).

   YERLEŞİM: .prose'un DIŞINDA, .container--narrow içinde durur.
   >=1000px'te 4 sütunluk eksen 820px'lik kaba sığmadığından
   bileşen kabından simetrik olarak genişler (--zc-genis); kap
   ortalı olduğu için sonuç viewport'ta ortalanır ve metin sütunu
   144px yerine ~235px olur.

   EKSEN MATEMATİĞİ tek satır / 4 sütuna kilitlidir. Sütun sayısı
   değişirse ::before genişliği ve ::after left/right yüzdeleri de
   değişmelidir; 2 satıra bölünürse eksen çizgisi kayar.

   DİKKAT: SVG deseninin id'si SAYFA BAŞINA BENZERSİZ olmalıdır.
   Bileşen aynı sayfada ikinci kez kullanılacaksa "zc-delik-1"
   yerine "zc-delik-2" yazıp fill="url(#zc-delik-2)" yapın.

   site.css'in SONUNA eklenir (kaynak sırası .prose'u yener).
   ============================================================ */
.zc{
  --zc-fg:var(--p-teal-ink);       /* koyu turkuaz — metin ve çizgi */
  --zc-bg:var(--p-teal);       /* soluk turkuaz — klasör zemini */
  --zc-pad:15px;                /* beyaz kağıdın iç boşluğu */
  --zc-tile-w:64px;             /* sayı karosunun genişliği */
  --zc-tile-h:62px;             /* sayı karosunun yüksekliği */
  --zc-mark:calc(var(--zc-tile-w) / 2);  /* karo ekseni = nokta ekseni */
  position:relative;margin:36px 0 8px;padding:12px;
  background:var(--zc-bg);border-radius:var(--r3);box-shadow:var(--sh);
}
/* klasörün sol üstteki çıkıntılı sekmesi */
.zc::before{
  content:"";position:absolute;left:20px;top:-15px;width:118px;height:17px;
  background:var(--zc-bg);border-radius:10px 10px 0 0;
  clip-path:polygon(0 0,72% 0,100% 100%,0 100%);
  box-shadow:0 -3px 8px rgba(0,0,0,.05);
}
/* klasörün içindeki beyaz kağıt */
.zc__sheet{position:relative;background:var(--bg);border-radius:var(--r2);
  padding:32px var(--zc-pad) 20px}

/* üst kenar boyunca spiral cilt delikleri */
.zc__punch{position:absolute;top:10px;left:14px;width:calc(100% - 28px);height:13px;
  color:rgba(0,57,67,.30)}

/* turkuaz etiket şeridi + sol alt köşede kağıdın katlanmış ucu */
.zc__etiket{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  margin:0 0 13px calc(-1 * var(--zc-pad) - 9px);
  padding:7px 17px 7px 15px;background:var(--zc-bg);color:var(--zc-fg);
  border-radius:0 var(--r) var(--r) 0;
  font-family:Newsreader,Georgia,serif;font-weight:400;font-style:italic;
  font-size:clamp(1.05rem,.98rem + .3vw,1.22rem);line-height:1.25;letter-spacing:-.01em}
.zc__etiket svg{width:17px;height:17px;flex:none;opacity:.8}
.zc__etiket::after{content:"";position:absolute;left:0;bottom:-8px;width:0;height:0;
  border-top:8px solid rgba(0,57,67,.55);border-left:8px solid transparent}
/* .prose h3{margin-top:1.7em} / .prose h4 başlıkları aşağı itmesin */
.zc .zc__etiket,.zc .zc__h{margin-top:0}

.zc__giris{font-size:14.4px;line-height:1.6;color:var(--zc-fg);opacity:.82;
  max-width:58ch;margin-bottom:20px}

/* ---- çizelge: mobilde dikey (varsayılan) ---- */
.zc .zc__track{position:relative;list-style:none;margin:0;padding:0}
.zc .zc__stop{position:relative;margin:0;display:grid;
  grid-template-columns:var(--zc-tile-w) 1fr;column-gap:13px;padding-bottom:26px}
.zc .zc__stop:last-child{padding-bottom:0}

/* sayı karosu — çizelgenin durağı */
.zc__tile{grid-column:1;grid-row:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;width:100%;height:var(--zc-tile-h);
  background:var(--bg);border:1px solid rgba(0,57,67,.55);border-radius:var(--r2)}
/* yalnızca SÜRE DIŞI kalan bölüm kesik kenarlıklıdır */
.zc__stop--ek .zc__tile{border-style:dashed}
.zc__num{font-size:clamp(1.7rem,1.2rem + 2.2vw,2.5rem);font-weight:300;line-height:1;
  letter-spacing:-.045em;color:var(--zc-fg);font-variant-numeric:tabular-nums}
.zc__isaret{font-size:.5em;vertical-align:.45em;letter-spacing:0;opacity:.7}
.zc__unit{margin-top:6px;font-size:10.5px;font-weight:500;line-height:1;
  letter-spacing:.09em;text-transform:uppercase;color:var(--zc-fg);opacity:.75}

/* duraklar arası bağlantı — mobilde dikey çizgi */
.zc__rail{position:absolute;left:0;top:calc(var(--zc-tile-h) + 9px);bottom:0;
  width:var(--zc-tile-w);display:flex;justify-content:center}
.zc__rail::before{content:"";width:2px;height:100%;background:var(--zc-fg);opacity:.62}
.zc__rail--kesik::before{width:0;background:none;border-left:2px dashed var(--zc-fg)}
.zc__stop:last-child .zc__rail::before{display:none}

/* durak işareti — kural DOLU, uzatma HALKALI, süre dışı İÇİ BOŞ.
   Mobilde de görünür; gösterge şeridi bu üç işareti anlatıyor. */
.zc__dot{position:absolute;left:50%;top:0;z-index:1;transform:translate(-50%,-50%);
  width:12px;height:12px;border-radius:50%;
  background:var(--zc-fg);box-shadow:0 0 0 4px var(--bg)}
.zc__stop--uzatma .zc__dot{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--zc-fg)}
.zc__stop--ek .zc__dot{background:var(--bg);border:2px solid var(--zc-fg)}

/* durak açıklaması */
.zc__body{grid-column:2;grid-row:1 / span 2;padding-top:2px}
.zc__tag{display:inline-block;margin-bottom:8px;padding:3px 10px;border-radius:999px;
  background:var(--zc-bg);color:var(--zc-fg);font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;line-height:1.4}
.zc__tag--ek{background:var(--p-sand);color:var(--p-sand-ink)}
.zc__h{font-size:16px;font-weight:600;line-height:1.3;letter-spacing:-.01em;
  color:var(--zc-fg);margin-bottom:5px}
.zc__t{font-size:14.6px;line-height:1.58;color:var(--zc-fg);opacity:.82}
.zc__ref{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.zc .madde{background:var(--zc-bg);color:var(--zc-fg)}

/* gösterge ve dipnot */
.zc__legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px;padding-top:14px;
  border-top:1px solid rgba(0,57,67,.28);font-size:12.6px;line-height:1.4;color:var(--zc-fg)}
.zc__key{display:inline-flex;align-items:center;gap:9px;max-width:100%}
/* gösterge örneği: çizgi + o segmentin durak işareti */
.zc__ornek{position:relative;display:inline-block;flex:none;width:30px;height:13px}
.zc__ornek::before{content:"";position:absolute;left:0;right:0;top:50%;height:0;
  margin-top:-1px;border-top:2px solid var(--zc-fg);opacity:.62}
.zc__ornek::after{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:9px;height:9px;border-radius:50%;
  background:var(--zc-fg);box-shadow:0 0 0 3px var(--bg)}
.zc__ornek--uzatma::after{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--zc-fg)}
.zc__ornek--kesik::before{border-top-style:dashed}
.zc__ornek--kesik::after{background:var(--bg);border:2px solid var(--zc-fg)}
.zc__not{margin-top:11px;font-size:12.8px;line-height:1.6;color:var(--zc-fg);opacity:.85}
.zc__not .madde{font-size:12px}

/* ---- masaüstü: yatay çizelge, duraklar çizginin üstünde ----
   Kırılım 1000px: 760-999px arasında metin sütunu okunaksız
   kalıyordu, o aralık dikey düzende bırakıldı. */
@media (min-width:1000px){
  .zc{--zc-pad:24px;--zc-tile-w:88px;--zc-tile-h:96px;padding:14px;
    /* .container--narrow (820px) 4 sütunluk eksen için dar kalıyor;
       kabından simetrik genişler — kap ortalı olduğu için ortada durur */
    --zc-genis:min(1080px,calc(100vw - 2 * var(--gut)));
    margin-inline:calc((100% - var(--zc-genis)) / 2)}
  .zc__sheet{padding:36px var(--zc-pad) 24px}
  .zc__giris{margin-bottom:26px}
  .zc .zc__track{display:grid;grid-template-columns:repeat(4,1fr)}
  .zc .zc__stop{display:flex;flex-direction:column;padding:0 16px 0 0}
  .zc__tile{flex:none;width:var(--zc-tile-w)}
  .zc__rail{position:relative;left:auto;top:auto;bottom:auto;flex:none;display:block;
    width:auto;height:24px;margin:14px 0 18px}
  .zc__rail::before{display:none}
  .zc__dot{left:var(--zc-mark);top:50%;width:13px;height:13px;
    background:var(--zc-fg);border:0;box-shadow:0 0 0 5px var(--bg)}
  .zc__stop--uzatma .zc__dot{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--zc-fg)}
  .zc__stop--ek .zc__dot{background:var(--bg);border:2px solid var(--zc-fg);
    box-shadow:0 0 0 5px var(--bg)}
  /* yatay eksen: 0 -> 24 -> +3 gün DÜZ (kanunî süre),
     yalnızca +3 gün -> +12 saat KESİK (süre dışı yol süresi) */
  .zc .zc__track::before,.zc .zc__track::after{content:"";position:absolute;z-index:0;
    height:0;margin-top:-1px;top:calc(var(--zc-tile-h) + 26px);opacity:.62}
  .zc .zc__track::before{left:var(--zc-mark);width:50%;
    border-top:2px solid var(--zc-fg)}
  .zc .zc__track::after{left:calc(50% + var(--zc-mark));right:calc(25% - var(--zc-mark));
    border-top:2px dashed var(--zc-fg)}
  /* madde rozetleri tek hatta otursun, gövdeler ortak taban çizgisinden başlasın */
  .zc__body{flex:1;display:flex;flex-direction:column}
  .zc__ref{margin-top:auto;padding-top:9px}
  .zc__tag{font-size:10.5px;padding:3px 9px;margin-bottom:9px}
  .zc__h{font-size:15px;min-height:2.6em}
  .zc__t{font-size:13.6px;line-height:1.55}
}

/* ---- baskı: klasör/delik dekoru düşer, işaretler kenarlıkla çizilir ---- */
@media print{
  .zc{break-inside:avoid;margin-inline:0;box-shadow:none;background:none;
    border:1px solid rgba(0,57,67,.45);
    print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .zc__sheet{padding:20px 14px}
  .zc::before,.zc__punch{display:none}
  .zc__etiket{background:none;padding-left:0;margin-left:0}
  .zc__etiket::after{display:none}
  .zc__stop{break-inside:avoid}
  .zc__dot{background:var(--zc-fg);box-shadow:none;border:2px solid var(--bg)}
  .zc__stop--uzatma .zc__dot{background:var(--zc-fg);border-color:var(--bg);box-shadow:none;
    outline:2px solid var(--zc-fg);outline-offset:1px}
  .zc__stop--ek .zc__dot{background:var(--bg);border:2px solid var(--zc-fg);
    box-shadow:none;outline:0}
  .zc__ornek::after{box-shadow:none}
  .zc__tag{border:1px solid currentColor;background:none}
}

/* ============================================================
   KANUN MADDESİ KARTI  ( .km- )
   Kanun metnini OLDUĞU GİBİ gösteren "belge" bloğu.
   Zemin: --paper (#FDF9F6 kâğıt kremi) — .section--alt'ın
   #FAFAFA zemininde de, beyaz zeminde de ayrışır.
   Solda kalın renk şeridi, metin bloğunun kenarında ince marj
   çizgisi (defter hattı), üstte künye satırı (kanun adı + .madde
   rozeti), gövdede italik serif alıntı, altta bağlantılı kaynak
   satırı. Tıklanabilir değildir, JavaScript istemez.
   Rozet ölçüleri sitedeki .madde'den gelir; burada yalnız
   rengi devralınır — tek kaynak, desenkron olmaz.
   Renk: sınıf eklenmezse koyu yeşil; .km-card--teal / --mint /
   --sky / --sand / --rose varyantları svc-hero / ill-card
   ailesiyle BİREBİR aynı tonları kullanır.
   ============================================================ */

.km-card{
  --km-ac:var(--green);          /* sol şerit + ikonlar + marj hattı */
  --km-fg:var(--green);          /* künye ve alıntı metni */
  --km-chip:var(--green-pale);   /* madde rozeti zemini */
  --km-pad:clamp(20px,2.4vw,28px);
  position:relative;
  /* .prose dışında (doğrudan .container, .grid hücresi vb.) da nefes payı */
  margin-block:clamp(22px,2.4vw,30px);
  background:var(--paper);
  border:1px solid var(--line-2);
  border-left:7px solid var(--km-ac);
  border-radius:var(--r3);
  padding:var(--km-pad) var(--km-pad) calc(var(--km-pad) - 4px);
  box-shadow:0 4px 16px rgba(0,0,0,.05);
  overflow-wrap:break-word;
}
/* kâğıdın marj çizgisi — metin bloğunun kenarında, varyant rengiyle uyumlu */
.km-card::before{content:"";position:absolute;left:calc(var(--km-pad) - 9px);top:0;bottom:0;width:1px;
  background:var(--line);
  background:color-mix(in srgb,var(--km-ac) 24%,transparent)}

/* künye satırı: kanun adı + madde rozeti */
.km-card__kunye{display:flex;flex-wrap:wrap;align-items:center;gap:9px 12px;
  padding-right:34px;padding-bottom:13px;border-bottom:1px solid var(--line-2)}
.km-card__kanun{font-size:11.6px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  line-height:1.35;color:var(--km-fg);opacity:.78}
/* rozetin ölçüsü/tipografisi .madde'de kalır; kart yalnız rengini değiştirir */
.km-card .madde{background:var(--km-chip);color:var(--km-fg)}

/* sağ üstteki dekoratif belge işareti */
.km-card__mark{position:absolute;top:calc(var(--km-pad) - 3px);right:var(--km-pad);
  width:23px;height:23px;color:var(--km-ac);opacity:.34;pointer-events:none}

/* kanun metni — Newsreader bu sitede yalnızca italik 400 yüklü */
.km-card__metin{margin-top:16px;font-family:Newsreader,Georgia,serif;font-weight:400;font-style:italic;
  font-size:clamp(1.06rem,1.01rem + .42vw,1.3rem);line-height:1.64;letter-spacing:-.004em;
  color:var(--km-fg)}
.km-card__metin p+p{margin-top:.62em}

/* kaynak satırı — mevzuat metnine gerçek bağlantı taşır */
.km-card__kaynak{display:flex;align-items:flex-start;gap:9px;margin-top:17px;padding-top:13px;
  border-top:1px solid var(--line-2);font-size:12.8px;line-height:1.52;color:var(--body)}
.km-card__kaynak svg{width:14px;height:14px;flex:none;margin-top:3px;color:var(--km-ac);opacity:.7}
.km-card__kaynak a{color:var(--km-fg);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,currentColor 38%,transparent)}
.km-card__kaynak a:hover{text-decoration-color:currentColor}

/* renk varyantları — svc-hero / ill-card ailesiyle aynı değerler, tek yazım biçimi */
.km-card--teal{--km-ac:#003943;--km-fg:#003943;--km-chip:#DEF1F2}
.km-card--mint{--km-ac:#0B4A1F;--km-fg:#0B4A1F;--km-chip:#E3F2E8}
.km-card--sky {--km-ac:#203A6E;--km-fg:#203A6E;--km-chip:#E7EEFB}
.km-card--sand{--km-ac:#5D3D0C;--km-fg:#5D3D0C;--km-chip:#FFF5E5}
.km-card--rose{--km-ac:#552019;--km-fg:#552019;--km-chip:#FBE6E2}

/* başlığın hemen altındaki kart, başlığa bağlı okunsun */
.prose h2 + .km-card,
.prose h3 + .km-card{margin-top:clamp(13px,1.3vw,18px)}

@media (max-width:759px){
  .km-card{--km-pad:19px;border-radius:var(--r2);border-left-width:6px}
  .km-card__kunye{padding-right:30px}
  .km-card__metin{margin-top:14px;font-size:1.08rem;line-height:1.6}
  .km-card__mark{width:20px;height:20px}
  .km-card__kaynak{font-size:12.4px}
}

@media print{
  /* rozet zemini ve marj hattı kâğıda çıksın; çıkmazsa rozet çerçeveyle ayakta kalır */
  .km-card{box-shadow:none;background:#fff;break-inside:avoid;page-break-inside:avoid;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .km-card .madde{border:1px solid currentColor}
  .km-card__kaynak a{text-decoration:none}
}

/* ============================================================
   YAPIN / YAPMAYIN — iki sütunlu davranış kartı   (önek: .yy-)
   Kırtasiye metaforu: sekmeli dosya klasörü + içinde beyaz
   sayfa; sayfanın üst kenarında cilt delikleri, sol üstte
   italik serif etiket şeridi ve katlanmış köşe. Satırlar saç
   çizgiyle ayrılır, işaretler ayrı sütunda soluk daire içinde.
   Sol sütun mint/yeşil (Yapın), sağ sütun gül/bordo (Yapmayın);
   sekme karşı köşede olduğu için iki sütun bir bakışta ayrışır.

   Renk: her değer site paletinden token (var()); yalnızca
   cilt deliği tonları ve gölgeler token türevi rgba. Gradyan
   yok, JS yok, tek tema.
   Kanun atfı için sitenin kendi .madde rozeti kullanılır;
   rozet iki sütunda da panelin kendi ailesine boyanır.
   İki sütuna geçiş EKRANI değil KABI ölçer (container query) —
   bileşen .prose (72ch) içinde yaşadığı için viewport ölçüsü
   yanıltıcıydı. Container query desteklemeyen tarayıcıda tek
   sütun kalır; @supports içinde 900px'lik yedek vardır.
   site.css'in SONUNA eklenir.
   ============================================================ */

/* .prose h2+* / .prose>*+* kurallarını yenmek için (0,2,0) */
.yy,.prose>.yy{margin:34px 0 30px}
/* --yy-rose-2: site.css'te .svc-hero--rose / .ill-card--rose ile
   aynı pastel gül; :root'ta tokeni yok, burada tek yerde durur */
.yy{container-type:inline-size;--yy-rose-2:#FBE6E2}
.yy .yy-grid{display:grid;gap:16px}

@container (min-width:600px){
  .yy .yy-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .yy .yy-sheet{padding:27px 15px 19px}
}
@supports not (container-type:inline-size){
  @media (min-width:900px){
    .yy .yy-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
    .yy .yy-sheet{padding:27px 15px 19px}
  }
}

/* --- renk aileleri: zemin daireden koyu, iki sütunda da aynı yön --- */
.yy .yy-panel--do{
  --yy-bg:var(--mint);--yy-fg:var(--green-2);--yy-mark:var(--green-pale);
  --yy-fold:var(--green);--yy-punch:rgba(11,74,31,.22)}
.yy .yy-panel--no{
  --yy-bg:var(--rose);--yy-fg:var(--maroon);--yy-mark:var(--yy-rose-2);
  --yy-fold:var(--maroon);--yy-punch:rgba(77,23,39,.20)}

/* --- klasör gövdesi (gölge sekmeyi de kapsasın diye drop-shadow) --- */
.yy .yy-panel{
  position:relative;margin-top:15px;padding:10px;background:var(--yy-bg);
  border-radius:0 var(--r3) var(--r3) var(--r3);
  filter:drop-shadow(0 5px 12px rgba(0,0,0,.07))}
.yy .yy-panel::before{
  content:"";position:absolute;top:-15px;left:0;width:96px;height:15px;
  background:var(--yy-bg);border-radius:10px 12px 0 0}
.yy .yy-panel--no{border-radius:var(--r3) 0 var(--r3) var(--r3)}
.yy .yy-panel--no::before{left:auto;right:0;border-radius:12px 10px 0 0}

/* --- klasörün içindeki beyaz sayfa --- */
.yy .yy-sheet{
  position:relative;background:var(--bg);border-radius:var(--r2);
  padding:26px 15px 18px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.05)}

/* cilt delikleri: tek elemandan box-shadow zinciriyle 12 delik
   (gradyan yok; 206px sabit, sayfanın ortasına oturur, 320px'te sığar) */
.yy .yy-sheet::before{
  content:"";position:absolute;top:11px;left:calc(50% - 103px);
  width:8px;height:3.5px;border-radius:2px;background:var(--yy-punch);
  box-shadow:
     18px 0 var(--yy-punch),  36px 0 var(--yy-punch),
     54px 0 var(--yy-punch),  72px 0 var(--yy-punch),
     90px 0 var(--yy-punch), 108px 0 var(--yy-punch),
    126px 0 var(--yy-punch), 144px 0 var(--yy-punch),
    162px 0 var(--yy-punch), 180px 0 var(--yy-punch),
    198px 0 var(--yy-punch)}

/* --- etiket şeridi + katlanmış köşe (Newsreader yalnız italik 400) --- */
.yy .yy-tag{
  position:relative;display:inline-block;margin:0 0 14px;padding:5px 13px 6px;
  background:var(--yy-bg);color:var(--yy-fg);border-radius:6px 6px 6px 0;
  font-family:Newsreader,Georgia,serif;font-weight:400;font-style:italic;
  font-size:1.12rem;line-height:1.25;letter-spacing:0}
.yy .yy-tag::after{
  content:"";position:absolute;left:0;bottom:-7px;width:11px;height:7px;
  background:var(--yy-fold);clip-path:polygon(0 0,100% 0,0 100%)}

/* --- satırlar --- */
.yy .yy-list{list-style:none;margin:0;padding:0}
.yy .yy-item{
  display:grid;grid-template-columns:24px minmax(0,1fr);gap:11px;
  align-items:start;margin:0;padding:12px 0}
.yy .yy-item:first-child{padding-top:2px}
.yy .yy-item:last-child{padding-bottom:0}
.yy .yy-item+.yy-item{border-top:1px solid var(--line-2)}
.yy .yy-mark{
  width:24px;height:24px;border-radius:50%;background:var(--yy-mark);
  color:var(--yy-fg);display:grid;place-items:center;margin-top:2px}
.yy .yy-mark svg{width:13px;height:13px;display:block}
.yy .yy-item p{
  margin:0;font-size:14.6px;line-height:1.58;color:var(--body-2);
  overflow-wrap:break-word}
.yy .yy-item strong{font-weight:600;color:var(--yy-fg)}
/* sitenin madde rozeti, panelin kendi ailesinde
   (Yapın sütununda değer .madde varsayılanıyla birebir aynıdır) */
.yy .yy-panel .madde{background:var(--yy-mark);color:var(--yy-fg)}

/* --- klasörün alt şeridindeki dayanak satırı --- */
.yy .yy-foot{
  margin:11px 6px 3px;font-size:12.4px;line-height:1.5;
  color:var(--yy-fg);opacity:.85}

/* --- dar ekran: eşik sitenin kendi dar bloğuyla aynı (400px) --- */
@media (max-width:400px){
  .yy,.prose>.yy{margin:28px 0 26px}
  .yy .yy-sheet{padding:24px 12px 16px}
  .yy .yy-tag{font-size:1.04rem;margin-bottom:12px}
  .yy .yy-item{gap:10px}
}

/* --- baskı: bileşen tamamen zemine dayanıyor, zeminler basılsın;
       panel iki sayfaya bölünmesin, dekorlar kalksın --- */
@media print{
  .yy{break-inside:avoid;margin:18px 0}
  .yy .yy-grid{grid-template-columns:1fr;gap:14px}
  .yy .yy-panel{
    break-inside:avoid;margin-top:0;padding:8px;filter:none;
    border:1px solid var(--yy-fg);border-radius:var(--r);
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .yy .yy-panel--no{border-radius:var(--r)}
  .yy .yy-panel::before,.yy .yy-sheet::before,.yy .yy-tag::after{display:none}
  .yy .yy-sheet{padding:12px;box-shadow:none}
  .yy .yy-tag{
    padding:0 0 4px;border-radius:0;border-bottom:1px solid currentColor;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .yy .yy-mark{
    border:1px solid currentColor;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .yy .yy-foot{opacity:1}
}

/* ============================================================
   KARŞILAŞTIRMA TABLOSU · .ks-
   Yakalama / Gözaltı / Tutuklama: kararı kim verir, süresi,
   kanunî dayanağı, nereye itiraz edilir.

   Görsel dil: soluk turkuaz DOSYA KLASÖRÜ (sol üstte çıkıntılı
   sekme, yumuşak gölge), içinde beyaz kâğıt; kâğıdın üst kenarı
   boyunca cilt delikleri, sol üstte italik serif etiket şeridi
   ve şeridin sol alt köşesinde katlanmış kâğıt ucu.

   Davranış: >=760px gerçek tablo. Altında tablo YATAY KAYMAZ,
   her SÜTUN kendi kartına dönüşür (başlık + dört ölçüt).
   320px'te taşma yoktur; tablo table-layout:fixed olduğu için
   masaüstünde de kabından taşmaz.

   NOT 1 · Bileşen .prose içine konulabilsin diye metin kuralları
   .ks-dosya ile kapsanır; aksi hâlde .prose h2 / .prose h2+* /
   .prose a kuralları etiket ve dipnotu ezer.
   NOT 2 · Kanun rozeti için AYRI sınıf yoktur; sitenin kendi
   .madde rozeti kullanılır, blok içinde teal ailesine boyanır
   (.kl-sec ile aynı yaklaşım). Teal ikilisi ileride site.css
   :root'a --teal-card / --teal-deep olarak eklenirse blok onu
   otomatik izler.
   NOT 3 · Kırılma noktasında boşluk yoktur: kart modu
   "not all and (min-width:760px)" ile yazıldığı için tablo
   modunun tam tümleyenidir; kesirli genişliklerde de bir mod
   mutlaka eşleşir.
   ============================================================ */

/* ---- klasör: soluk turkuaz karton + sol üst sekme ---- */
.ks-dosya{
  --ks-tr:var(--p-teal);   /* karton / etiket zemini */
  --ks-fg:var(--p-teal-ink);   /* koyu turkuaz metin */
  --ks-br:rgba(0,57,67,.18);          /* kart dış çizgisi */
  --ks-pd:clamp(16px,3.2vw,26px);
  position:relative;
  margin:clamp(30px,4vw,42px) 0 clamp(26px,3.2vw,34px);
  padding:clamp(8px,1.3vw,12px);
  background:var(--ks-tr);
  border-radius:var(--r3);
  filter:drop-shadow(0 5px 16px rgba(0,0,0,.09));
}
.ks-dosya::before{
  content:"";position:absolute;left:clamp(14px,4vw,24px);top:-13px;
  width:min(48%,168px);height:15px;
  background:var(--ks-tr);border-radius:9px 9px 0 0;
}

/* ---- içteki beyaz kâğıt ---- */
.ks-dosya__kagit{
  position:relative;overflow:hidden;
  background:var(--bg);border-radius:var(--r2);
  padding:12px var(--ks-pd) clamp(20px,2.6vw,26px);
}

/* ---- üst kenarda cilt delikleri (dekoratif) ----
   width:100% + negatif yan boşluk: SVG tam olarak kâğıdın
   kenarından kenarına oturur, kutuyu ASLA aşmaz (kâğıt
   yatay kaydırılabilir hâle gelmez). Delikler her genişlikte
   aynı boyda kalır; fazlası SVG'nin kendi görüntü alanında
   kırpılır — preserveAspectRatio="xMinYMid slice". */
.ks-delik{
  display:block;width:100%;height:12px;
  margin-left:calc(var(--ks-pd) * -1);
  margin-right:calc(var(--ks-pd) * -1);
  color:var(--ks-tr);stroke:rgba(0,57,67,.22);stroke-width:.9;
}

/* ---- etiket şeridi: italik serif + katlanmış köşe ----
   h2 olarak işaretlenir; boyut/ağırlık/renk buradan gelir.
   font-style:italic AÇIKÇA yazılır — Newsreader bu sitede
   yalnız italik 400 yüklü, düz kesim eklenirse görünüm
   sessizce bozulmasın. */
.ks-dosya .ks-etiket{
  display:inline-block;position:relative;
  margin:16px 0 0 calc(var(--ks-pd) * -1);
  padding:6px 17px 6px calc(var(--ks-pd) + 2px);
  background:var(--ks-tr);color:var(--ks-fg);
  border-radius:0 var(--r) var(--r) 0;
  font-family:Newsreader,Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(1.06rem,.99rem + .38vw,1.32rem);
  line-height:1.28;letter-spacing:-.008em;
}
.ks-dosya .ks-etiket::after{           /* kâğıdın katlanmış ucu */
  content:"";position:absolute;left:0;bottom:-7px;
  border-top:7px solid rgba(0,57,67,.45);
  border-left:7px solid transparent;
}

/* ---- giriş ve dipnot: sayfanın kendi sesi, nötr gri ---- */
.ks-dosya .ks-giris{margin:14px 0 0;max-width:58ch;font-size:15px;line-height:1.62;color:var(--body-2)}
.ks-dosya .ks-dip{
  margin:16px 0 0;padding-top:13px;border-top:1px solid var(--line-2);
  font-size:13.4px;line-height:1.6;color:var(--body);
}
.ks-dosya .ks-dip a{color:var(--ks-fg);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(0,57,67,.35)}
.ks-dosya .ks-dip a:hover{text-decoration-color:var(--ks-fg)}

/* ---- kanun rozeti: global .madde, blok içinde teal ---- */
.ks-dosya .madde{background:var(--ks-tr);color:var(--ks-fg);font-size:12.4px}

/* ---- tablo: iki modda ortak olan her şey ---- */
.ks-tbl{
  width:100%;margin-top:16px;border-collapse:separate;border-spacing:0;
  color:var(--ks-fg);font-size:15px;line-height:1.56;
}
.ks-tbl th,.ks-tbl td{text-align:left;font-weight:400;overflow-wrap:break-word}
.ks-tbl strong{font-weight:600;color:var(--ks-fg)}
.ks-tbl__ad{display:block;font-size:16.5px;font-weight:600;letter-spacing:-.014em;color:var(--ks-fg)}
.ks-tbl__alt{display:block;margin-top:1px;font-size:12.4px;line-height:1.35;color:rgba(0,57,67,.78)}
.ks-tbl__et{display:block;margin-bottom:4px;font-size:11.5px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:rgba(0,57,67,.78)}
.ks-tbl__ikon{float:left;width:26px;height:26px;padding:5px;margin:-1px 10px 4px 0;
  border-radius:50%;background:var(--ks-tr);color:var(--ks-fg)}

/* ---- KART MODU (tablo modunun tam tümleyeni) ----
   thead/tbody/tr display:contents ile hücreler doğrudan grid
   öğesi olur; order ile sütunlar alt alta kartlara dizilir.
   Satır adları tablo başlığından değil, hücre içindeki
   .ks-tbl__et etiketinden gelir. */
@media not all and (min-width:760px){
  .ks-tbl{display:grid;grid-template-columns:minmax(0,1fr)}
  .ks-tbl thead,.ks-tbl tbody,.ks-tbl tr{display:contents}
  .ks-tbl__kose,.ks-tbl tbody th{display:none}

  .ks-tbl thead th{padding:12px 15px;background:var(--ks-tr);
    border:1px solid var(--ks-br);border-bottom:0;border-radius:var(--r2) var(--r2) 0 0}
  .ks-tbl td{padding:13px 15px;background:var(--bg);
    border-left:1px solid var(--ks-br);border-right:1px solid var(--ks-br)}
  .ks-tbl tbody tr+tr td{border-top:1px solid var(--line-2)}
  .ks-tbl tbody tr:last-child td{border-bottom:1px solid var(--ks-br);
    border-radius:0 0 var(--r2) var(--r2);margin-bottom:14px}
  .ks-tbl tbody tr:last-child td:last-child{margin-bottom:0}

  .ks-tbl thead th:nth-child(2){order:1}
  .ks-tbl tbody tr:nth-child(1) td:nth-child(2){order:2}
  .ks-tbl tbody tr:nth-child(2) td:nth-child(2){order:3}
  .ks-tbl tbody tr:nth-child(3) td:nth-child(2){order:4}
  .ks-tbl tbody tr:nth-child(4) td:nth-child(2){order:5}

  .ks-tbl thead th:nth-child(3){order:11}
  .ks-tbl tbody tr:nth-child(1) td:nth-child(3){order:12}
  .ks-tbl tbody tr:nth-child(2) td:nth-child(3){order:13}
  .ks-tbl tbody tr:nth-child(3) td:nth-child(3){order:14}
  .ks-tbl tbody tr:nth-child(4) td:nth-child(3){order:15}

  .ks-tbl thead th:nth-child(4){order:21}
  .ks-tbl tbody tr:nth-child(1) td:nth-child(4){order:22}
  .ks-tbl tbody tr:nth-child(2) td:nth-child(4){order:23}
  .ks-tbl tbody tr:nth-child(3) td:nth-child(4){order:24}
  .ks-tbl tbody tr:nth-child(4) td:nth-child(4){order:25}
}

/* ---- TABLO MODU (>=760px) ---- */
@media (min-width:760px){
  .ks-tbl{display:table;table-layout:fixed;border-collapse:collapse;
    margin-top:20px;font-size:14.6px;line-height:1.55}
  .ks-tbl__et{display:none}

  .ks-tbl thead th{padding:12px 14px 11px;vertical-align:bottom;
    background:var(--ks-tr);border-bottom:1px solid var(--ks-br)}
  .ks-tbl thead th.ks-tbl__kose{width:18%;padding:12px 14px 11px 0;
    background:none;border-bottom:1px solid var(--line-2);
    font-size:11.5px;font-weight:600;letter-spacing:.11em;
    text-transform:uppercase;color:var(--body)}

  .ks-tbl tbody th{padding:16px 14px 16px 0;vertical-align:top;
    font-size:13.4px;font-weight:600;color:var(--ks-fg)}
  .ks-tbl tbody td{padding:16px 14px;vertical-align:top}
  .ks-tbl tbody tr+tr>*{border-top:1px solid var(--line-2)}
  .ks-tbl tbody th+td,.ks-tbl tbody td+td{border-left:1px solid var(--line-2)}
  .ks-tbl tbody tr:hover>*{background:var(--bg-2)}
}

/* ---- BASKI ----
   Kâğıt alanı A4/Letter'da 760px'in ALTINDA kalır, yani baskıda
   kart modu eşleşir. Bileşenin tüm anlamı yan yana karşılaştırma
   olduğu için tablo modu burada elle geri kurulur; kart modunun
   grid/contents/kenarlık kuralları .ks-dosya kapsamıyla ezilir.
   Satırlar sayfa arasında bölünmez, başlık satırı her sayfada
   tekrar eder. */
@media print{
  .ks-dosya{--ks-pd:14px;filter:none;padding:0;
    background:none;border:1px solid var(--line);break-inside:auto}
  .ks-dosya::before{display:none}
  .ks-dosya__kagit{overflow:visible;padding:0 14px 14px}
  .ks-delik{display:none}
  .ks-dosya .ks-tbl__ikon{display:none}
  .ks-dosya .ks-tbl__et{display:none}

  .ks-dosya .ks-tbl{display:table;table-layout:fixed;border-collapse:collapse;
    width:100%;margin-top:14px;font-size:11pt;line-height:1.45}
  .ks-dosya .ks-tbl thead{display:table-header-group}
  .ks-dosya .ks-tbl tbody{display:table-row-group}
  .ks-dosya .ks-tbl tr{display:table-row;break-inside:avoid;page-break-inside:avoid}
  .ks-dosya .ks-tbl__kose,.ks-dosya .ks-tbl tbody th{display:table-cell}

  .ks-dosya .ks-tbl thead th{padding:8px 10px;vertical-align:bottom;
    background:none;border:0;border-bottom:1px solid #999;border-radius:0}
  .ks-dosya .ks-tbl thead th.ks-tbl__kose{width:18%;padding-left:0;
    font-size:9pt;letter-spacing:.1em;text-transform:uppercase;color:#444}

  .ks-dosya .ks-tbl tbody tr td,.ks-dosya .ks-tbl tbody tr th{
    padding:8px 10px;vertical-align:top;margin:0;background:none;
    border:0;border-top:1px solid #ccc;border-radius:0}
  .ks-dosya .ks-tbl tbody tr th{padding-left:0;font-size:10pt;font-weight:600}
  .ks-dosya .ks-tbl tbody tr th+td,.ks-dosya .ks-tbl tbody tr td+td{
    border-left:1px solid #ccc}
}

/* ============================================================
   KENAR NOTU  (.kn-)  —  paragraf aralarına giren hafif editoryal not
   Kırtasiye dili: solda renkli "cetvel" çizgisi, damga biçiminde
   küçük ikon kutusu, Newsreader italik etiket ve etiketi metinden
   ayıran saç çizgisi. Kutu sayfayı bölmez, satır ritmini korur.
   Tonlar: .kn--not (nötr) · .kn--dikkat (bordo) · .kn--ipucu (yeşil)
           .kn--sure (teal — servis başlığıyla aynı ton, süre notları)
   Yarıçap: --r2 (12px). .card/.note masaüstünde --r3 kullanır; bu kutu
   daha küçük ve solunda 3px cetvel çizgisi taşıdığı için bir kademe
   aşağıda durur ve ≤759px'te ailenin --r2 değeriyle buluşur.
   Kırılma noktası sistemle aynı: 759px.
   Sayfa başına 3-4 kez kullanılmak üzere ölçülendirildi.
   ============================================================ */

/* --- palet tamamlayıcısı: teal ikilisi ve küçük damga yarıçapı ---
   #DEF1F2 / #003943 kodda dört yerde tekrar ediyordu; token'a bağlandı. */
/* mevcut teal varyantları da aynı token'ları kullanır (literal tekrarı biter) */
.svc-hero--teal{--h-bg:var(--p-teal);--h-fg:var(--p-teal-ink)}
.ill-card--teal{--ic-bg:var(--p-teal);--ic-fg:var(--p-teal-ink)}

.kn{--r0:6px;
  /* nötr ton — varyant sınıfları yalnız bu değişkenleri değiştirir */
  --kn-bg:var(--bg-3);
  --kn-rule:var(--body-2);
  --kn-fg:var(--ink);
  --kn-tx:var(--body-2);
  --kn-chip:var(--bg);
  --kn-hair:rgba(34,35,37,.14);
  --kn-link:rgba(34,35,37,.6);
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:11px;row-gap:8px;align-items:start;
  padding:15px 18px 16px;
  background:var(--kn-bg);
  border-left:3px solid var(--kn-rule);
  border-radius:var(--r2);
  page-break-inside:avoid;
  break-inside:avoid;
}
/* .prose>*+* (margin-top:1.05em) ile özgüllüğü eşitti; blok nereye
   taşınırsa taşınsın üst boşluk sabit kalsın diye ayrıldı */
.prose>.kn,.kn{margin-block:clamp(22px,3vw,30px)}

/* ikon damgası — beyaz zemin, saç çizgisi çerçeve */
.kn__ic{
  grid-column:1;grid-row:1;
  width:26px;height:26px;border-radius:var(--r0);
  display:grid;place-items:center;
  background:var(--kn-chip);
  box-shadow:inset 0 0 0 1px var(--kn-hair);
  color:var(--kn-fg);
}
.kn__ic svg{width:15px;height:15px;display:block}

/* etiket — Newsreader bu sitede yalnız italik 400 olarak yüklü */
.kn__lbl{
  grid-column:2;grid-row:1;align-self:center;
  font-family:Newsreader,Georgia,serif;font-weight:400;font-style:italic;
  font-size:1.06rem;line-height:1.25;letter-spacing:-.01em;
  color:var(--kn-fg);
  overflow-wrap:break-word;hyphens:auto;
}

/* not gövdesi — etiketten ince çizgiyle ayrılır */
.kn__tx{
  grid-column:2;grid-row:2;
  padding-top:9px;border-top:1px solid var(--kn-hair);
  font-size:15.2px;line-height:1.62;color:var(--kn-tx);
  overflow-wrap:break-word;
}
.kn__tx+.kn__tx{grid-row:auto;grid-column:2;padding-top:0;border-top:0;margin-top:.55em}
.kn__tx strong{font-weight:600;color:var(--kn-fg)}
.kn__tx em{font-style:italic}
/* bağlantı: kalın kelimeden ayrışsın diye kalıcı ve görünür alt çizgi
   (saç çizgisiyle aynı token değil — o zemine karşı görünmüyordu) */
.kn__tx a{color:var(--kn-fg);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--kn-link)}
.kn__tx a:hover{text-decoration-color:currentColor}
/* madde rozeti kutunun tonuna uyar; nötr zeminde kaybolmasın diye çerçeveli */
.kn__tx .madde{background:var(--kn-chip);color:var(--kn-fg);
  box-shadow:inset 0 0 0 1px var(--kn-hair)}

/* ---- ton varyantları ---- */
.kn--dikkat{
  --kn-bg:var(--rose);--kn-rule:var(--alarm);
  --kn-fg:var(--maroon);--kn-tx:var(--maroon);
  --kn-hair:rgba(77,23,39,.16);
  --kn-link:rgba(77,23,39,.6);
}
.kn--ipucu{
  --kn-bg:var(--green-pale);--kn-rule:var(--green-br);
  --kn-fg:var(--green);--kn-tx:var(--green-2);
  --kn-hair:rgba(0,57,18,.15);
  --kn-link:rgba(0,57,18,.6);
}
.kn--sure{
  --kn-bg:var(--p-teal);--kn-rule:var(--p-teal-ink);
  --kn-fg:var(--p-teal-ink);--kn-tx:var(--p-teal-ink);
  --kn-hair:rgba(0,57,67,.16);
  --kn-link:rgba(0,57,67,.6);
}

/* ---- dar ekran: sistemin 759px kırılma noktası; metin ikon sütununun
       altına da taşar, ölçüler .card/.note ile aynı kademeye iner ---- */
@media (max-width:759px){
  .kn{padding:14px 15px 15px;column-gap:10px;row-gap:7px}
  .kn__ic{width:24px;height:24px}
  .kn__ic svg{width:14px;height:14px}
  .kn__lbl{font-size:1rem}
  .kn__tx{grid-column:1/-1;font-size:15px}
  .kn__tx+.kn__tx{grid-column:1/-1}
}

@media print{
  .kn{background:none;padding-left:14px}
  .kn__ic{display:none}
  .kn__lbl,.kn__tx,.kn__tx+.kn__tx{grid-column:1/-1}
  .kn__tx .madde{box-shadow:none}
}

/* ============================================================
   ADLİYE EŞLEŞTİRME KARTI  ·  önek: .adl-
   Kırtasiye metaforu: soluk pastel DOSYA KLASÖRÜ silueti
   (sol üstte çıkıntılı sekme) + içinde beyaz kart. Kartın üst
   kenarında spiral cilt delikleri, sol üstte italik serif etiket
   şeridi (sol alt köşesinde katlanmış kağıt ucu). Satırlar saç
   çizgilerle ayrılır; her satırın solunda ayrı sütunda soluk
   daire içinde konum işareti bulunur.
   Renk: .adl-folder--teal/--mint/--sky/--sand/--rose varyantları
   svc-hero pastel beşlisinin birebir aynısıdır; varsayılan teal.
   Mobilde tek sütun, 760px üstünde 2 sütun (6 öğe = 2x3, boş
   hücre kalmaz). Saç çizgileri gerçek kenarlıktır, zemin hilesi
   yoktur; bu yüzden baskıda da ayakta kalır. JS yok, tek tema.
   Önek notu: 'ad-' önekli sınıflar reklam engelleyici kozmetik
   filtrelerince sessizce gizlenebildiği için bilinçli olarak
   'adl-' seçilmiştir.
   ============================================================ */

.adl-folder{
  --adl-bg:#DEF1F2;
  --adl-fg:#003943;
  --adl-hair:rgba(0,57,67,.16);
  --adl-soft:rgba(0,57,67,.78);
  position:relative;
  background:var(--adl-bg);
  border-radius:0 var(--r3) var(--r3) var(--r3);
  padding:10px;
}
/* .prose içinde de üst boşluk korunsun — sekme için 18px şart */
.prose .adl-folder,
.adl-folder{margin:clamp(38px,5vw,54px) 0 clamp(28px,4vw,40px)}

/* pastel varyantlar — svc-hero ile aynı değerler */
.adl-folder--teal{--adl-bg:#DEF1F2;--adl-fg:#003943;
  --adl-hair:rgba(0,57,67,.16);--adl-soft:rgba(0,57,67,.78)}
.adl-folder--mint{--adl-bg:#E3F2E8;--adl-fg:#0B4A1F;
  --adl-hair:rgba(11,74,31,.16);--adl-soft:rgba(11,74,31,.78)}
.adl-folder--sky {--adl-bg:#E7EEFB;--adl-fg:#203A6E;
  --adl-hair:rgba(32,58,110,.16);--adl-soft:rgba(32,58,110,.78)}
.adl-folder--sand{--adl-bg:#FFF5E5;--adl-fg:#5D3D0C;
  --adl-hair:rgba(93,61,12,.16);--adl-soft:rgba(93,61,12,.78)}
.adl-folder--rose{--adl-bg:#FBE6E2;--adl-fg:#552019;
  --adl-hair:rgba(85,32,25,.16);--adl-soft:rgba(85,32,25,.78)}

/* klasörün çıkıntılı sekmesi */
.adl-folder::before{
  content:"";position:absolute;left:0;bottom:100%;
  width:132px;max-width:44%;height:18px;
  background:var(--adl-bg);
  border-radius:var(--r) var(--r) 0 0;
}

/* klasörün içindeki beyaz kart */
.adl-folder .adl-sheet{
  background:var(--bg);
  border-radius:var(--r2);
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  overflow:hidden;
}

/* spiral cilt delikleri — tek elemanda, kırpılmadan dağılır.
   Delik rengi bilinçli olarak nötr (--ink %12): beyaz kâğıt
   üstünde gerçek bir zımba deliği gibi okunur ve beş pastel
   varyantın hepsiyle uyumlu kalır. */
.adl-folder .adl-punch{
  display:block;height:12px;margin:11px 16px 0;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='12'%3E%3Crect%20x='6'%20y='2'%20width='10'%20height='8'%20rx='4'%20fill='%23222325'%20fill-opacity='.12'/%3E%3C/svg%3E");
  background-size:22px 12px;
  background-repeat:space no-repeat;
}

/* etiket şeridi + katlanmış kağıt ucu */
.adl-folder .adl-tag{
  position:relative;display:inline-block;
  margin:13px 0 0 18px;padding:5px 14px 6px 12px;
  max-width:calc(100% - 32px);
  background:var(--adl-bg);color:var(--adl-fg);
  border-radius:3px var(--r) var(--r) 3px;
  font-family:Newsreader,Georgia,serif;font-style:italic;font-weight:400;
  font-size:1.14rem;line-height:1.3;letter-spacing:-.01em;
  overflow-wrap:break-word;
}
/* katlanmış uç: aynı ailenin soluk tonu, kopuk koyu kama değil */
.adl-folder .adl-tag::after{
  content:"";position:absolute;left:0;top:100%;
  width:9px;height:8px;background:var(--adl-fg);opacity:.18;
  clip-path:polygon(0 0,100% 0,0 100%);
}

.adl-folder .adl-intro{
  margin:12px 18px 0;max-width:62ch;
  font-size:14.6px;line-height:1.62;color:var(--adl-soft);
  overflow-wrap:break-word;
}
.adl-folder .adl-intro strong,
.adl-folder .adl-note strong{color:var(--adl-fg);font-weight:600}
/* madde rozeti klasörün içinde sade metne döner (svc-hero kalıbı) */
.adl-folder .madde{
  background:none;padding:0;border-radius:0;
  font-size:inherit;font-weight:600;color:var(--adl-fg);white-space:nowrap;
}

/* saç çizgisi ızgara — gerçek kenarlıkla; öğe sayısının tek/çift
   olmasından ve zeminin basılıp basılmamasından bağımsız çalışır */
.adl-folder .adl-grid{
  display:grid;margin-top:16px;
  border-top:1px solid var(--adl-hair);
}

/* satır: solda işaret sütunu, sağda içerik */
.adl-folder .adl-item{
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;
  align-content:start;background:var(--bg);padding:17px 18px 16px;
  border-bottom:1px solid var(--adl-hair);
}
/* iki sütun tam olarak sitenin mobil bloğunun bittiği yerde başlar */
@media (min-width:760px){
  .adl-folder .adl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .adl-folder .adl-item:nth-child(odd){border-right:1px solid var(--adl-hair)}
}
.adl-folder .adl-item>:not(.adl-item__pin){grid-column:2}
.adl-folder .adl-item__pin{
  grid-column:1;grid-row:1;margin-top:1px;
  width:34px;height:34px;border-radius:50%;
  background:var(--adl-bg);color:var(--adl-fg);
  display:grid;place-items:center;
}
.adl-folder .adl-item__pin svg{width:17px;height:17px}

.adl-folder .adl-item__name{
  margin:0;font-family:inherit;font-size:16.4px;font-weight:600;line-height:1.3;
  letter-spacing:-.012em;color:var(--adl-fg);overflow-wrap:break-word;
}
.adl-folder .adl-item__where{
  margin:3px 0 0;font-size:12.9px;line-height:1.45;color:var(--adl-soft);
}
.adl-folder .adl-item__label{
  margin:14px 0 0;font-size:11.4px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--adl-soft);
}

.adl-folder .adl-chips{
  list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0;
}
/* kenarlık şart: zemin basılmasa da çipler birbirinden ayrılır */
.adl-folder .adl-chips li{
  margin:0;padding:3px 9px;border-radius:999px;
  background:var(--adl-bg);border:1px solid var(--adl-hair);color:var(--adl-fg);
  font-size:12.7px;line-height:1.5;
}

.adl-folder .adl-item__foot{
  display:flex;align-items:flex-start;gap:8px;
  margin:14px 0 0;padding-top:11px;border-top:1px solid var(--adl-hair);
  font-size:13.2px;line-height:1.45;color:var(--adl-soft);
}
.adl-folder .adl-item__foot svg{
  width:15px;height:15px;flex:none;margin-top:3px;color:var(--adl-fg);
}

.adl-folder .adl-note{
  margin:0;padding:14px 18px 16px;
  font-size:13px;line-height:1.62;color:var(--adl-soft);
}

@media (max-width:759px){
  .adl-folder{padding:8px;border-radius:0 var(--r2) var(--r2) var(--r2)}
  .adl-folder::before{height:16px;width:112px}
  .adl-folder .adl-punch{margin:10px 13px 0}
  .adl-folder .adl-tag{margin-left:14px;font-size:1.06rem;max-width:calc(100% - 24px)}
  .adl-folder .adl-intro{margin-inline:14px;font-size:14.2px}
  .adl-folder .adl-item{padding:16px 14px;column-gap:11px}
  .adl-folder .adl-item__pin{width:30px;height:30px}
  .adl-folder .adl-item__pin svg{width:15px;height:15px}
  .adl-folder .adl-note{padding:13px 14px 15px}
}

/* baskı: tarayıcı zeminleri basmaz, bu yüzden yapı tamamen
   kenarlıkla kurulur; her adliye kartı sayfa ortasından bölünmez */
@media print{
  .adl-folder{background:none;padding:0;margin:0 0 14px}
  .adl-folder::before,
  .adl-folder .adl-punch,
  .adl-folder .adl-item__pin{display:none}
  .adl-folder .adl-sheet{
    box-shadow:none;border:1px solid var(--body-2);border-radius:0;padding:0 10px;
  }
  .adl-folder .adl-tag{
    background:none;margin:12px 0 0;padding:0;max-width:100%;color:var(--ink);
  }
  .adl-folder .adl-tag::after{display:none}
  .adl-folder .adl-grid{grid-template-columns:1fr;border-top:0;margin-top:10px}
  .adl-folder .adl-item{
    display:block;padding:12px 0;break-inside:avoid;page-break-inside:avoid;
    border-top:1px solid var(--body-2);border-bottom:0;border-right:0;
  }
  .adl-folder .adl-chips li{background:none;border:1px solid var(--body);color:var(--ink)}
  .adl-folder .adl-intro,
  .adl-folder .adl-note,
  .adl-folder .adl-item__name,
  .adl-folder .adl-item__where,
  .adl-folder .adl-item__label,
  .adl-folder .adl-item__foot,
  .adl-folder .adl-item__foot svg,
  .adl-folder .adl-intro strong,
  .adl-folder .adl-note strong,
  .adl-folder .madde{color:var(--ink)}
  .adl-folder .adl-intro{margin:8px 0 0}
  .adl-folder .adl-note{padding:12px 0 14px}
}

/* ============================================================
   KONTROL LİSTESİ  (.kl)  —  "Tutanakta kontrol edin"
   Kırtasiye metaforu: soluk turkuaz DOSYA KLASÖRÜ silueti +
   sol üstte çıkıntılı SEKME + içinde beyaz kart + kartın üst
   kenarında SPİRAL CİLT delikleri + sol üstte ETİKET ŞERİDİ
   (italik serif, sol alt köşesinde katlanmış uç) + saç çizgisiyle
   ayrılmış satırlar, solda ayrı sütunda soluk daire içinde
   DOLDURULMAMIŞ kutu (henüz yapılacak iş anlamında).
   Düz vektör, tek tema, JavaScript yok.
   Palet: teal pastel  #DEF1F2 zemin / #003943 metin.
   Kullanım: .prose içinde, doğrudan çocuk olarak.

   DENETİM DÜZELTMELERİ:
   (1) Baskı bloğu genişletildi — etiket şeridi artık beyaz üstüne
       beyaz düşmüyor; kartın üst bandı, daire ve rozet zeminleri
       baskıya uygun kenarlıkla veriliyor.
   (2) Katlanmış uç --ink (nötr gri) yerine şeridin KENDİ renginden
       türetiliyor (filter:brightness) — böylece .kl--mint varyantında
       da şeritle aynı hüzmede kalıyor ve palet dışına yeni hex girmiyor.
   (3) .kl-ref'in koşulsuz margin-left'i kaldırıldı; boşluk markup'tan.
   (4) Dar ekranda sayaç kendi satırına, SOL hizalı alt-etiket olarak.
   (5) Tik yerine boş kutu — "kontrol edin" fiiliyle tutarlı.
   (6) İşaret tamamen CSS ile çiziliyor: 5 kez kopyalanan satır içi SVG
       kalktı, site sprite'ıyla stroke kalınlığı çakışması ortadan kalktı.
   (7) .kl-ref ölçüleri .madde ile birebir eşitlendi (12.5px / 3px 9px),
       aynı paragrafta yan yana gelirse satır tabanı bozulmuyor.
   (8) .kl--mint site.css token'larını kullanıyor (--mint, --green-2).
   (9) id/aria-labelledby ikilisi bırakıldı; aside doğrudan aria-label
       alıyor — bileşen aynı sayfada iki kez kullanılabilir.
   ============================================================ */

/* --- klasör (dış kabuk) --- */
.kl{
  --kl-bg:var(--p-teal);                 /* klasör / soluk daire / rozet zemini  */
  --kl-fg:var(--p-teal-ink);                 /* koyu turkuaz metin ve etiket zemini  */
  --kl-hair:rgba(0,57,67,.15);     /* saç çizgileri                        */
  --kl-mute:rgba(0,57,67,.78);     /* ikincil metin — beyaz üstünde 6.5:1  */
  --kl-pad:clamp(12px,3.2vw,26px); /* klasör iç boşluğu                    */
  --kl-cpad:clamp(15px,3vw,26px);  /* kartın iç boşluğu                    */
  --kl-col:clamp(44px,11vw,58px);  /* işaret sütununun genişliği           */
  --kl-gap:clamp(13px,2.6vw,20px); /* sütun ile metin arası                */
  --kl-vpad:15px;                  /* satırların dikey nefesi (işaret + metin ortak) */
  --kl-punch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Crect x='8.6' y='3' width='10.8' height='8' rx='4' fill='%23DEF1F2' stroke='%23003943' stroke-opacity='.22'/%3E%3C/svg%3E");
  position:relative;
  margin:clamp(38px,5vw,54px) 0 clamp(30px,4vw,44px);
  padding:var(--kl-pad);
  background:var(--kl-bg);
  border-radius:0 var(--r3) var(--r3) var(--r3);
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.10));
}

/* klasörün sol üst sekmesi */
.kl::before{
  content:"";position:absolute;left:0;top:-15px;
  width:clamp(96px,30%,148px);height:16px;
  background:var(--kl-bg);
  border-radius:var(--r2) var(--r2) 0 0;
}

/* klasörün içinde duran ikinci kağıt — sağ altta payı görünür */
.kl::after{
  content:"";position:absolute;z-index:0;
  right:calc(var(--kl-pad) - 6px);
  bottom:calc(var(--kl-pad) - 6px);
  width:min(58%,300px);height:54px;
  background:rgba(255,255,255,.62);
  border-radius:var(--r);
}

/* --- beyaz kart --- */
.kl .kl-card{
  position:relative;z-index:1;
  background:var(--bg);
  border-radius:var(--r2);
  padding:32px var(--kl-cpad) clamp(16px,2.4vw,22px);
  box-shadow:0 2px 6px rgba(0,57,67,.07);
}

/* kartın üst kenarındaki spiral cilt delikleri */
.kl .kl-card::before{
  content:"";position:absolute;
  left:var(--kl-cpad);right:var(--kl-cpad);top:11px;height:14px;
  background-image:var(--kl-punch);
  background-size:28px 14px;
  background-repeat:space no-repeat;
}

/* --- etiket şeridi --- */
.kl .kl-head{display:flex;align-items:flex-start;flex-wrap:wrap;gap:10px 14px}

.kl .kl-tag{
  position:relative;
  margin:0 0 0 calc(var(--kl-cpad) * -1);
  padding:9px 17px 9px var(--kl-cpad);
  background:var(--kl-fg);color:var(--bg);
  border-radius:0 var(--r) var(--r) 0;
  font-family:Newsreader,Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(1.04rem,.96rem + .5vw,1.26rem);
  line-height:1.28;letter-spacing:.004em;
}
/* şeridin sol alt köşesindeki katlanmış uç —
   rengi şeridin kendi token'ından türetilir; varyantı otomatik izler */
.kl .kl-tag::after{
  content:"";position:absolute;left:0;bottom:-8px;width:13px;height:8px;
  background:var(--kl-fg);filter:brightness(.6);
  -webkit-clip-path:polygon(0 0,100% 0,0 100%);
          clip-path:polygon(0 0,100% 0,0 100%);
}

.kl .kl-no{
  margin-left:auto;padding-top:7px;
  font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--kl-mute);white-space:nowrap;
}

/* --- satırlar --- */
.kl .kl-list{
  list-style:none;margin:18px 0 0;padding:0;
  border-top:1px solid var(--kl-hair);
}
.kl .kl-item{
  display:grid;grid-template-columns:var(--kl-col) 1fr;grid-template-rows:auto auto;
  margin:0;padding:0;
}
.kl .kl-item + .kl-item{margin-top:0;border-top:1px solid var(--kl-hair)}

/* işaret sütunu — dikey saç çizgisi satır boyunca kesintisiz sürer */
.kl .kl-mark{
  grid-row:1 / 3;position:relative;
  display:flex;justify-content:center;align-items:flex-start;
  padding:var(--kl-vpad) 0;
  border-right:1px solid var(--kl-hair);
}
/* soluk daire */
.kl .kl-mark::before{
  content:"";flex:none;width:30px;height:30px;
  background:var(--kl-bg);border-radius:50%;
}
/* dairenin ortasındaki BOŞ kutu — okuyucu kendisi işaretler */
.kl .kl-mark::after{
  content:"";position:absolute;
  left:50%;top:calc(var(--kl-vpad) + 15px);
  width:13px;height:13px;margin:-6.5px 0 0 -6.5px;
  border:1.7px solid var(--kl-fg);border-radius:4px;
}

.kl .kl-t{
  padding:var(--kl-vpad) 0 0 var(--kl-gap);
  font-size:15.6px;font-weight:600;line-height:1.4;
  letter-spacing:-.005em;color:var(--kl-fg);
}
.kl .kl-d{
  padding:5px 0 var(--kl-vpad) var(--kl-gap);
  font-size:14.4px;line-height:1.62;color:var(--kl-mute);
}

/* madde rozeti — .madde'nin teal karşılığı, ölçüleri onunla birebir aynı;
   yatay boşluk markup'taki normal kelime arasından gelir */
.kl .kl-ref{
  display:inline-block;margin:0;
  padding:3px 9px;border-radius:5px;
  background:var(--kl-bg);color:var(--kl-fg);
  font-size:12.5px;font-weight:600;letter-spacing:.02em;white-space:nowrap;
}

.kl .kl-foot{
  margin-top:16px;padding-top:14px;
  border-top:1px solid var(--kl-hair);
  font-size:13.6px;line-height:1.6;color:var(--kl-mute);
}

/* dar ekran: sayaç kendi satırında ve SOL hizalı bir alt-etiket olur */
@media (max-width:400px){
  .kl .kl-head{gap:6px 12px}
  .kl .kl-no{flex-basis:100%;margin-left:0;padding-top:2px;letter-spacing:.1em}
  .kl .kl-t{font-size:15.2px}
  .kl .kl-d{font-size:14px}
}

/* pastel varyant — mint */
.kl--mint{
  --kl-bg:var(--mint);--kl-fg:var(--green-2);
  --kl-hair:rgba(11,74,31,.16);--kl-mute:rgba(11,74,31,.8);
  /* DİKKAT: --kl-punch bir data-URI'dir, var() kabul etmez;
     renkler (E3F2E8 / 0B4A1F) elle senkron tutulur. */
  --kl-punch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Crect x='8.6' y='3' width='10.8' height='8' rx='4' fill='%23E3F2E8' stroke='%230B4A1F' stroke-opacity='.22'/%3E%3C/svg%3E");
}

/* --- baskı: dekor kalkar, içerik ve tüm zeminler görünür kalır --- */
@media print{
  .kl{filter:none;background:none;padding:0;break-inside:avoid;page-break-inside:avoid}
  .kl::before,.kl::after,.kl .kl-card::before{display:none}
  .kl .kl-card{padding:0 0 6px;border:0;box-shadow:none}
  .kl .kl-tag{margin:0;padding:0 0 6px;background:none;color:var(--kl-fg);
    border-bottom:2px solid var(--kl-fg)}
  .kl .kl-tag::after{display:none}
  .kl .kl-no{margin-left:auto;padding-top:0;flex-basis:auto}
  .kl .kl-mark::before{background:none;border:1px solid var(--kl-hair)}
  .kl .kl-ref{background:none;padding:2px 8px;border:1px solid var(--kl-hair)}
  .kl .kl-item{break-inside:avoid;page-break-inside:avoid}
}

/* ══════════════════════════════════════════════════════════════
   MOBİL KATMAN — ölçülen ihlallerin düzeltilmesi
   375px'te gerçek tarayıcı ölçümüyle bulundu (gozalti-avukati.html):
     · 17 ayrı sınıfta 13,5px altı metin (en küçüğü 11,4px)
     · 28 dokunma hedefi 44px altında (.burger 36x18 en kritiği)
     · sayfa 28.694px = 35 ekran
   Referans: docs/MOBIL-REFERANS.md (Complex Law + Fiverr iPhone 14)
   Tamamı media query içinde — MASAÜSTÜ ETKİLENMEZ.
   ══════════════════════════════════════════════════════════════ */

@media (max-width:759px){
  :root{
    --m-min:14px;      /* okunacak metin tabanı */
    --m-etiket:12.5px; /* künye/rozet tabanı — ağırlık+aralıkla desteklenir */
    --m-dokun:44px;    /* dokunma hedefi tabanı */
  }

  /* ── 1. zemin: Complex Law mobilde sıcak kağıt kullanıyor ───── */
  body{background:var(--paper);-webkit-text-size-adjust:100%}
  .section--alt,.section--surface{background:var(--bg)}

  /* ── 2. dokunma hedefleri ────────────────────────────────────── */
  /* .burger 36x18 idi — mobilin en çok kullanılan kontrolü */
  .burger{width:var(--m-dokun);height:var(--m-dokun);padding:0;
    place-content:center;justify-items:center;margin-right:-10px}

  .brand{min-height:var(--m-dokun);align-items:center}

  .faq__item summary,.ag-faq .faq__item summary,.svc-toc summary{
    min-height:var(--m-dokun)}

  .btn,.btn--sm{min-height:var(--m-dokun)}

  /* satır içi metin bağlantıları: min-height satır akışını bozar,
     onun yerine dikey dolgu + negatif kenar boşluğu */
  .prose p a:not(.btn),.prose li a:not(.btn),.note a,.kl-link,
  .svc-hub a,.footer__links a,.ill-card__more{
    padding-block:11px;margin-block:-11px}
  .kl-link,.svc-hub a{min-height:var(--m-dokun);align-items:center}
  /* olcumde kalan alti baglanti: acil serit, ekmek kirintisi,
     kanun karti kaynak satiri, karsilastirma dipnotu */
  .urgent-strip__inner a,.breadcrumb ol a,
  .km-card__kaynak a,.ks-dip a{padding-block:14px;margin-block:-14px;
    display:inline-block;line-height:1.4}

  /* kart basligindaki baglanti: kartin tamamini dokunulur yap
     (::after ile ortu — kartin kendisi zaten tiklanabilir alan olur) */
  .card{position:relative}
  .card__link::after{content:"";position:absolute;inset:0}
  .card h3{min-height:0}

  /* iletisim satirlari ve blog ici baglantilar */
  .contact-item__value,.contact-list a,
  .prose a:not(.btn):not(.ill-card):not(.kl-link){
    padding-block:13px;margin-block:-13px;display:inline-block;line-height:1.45}

  /* dokununca mavi parlama kutusu çıkmasın */
  a,button,summary,label{-webkit-tap-highlight-color:rgba(0,57,18,.10)}

  /* ── 3. yazı tabanı: hiçbir okunacak metin 14px altına inmesin ─ */
  .zc__key,.zc__not,.zc__legend,
  .sy-item__sub,.sy-band__foot,
  .ks-dip,.ks-tbl__alt,
  .adl-item__where,.adl-item__foot,.adl-note,
  .ag-ozet,.ag-foot,
  .yy-foot,
  .km-card__kaynak,.km-card__kaynak a,
  .kl-d,.kl-foot,
  .kn__tx{font-size:var(--m-min);line-height:1.58}

  /* künye/etiket metinleri: 12,5px tabanı + ağırlık + harf aralığı.
     Küçük kalabilirler ama okunurlukları böyle desteklenir. */
  .eyebrow,.svc-meta span,.madde,.kl-ref,
  .km-card .km-card__kanun,.ks-tbl .ks-tbl__et,.adl-folder .adl-item__label,
  .zc__tile small,.sy-item__ref,.kn .kn__lbl,.drawer__label{
    font-size:var(--m-etiket);font-weight:600;letter-spacing:.015em}

  /* .madde satır içinde geçiyor; satır yüksekliğini bozmasın */
  .madde{padding:2px 7px;line-height:1.35}

  /* ── 4. Türkçe uzun kelimeler taşırmasın ─────────────────────── */
  /* "alıkonulduğunuz", "hâkimliğine", "yararlanabileceği" */
  h1,h2,h3,h4,p,li,td,th,summary,dd,dt{overflow-wrap:break-word}

  /* ── 5. boy: 35 ekrandan kısaltma ────────────────────────────── */
  /* içindekiler katlanabilir olsun — sayfa başında 6 satır kurtarır */
  .svc-toc{padding:0}
  .svc-toc > p{margin:0}
  .svc-toc ol{padding:0 18px 16px 32px}
  .svc-toc li{margin-block:2px}
  .svc-toc a{display:inline-flex;align-items:center;min-height:38px}

  /* bölüm aralıklarını sıkılaştır ama nefesi öldürme */
  .section{padding-block:clamp(30px,7vw,44px)}
  .section--tight{padding-block:clamp(22px,5vw,32px)}
  .prose > * + *{margin-top:1.05em}
  .prose h2{margin-top:1.7em}
  .prose h3{margin-top:1.35em}
}

/* çok dar ekran — 375px (standart iPhone) BU BLOĞA GİRMEZ,
   eşik 360'a çekildi ki yaygın telefonlar 12,5px etiket tabanını korusun */
@media (max-width:360px){
  :root{--m-etiket:12px}
  .svc-meta{gap:6px}
  .svc-meta span{padding:4px 9px}
  .madde{padding:2px 6px}
}


/* ============================================================
   MOBİL BOY — sayfa 375px'te 28.116px (35 ekran).
   Complex Law mobilde kartları 2 SÜTUNDA bırakıyor; her şeyi
   tek sütuna indirmek sayfayı gereksiz uzatıyor.
   Ölçülen en uzun bölümler: karşılaştırma 2869 · adliye 1984
   · kısaca 1913 · SSS 1836 · akordeon 1763 · yapın/yapmayın 1648
   ============================================================ */
@media (max-width:759px){

  /* adliye kartları: 4 adliye tek sütunda 1984px yer kaplıyordu */
  /* NOT: adliye kartlari 2 sutunda DAHA UZUN cikti (1984 -> 2261px),
     cunku dar sutunda metin daha cok sariyor. Tek sutun kaliyor,
     yalnizca ic bosluklar sikilastiriliyor. */
  .adl-item{padding:14px 15px}
  .adl-item__where{font-size:13.6px;line-height:1.5}
  .adl-item__foot{font-size:13.6px;line-height:1.5}

  /* ilgili sayfa kartları: 2 sütun (Complex Law deseni) */
  .grid.grid--3,.grid--3{grid-template-columns:1fr 1fr;gap:12px}
  .ill-card{padding:18px 14px 0;border-radius:var(--r2)}
  .ill-card h3{font-size:1.08rem;line-height:1.25;margin-bottom:8px}
  .ill-card p{font-size:13.8px;line-height:1.5}
  .ill-card__more{font-size:13.2px;margin-top:11px}
  .ill-card__ill{margin-top:16px}

  /* "Kısaca" kutuları: iki tane var, 1913px */
  .note{padding:18px 16px}
  .note ul{margin-top:10px}
  .note li + li{margin-top:9px}
  .note li{line-height:1.56}

  /* SSS ve akordeon: kapalıyken bile 1836+1763px */
  .faq__item summary{padding:14px 15px}
  .faq__answer{padding:0 15px 15px}
  .ag-row .faq__item summary{padding:14px 15px}

  /* adımlar */
  .steps{gap:16px}
  .step{padding:16px 15px}
}

/* çok dar telefonlarda tek sütuna dön — eşik 360, çünkü 375px
   (standart iPhone) 2 sütunu rahat taşıyor ve sayfayı kısaltıyor */
@media (max-width:360px){
  .grid--3{grid-template-columns:1fr}
  .ill-card{padding:20px 17px 0}
  .ill-card h3{font-size:1.18rem}
}


/* ============================================================
   1) OKUMA ÇUBUĞU — yapışkan mini içindekiler   (.okc-)
   21st'teki "Dynamic Island TOC" fikrinin bizim dilimizdeki hâli.
   Sayfanın üstündeki .svc-toc kutusu kaydırılıp geçilince,
   başlığın altına ince bir çubuk yapışır: solda ilerleme çizgisi,
   ortada okunan bölümün adı, sağda açılır liste.
   Tek bağımlılık: IntersectionObserver (20 satır saf JS).
   ============================================================ */
.okc{
  position:fixed;left:0;right:0;top:var(--hd,78px);z-index:40;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:saturate(1.6) blur(10px);
  -webkit-backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid var(--line-2);
  transform:translateY(-102%);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
  pointer-events:none}
.okc[data-gorunur="1"]{transform:none;pointer-events:auto}

/* ilerleme çizgisi — alt kenarda ince yeşil şerit */
.okc__ilerleme{position:absolute;left:0;bottom:-1px;height:2px;
  background:var(--green-br);width:var(--oran,0%);transition:width .12s linear}

.okc__in{display:flex;align-items:center;gap:14px;
  padding-block:11px;min-height:46px}
.okc__etiket{font-size:11.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--body);flex:none}
.okc__now{font-size:15px;color:var(--ink);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}

/* açılır liste — <details> ile, JS yok */
.okc__ac{margin-left:auto;flex:none}
.okc__ac > summary{list-style:none;cursor:pointer;display:inline-flex;
  align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  border:1px solid var(--line);background:var(--bg);
  font-size:13.5px;font-weight:500;color:var(--body-2)}
.okc__ac > summary::-webkit-details-marker{display:none}
.okc__ac > summary:hover{border-color:var(--ink);color:var(--ink)}
.okc__ac > summary svg{width:12px;height:12px;transition:transform .22s}
.okc__ac[open] > summary svg{transform:rotate(180deg)}
.okc__menu{position:absolute;right:var(--gut);top:calc(100% + 8px);
  min-width:290px;max-width:min(420px,calc(100vw - 2*var(--gut)));
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r2);
  box-shadow:var(--sh-2);padding:9px;display:grid;gap:1px}
.okc__menu a{display:block;padding:9px 12px;border-radius:var(--r);
  font-size:14.5px;line-height:1.4;color:var(--body-2);text-decoration:none}
.okc__menu a:hover{background:var(--bg-3);color:var(--ink)}
.okc__menu a[aria-current="true"]{background:var(--green-pale);color:var(--green);font-weight:600}

@media (max-width:759px){
  .okc__etiket{display:none}
  .okc__in{gap:10px;padding-block:9px}
  .okc__now{font-size:14px}
  .okc__ac > summary{padding:5px 10px;font-size:12.5px}
}
/* yazdırırken ve hareket azaltmada kapalı */
@media print{.okc{display:none}}
@media (prefers-reduced-motion:reduce){.okc{transition:none}}

/* sayfa içi bağlantılara atlarken başlık altında kalmasın */
:where(h2[id],h3[id]){scroll-margin-top:calc(var(--hd,78px) + 60px)}


/* ══════════════════════════════════════════════════════════════
   BLOG MAKALE DÜZENİ  (.yz-)
   Legora'nın makale iskeleti + bizim paletimiz.
   Legora'dan ölçülenler (legora.com/blog/consumption-based-pricing):
     zemin #FAFAF9 · h1 48px/48px ağırlık 400 · üstte küçük kategori
     etiketi · başlıktan hemen sonra tam genişlik görsel
     · gövde x=436'dan başlıyor, sol üçte bir boş
   Bizim farkımız: o boş sol sütunu BOŞ BIRAKMIYORUZ — yapışkan
   içindekiler + madde atıfları oraya giriyor. Bir hukuk makalesinde
   okuyucunun en çok ihtiyaç duyduğu iki şey orası.
   Servis sayfalarının pastel başlık bandı burada YOK; blog kendi
   sakin tipografik açılışını kullanıyor.
   ══════════════════════════════════════════════════════════════ */

.yz{background:var(--paper)}

/* ---------- açılış ---------- */
.yz-bas{padding-block:clamp(26px,4vw,54px) clamp(20px,3vw,32px)}
.yz-bas .eyebrow{margin-bottom:14px}
.yz-bas h1{
  font-size:clamp(2.15rem,1.35rem + 3.4vw,3.55rem);
  font-weight:300;letter-spacing:-.038em;line-height:1.06;
  max-width:19ch;text-wrap:balance;color:var(--ink)}
.yz-bas .lede{margin-top:20px;max-width:56ch;font-size:clamp(1.05rem,1rem + .35vw,1.2rem);
  line-height:1.6;color:var(--body)}

/* künye satırı: okuma süresi · güncelleme · maddeler */
.yz-kunye{display:flex;flex-wrap:wrap;align-items:center;gap:9px 16px;margin-top:22px;
  padding-top:18px;border-top:1px solid var(--line-2);font-size:13.5px;color:var(--body)}
.yz-kunye b{font-weight:600;color:var(--body-2)}
.yz-kunye .madde{font-size:12.5px}
.yz-kunye__ayrac{width:3px;height:3px;border-radius:50%;background:var(--line);flex:none}

/* ---------- tam genişlik görsel ---------- */
.yz-gorsel{background:var(--p-teal);border-radius:var(--r3);overflow:hidden;
  display:grid;place-items:center;padding:clamp(18px,3vw,40px);margin-bottom:clamp(26px,4vw,48px)}
.yz-gorsel img{width:100%;max-width:520px;height:auto;display:block}
.yz-gorsel--mint{background:var(--p-mint)} .yz-gorsel--sky{background:var(--p-sky)}
.yz-gorsel--sand{background:var(--p-sand)} .yz-gorsel--rose{background:var(--p-rose)}

/* ---------- iki sütunlu gövde ---------- */
.yz-govde{display:grid;gap:clamp(28px,4vw,56px);padding-bottom:clamp(30px,5vw,64px)}
@media (min-width:1040px){
  .yz-govde{grid-template-columns:236px minmax(0,1fr);gap:clamp(40px,5vw,84px)}
}

/* sol sütun — Legora'da boş, bizde çalışıyor */
.yz-yan{align-self:start}
@media (min-width:1040px){
  .yz-yan{position:sticky;top:calc(var(--hd,78px) + 26px);max-height:calc(100vh - var(--hd,78px) - 52px);
    overflow-y:auto;overscroll-behavior:contain}
  .yz-yan::-webkit-scrollbar{width:0}
}
.yz-yan__b + .yz-yan__b{margin-top:26px;padding-top:22px;border-top:1px solid var(--line-2)}
.yz-yan__e{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--body);margin-bottom:12px}
.yz-yan ol{list-style:none;margin:0;padding:0;counter-reset:y}
.yz-yan li{counter-increment:y;margin-bottom:3px}
.yz-yan li a{display:flex;gap:9px;padding:7px 9px;border-radius:var(--r);
  font-size:14px;line-height:1.42;color:var(--body);text-decoration:none;
  border-left:2px solid transparent;transition:background .16s,color .16s,border-color .16s}
.yz-yan li a::before{content:counter(y);flex:none;font-size:11.5px;font-weight:600;
  color:var(--line);padding-top:2px;min-width:12px}
.yz-yan li a:hover{background:var(--bg);color:var(--ink)}
.yz-yan li a[aria-current="true"]{background:var(--green-pale);color:var(--green);
  border-left-color:var(--green-2)}
.yz-yan li a[aria-current="true"]::before{color:var(--green-2)}

/* maddeler kutusu */
.yz-yan .madde{display:inline-block;margin:0 5px 5px 0}

/* küçük yan CTA */
.yz-yan__cta{display:block;padding:14px;border-radius:var(--r2);background:var(--p-teal);
  color:var(--p-teal-ink);text-decoration:none}
.yz-yan__cta b{display:block;font-weight:600;font-size:14.5px;margin-bottom:4px}
.yz-yan__cta span{font-size:13.2px;line-height:1.5;opacity:.85}

/* sağ sütun: metin */
.yz-metin{min-width:0;max-width:44rem}
.yz-metin > h2{margin-top:1.9em;font-size:clamp(1.5rem,1.1rem + 1.5vw,2rem);
  font-weight:400;letter-spacing:-.028em;line-height:1.2}
.yz-metin > h2:first-child{margin-top:0}

/* ---------- mobil ---------- */
@media (max-width:1039px){
  .yz-yan{order:-1;background:var(--bg);border:1px solid var(--line-2);
    border-radius:var(--r2);padding:18px 16px}
  .yz-yan__cta{display:none}   /* mobilde alt çubuk zaten var */
}
@media (max-width:759px){
  .yz-bas h1{letter-spacing:-.028em;line-height:1.12;max-width:none}
  .yz-bas .lede{max-width:none}
  .yz-kunye{font-size:13px;gap:8px 12px}
  .yz-gorsel{border-radius:var(--r2);padding:16px}
  .yz-gorsel img{max-width:280px}
  .yz-yan li a{min-height:44px;align-items:center}
}


/* Dosya nerede? — yedi aşama; 760px altında dikey liste seçildi. */
.dn-box{min-width:0;margin-block:32px;padding:24px;background:var(--paper);color:var(--body-2);border:1px solid var(--line);border-radius:var(--r3);font:400 16px/1.6 Figtree,sans-serif;overflow-wrap:anywhere}
.dn-box .dn-kicker{margin:0 0 6px;color:var(--green);font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.dn-box .dn-title{margin:0 0 22px;color:var(--green);font:italic 400 28px/1.25 Newsreader,Georgia,serif}
.dn-box .dn-stages{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0}
.dn-box .dn-stage{position:relative;min-width:0;margin:0;text-align:center}
.dn-stage:not(:last-child)::before{content:"";position:absolute;left:50%;top:22px;width:100%;border-top:1px dashed var(--line);pointer-events:none}
.dn-stage--done:not(:last-child)::before{border-top-style:solid;border-color:var(--body)}
.dn-box .dn-link{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;min-height:124px;min-width:44px;padding:0 5px 10px;color:var(--body);text-decoration:none;line-height:1.35;font-size:14px}
.dn-number{display:grid;place-items:center;flex:none;width:44px;height:44px;border:1px dashed var(--body);background:var(--paper);border-radius:50%;font-size:16px;font-weight:600}
.dn-stage--done .dn-number{border-style:solid;background:var(--bg-3)}
.dn-link[aria-current="step"]{color:var(--green);font-weight:600}
.dn-link[aria-current="step"] .dn-number{background:var(--green);border-style:solid;border-color:var(--green);color:var(--bg)}
.dn-current{display:inline-block;max-width:100%;font-size:12.5px;line-height:1.4;font-weight:600;letter-spacing:.025em;padding:4px 6px;border-radius:var(--r);background:var(--green-pale);color:var(--green)}
.dn-link:hover .dn-number,.dn-link:focus-visible .dn-number{outline:2px solid var(--green);outline-offset:3px}
.dn-link:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:var(--r)}
/* Balon normal akışta satırı büyütür; uzun tanımlar diğer metni kapatmaz.
   İçerik en fazla iki kısa cümle olmalıdır. Kimlik eşleşmelerini koruyun. */
.dn-box .dn-tip{display:none;position:relative;z-index:1;left:50%;transform:translateX(-50%);width:200px;max-width:calc(100vw - 48px);margin:8px 0 12px;padding:10px 12px;background:var(--p-mint);color:var(--p-mint-ink);border:1px dashed var(--p-mint-ink);border-radius:var(--r);font-size:14px;line-height:1.45;text-align:left}
.dn-stage:first-child .dn-tip{left:0;transform:none}
.dn-stage:last-child .dn-tip{left:100%;transform:translateX(-100%)}
.dn-stage:hover .dn-tip,.dn-stage:focus-within .dn-tip{display:block}
@supports selector(:has(*)){
  .dn-stages:has(.dn-link:focus-visible) .dn-stage:not(:focus-within) .dn-tip{display:none}
}
.dn-box .dn-context{margin:12px 0 0;padding:14px 0 0;border-top:1px dashed var(--line);font-size:14px;color:var(--body-2)}
.dn-context strong{color:var(--green);font-weight:600}
@media(max-width:759px){
  .dn-box{padding:20px 16px;font-size:14px}
  .dn-box .dn-stages{display:block;padding:0}
  .dn-box .dn-stage{text-align:left;padding:0 0 16px}
  .dn-stage:not(:last-child)::before{left:22px;top:44px;height:calc(100% - 44px);width:0;border-top:0;border-left:1px dashed var(--line)}
  .dn-stage--done:not(:last-child)::before{border-left-style:solid;border-color:var(--body)}
  .dn-box .dn-link{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;min-height:44px;padding:0;font-size:15px}
  /* Sitenin yüksek özgüllüklü .prose mobil bağlantı kuralını yalnız bu şeritte dengeler. */
  .prose .dn-box .dn-stages .dn-stage>a.dn-link{display:grid;padding:0;margin-block:0;line-height:1.35}
  .dn-current{grid-column:2;justify-self:start;margin-top:-4px}
  .dn-box .dn-tip{position:static;transform:none;display:none;visibility:visible;width:auto;max-width:none;margin:10px 0 0 58px;font-size:14px}
  .dn-stage:last-child .dn-tip{transform:none}
  .dn-stage:hover .dn-tip,.dn-stage:focus-within .dn-tip{display:block}
}

/* Terim sözlüğü — satır içinde yerel popover, bölüm sonunda details.
   Popover auto, Esc/dışarı tıklama/kapat düğmesi ile yerel olarak kapanır.
   Details paragraf içine geçerli biçimde yerleşmez ve Esc ile kapanmaz.
   Kaynak: https://html.spec.whatwg.org/multipage/popover.html */
.tz-inline{font:inherit;color:inherit}
.tz-trigger{display:none;min-width:44px;padding:11px 3px;margin-block:-11px;border:0;background:transparent;color:var(--green);font:inherit;text-decoration:underline dotted;text-underline-offset:4px;cursor:pointer;vertical-align:baseline}
.tz-trigger:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:3px}
.tz-trigger:hover{color:var(--green-2);text-decoration-style:solid}
.tz-popover{display:none}
.tz-fallback{color:var(--body-2)}
.tz-fallback strong{font-weight:600;color:var(--green)}
@supports selector(:popover-open){
  .tz-trigger{display:inline}
  .tz-fallback{display:none}
  .tz-popover:popover-open{display:block;position:fixed;inset:0;width:min(26rem, calc(100% - 32px));height:fit-content;max-height:calc(100dvh - 32px);margin:auto;padding:18px 20px;overflow-y:auto;overflow-wrap:anywhere;background:var(--paper);color:var(--body-2);border:1px solid var(--line);border-radius:var(--r2);box-shadow:var(--sh);font:400 16px/1.6 Figtree,sans-serif}
  .tz-popover::backdrop{background:transparent}
}
.tz-pophead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.tz-pophead strong{font-weight:600;color:var(--green)}
.tz-close{display:inline-flex;align-items:center;justify-content:center;min-width:64px;min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);font:600 14px/1.4 Figtree,sans-serif;background:var(--bg);color:var(--green);cursor:pointer}
.tz-close:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.tz-definition{display:block}
.tz-glossary{min-width:0;margin-block:28px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r2);color:var(--body-2);font:400 16px/1.6 Figtree,sans-serif;overflow-wrap:anywhere}
.tz-summary{min-height:52px;padding:14px 18px;cursor:pointer;color:var(--body-2);font-size:16px;font-weight:600}
.tz-summary::marker{color:var(--green)}
.tz-summary:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:var(--r)}
.tz-count{font-size:12.5px;font-weight:600;letter-spacing:.035em;white-space:nowrap}
.tz-glossary .tz-list{margin:0;padding:0 18px 18px}
.tz-list>div{padding:14px 0;border-top:1px dashed var(--line)}
.tz-list dt{margin:0 0 4px;color:var(--green);font-weight:600}
.tz-list dd{margin:0;font-size:15px}
@media(max-width:759px){
  .tz-popover:popover-open{inset:auto 16px 16px;width:calc(100% - 32px);max-height:calc(100dvh - 32px);margin:0;padding:16px;font-size:14px}
  .tz-glossary{font-size:14px}.tz-summary{font-size:14px;padding:14px}.tz-glossary .tz-list{padding:0 14px 14px}.tz-list dd{font-size:14px}
}

/* tz: etiket ile sayac bitisikti */
.tz-summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tz-count{margin-left:auto;flex:none}
@media (max-width:759px){
  .tz-summary{min-height:44px}
  .tz-count{margin-left:0}
}


/* ══════════════════════════════════════════════════════════════
   MARKA KİLİDİ — İlk Saat + İSTANBUL CEZA AVUKATLARI
   İşaret satır içi SVG; kadran currentColor, ilk saat dilimi
   --green-br. Böylece koyu zeminde tek sınıfla ters çalışır.
   ══════════════════════════════════════════════════════════════ */
.brand{display:inline-flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none}
.brand__ikon{flex:none;display:block;color:var(--green)}
.brand__ad{display:flex;flex-direction:column;line-height:1;min-width:0}
.brand__ad > span:first-child{font-size:17px;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;color:var(--ink)}
.brand__ad .brand__sub{display:block;margin-top:4px;font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--body)}
.brand:hover .brand__ikon{color:var(--green-2)}

/* altbilgide tek satır ve ters renk */
.site-footer .brand{color:var(--bg)}
.site-footer .brand__ikon{color:var(--bg)}
.site-footer .brand__ad > span:first-child{font-size:15.5px;color:var(--bg)}

@media (max-width:759px){
  .brand{gap:9px}
  .brand__ad > span:first-child{font-size:15.5px}
  .brand__ad .brand__sub{font-size:9.5px;letter-spacing:.14em;margin-top:3px}
}
@media (max-width:360px){
  .brand__ad > span:first-child{font-size:14px}
  .brand__ad .brand__sub{display:none}   /* çok dar ekranda alt satır düşer */
}


/* ═══════════════════════════════════════════════════════════════════
   KÖPRÜ KATMANI — İngilizce sitenin gövde sınıflarını bu tasarıma bağlar.

   pages.py'de elli iki sayfanın gövdesi kendi sözlüğümüzle saklı:
     .sec .sh .lbl .prose .callout .faq .proc-table  (+ .tr .a .cite)
   Elli iki sayfanın saklı HTML'ini yeniden yazmak yerine bu sınıflar
   burada TR tasarımının değerlerine bağlandı. İçerik tek yerde kalıyor,
   görünüm tek yerden geliyor. Yeni sınıf uydurulmadı; hepsi zaten var
   olan --token'lara ve ölçülere oturuyor.
   ═══════════════════════════════════════════════════════════════════ */

/* bölüm ve başlık */
.sec{padding-block:clamp(30px,3.6vw,52px);border-top:1px solid var(--line-2)}
.sec:first-of-type{border-top:0}
.sec>.sh{margin-bottom:18px}
.sh .lbl{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--green);margin-bottom:12px}
.sh .lbl::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green-br);flex:none}
.sh h2{font-size:clamp(1.5rem,1.1rem + 1.5vw,2.2rem);font-weight:400;letter-spacing:-.03em;
  line-height:1.2;color:var(--ink);margin:0}

/* gövde metni — .prose zaten tasarımın kendi sınıfı, yalnız iç öğeler */
.prose h3{font-size:1.18rem;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.prose ul,.prose ol{padding-left:1.25em}
.prose li+li{margin-top:.5em}
.prose b,.prose strong{font-weight:600;color:var(--ink)}
.prose .tr{font-style:italic;color:var(--body-2)}
.prose .cite{font-size:14px;color:var(--body)}

/* vurgu kutusu → tasarımın .note dili */
.callout{background:var(--green-pale);border-radius:var(--r3);padding:20px 22px;
  margin-block:26px;font-size:16px;line-height:1.62;color:var(--body-2)}
.callout b,.callout strong{display:block;margin-bottom:6px;font-weight:600;color:var(--green)}

/* sıkça sorulanlar */
.faq{margin-top:8px;max-width:78ch}
.faq details{border:1px solid var(--line-2);border-radius:var(--r2);margin-bottom:10px;
  background:var(--bg);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:16px 46px 16px 18px;position:relative;
  font-size:16px;font-weight:600;color:var(--ink);min-height:44px;display:flex;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);
  font-size:20px;font-weight:400;color:var(--body)}
.faq details[open] summary::after{content:"‘2"}
.faq details[open] summary{border-bottom:1px solid var(--line-2)}
.faq .prose,.faq>details>div{padding:14px 18px 18px;font-size:15.5px;line-height:1.68;color:var(--body-2)}

/* usul tablosu → tasarımın .ks- karşılaştırma tablosu dili */
.proc-table{width:100%;margin-block:26px;border:1px solid var(--line-2);border-radius:var(--r2);
  overflow:hidden auto;display:block;max-width:100%}
.proc-table table{width:100%;border-collapse:collapse;min-width:560px}
.proc-table th,.proc-table td{padding:13px 14px;text-align:left;vertical-align:top;
  font-size:14.5px;line-height:1.55;border-bottom:1px solid var(--line-2)}
.proc-table thead th{background:var(--bg-2);font-weight:600;color:var(--ink);font-size:13.5px;
  letter-spacing:.02em}
.proc-table tbody tr:last-child th,.proc-table tbody tr:last-child td{border-bottom:0}
.proc-table tbody th{font-weight:600;color:var(--ink);white-space:nowrap}

/* kaynaklar ve ilgili sayfalar */
.sources{margin-block:26px;padding:22px;background:var(--bg-2);border-radius:var(--r2);font-size:14.5px}
.sources li{margin-bottom:10px;line-height:1.6}
.related{display:grid;gap:12px;margin-top:6px}
@media (min-width:760px){.related{grid-template-columns:repeat(3,1fr)}}
.related a{display:block;padding:18px;border:1px solid var(--line-2);border-radius:var(--r2);
  background:var(--bg);transition:border-color .16s,box-shadow .16s}
.related a:hover{border-color:var(--line);box-shadow:var(--sh)}
.related .lbl{display:block;font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--green);margin-bottom:8px}
.related h3{font-size:16px;font-weight:600;line-height:1.35;color:var(--ink);margin:0}

/* araçlar (gözaltı saati, konum bulucu, polis kartı) sayfa dilinde dursun */
.tool{border:1px solid var(--line-2);border-radius:var(--r3);background:var(--bg);
  margin-block:26px;overflow:hidden}
.tool-h{padding:14px 18px;border-bottom:1px solid var(--line-2);background:var(--bg-2);
  font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--body)}
.tool-b{padding:18px}
.plate{margin-block:26px;border-radius:var(--r3);overflow:hidden;background:var(--ink)}
.plate video{width:100%;display:block}
.plate figcaption{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:12px 16px;font-size:13px;color:rgba(255,255,255,.72)}

@media (max-width:759px){
  .sec{padding-block:28px}
  .sh h2{font-size:1.44rem}
  .callout{padding:16px;font-size:15px;margin-block:20px}
  .proc-table th,.proc-table td{padding:11px 12px;font-size:14px}
  .faq summary{font-size:15.5px;padding:14px 42px 14px 15px}
}

/* ===================================================================
   ARAC BILESENLERI — icl.css'ten sec bazli tasindi.

   partials.py'deki araclar (ways/form/notice/form_a/custody clock/
   wa builder/sources) elli iki sayfada kullaniliyor ve yeni tasarima
   gecerken CSS'siz kalmisti. Asagidaki kurallar yalnizca o siniflara
   deginenlerdir; eski token adlari yeni paletin degerlerine baglandi.
   =================================================================== */
:root{
  --bone:var(--bg-2); --cream:#F3F1EC; --paper:#FDF9F6;
  --band:#233A31; --dark:var(--green); --slate:var(--body-2);
  --muted:var(--body); --faint:#8A8D92;
  --line-strong:var(--line); --red:var(--maroon); --red-soft:#F7E4E4;
  --r-s:var(--r); --r-c:var(--r2); --r-p:var(--r3);
  --gut:clamp(1.1rem, 4vw, 3.5rem); --hdr:78px;
  --wrap:1400px; --wrap-sheet:1080px;
}

.btn-red{background:var(--red);color:#fff}

.btn-red:hover{background:var(--ink);color:#fff}

.btn-dark{background:var(--ink);color:#fff}

.btn-dark:hover{background:var(--red)}

.btn-line{border:1px solid var(--line-strong);color:var(--ink);background:transparent}

.btn-line:hover{border-color:var(--ink);background:var(--cream)}

.btn-block{width:100%}



.notice{border-left:4px solid var(--red);background:var(--red-soft);padding:24px 26px;margin:34px 0}

.notice .lbl{color:var(--red);display:block;margin-bottom:13px}

.notice h2,.notice h3{font-family:"Fraunces",serif;font-size:23px;font-weight:400;margin-bottom:14px}

.nl{list-style:none;counter-reset:n}

.nl li{counter-increment:n;display:grid;grid-template-columns:32px 1fr;gap:12px;padding:13px 0;border-top:1px solid var(--line)}

.nl li::before{content:counter(n,decimal-leading-zero);font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--red);padding-top:6px}

.nl b{grid-column:2;font-weight:600;font-size:19px;display:block;margin-bottom:2px}

.nl > li > span{grid-column:2;font-size:16.5px;color:var(--muted);line-height:1.55;display:block}

.nl .say{grid-column:2;margin-top:9px;background:var(--paper);border:1px solid var(--line);padding:9px 12px}

.nl .say i{display:block;font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--red);font-style:normal;margin-bottom:3px}

.nl .say em{font-style:normal;font-size:17px;font-weight:600;font-family:"Fraunces",serif}

.moves .say{background:var(--red-soft);border-left:2px solid var(--red);padding:11px 14px}

.moves .say i{display:block;font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--red);font-style:normal;margin-bottom:5px}

.moves .say b{font-family:"Fraunces",serif;font-size:16.5px;font-weight:400;line-height:1.4}

.card .en{font-family:"Plus Jakarta Sans",sans-serif;font-size:15px;color:var(--muted);line-height:1.6;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:16px}


.card.compact .body{display:grid;grid-template-columns:1fr 260px;gap:26px;align-items:center;padding:24px}

.card.compact .cite{margin-bottom:0}
@media(max-width:820px){.card.compact .body{grid-template-columns:1fr;gap:18px}}

.tt{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);white-space:nowrap}

.tn{font-weight:600;font-size:18px}

.tn i{font-style:italic;font-weight:400;color:var(--muted);display:block;font-size:15px;margin-top:1px}

.tdc{color:var(--muted);font-size:16.5px;line-height:1.52}



.three{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
@media(max-width:820px){.three{grid-template-columns:1fr;gap:22px}}

.three .lbl{color:var(--red);display:block;margin-bottom:9px}

.three h3{font-family:"Fraunces",serif;font-size:21px;font-weight:400;margin-bottom:6px}

.three p{color:var(--muted);font-size:16px;line-height:1.55}

.cg{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}

body.t-sheet .cg{grid-template-columns:1fr 340px;gap:40px}
@media(max-width:960px){.cg,body.t-sheet .cg{grid-template-columns:1fr;gap:30px}}

.cg h2{font-family:"Fraunces",serif;font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:300;letter-spacing:-.022em;line-height:1.13;margin-bottom:16px;max-width:18ch}

.cg > div > p{color:var(--muted);max-width:50ch;margin-bottom:24px}

.ways{display:grid;gap:9px;margin-bottom:24px}

.way{display:flex;align-items:center;gap:13px;border:1px solid var(--line);padding:13px 15px;text-decoration:none;transition:.2s;min-height:64px;background:var(--bone)}

.way:hover{border-color:var(--red);background:var(--red-soft)}

.way .ic{width:33px;height:33px;flex:none;display:grid;place-items:center;background:var(--red);color:#fff;border-radius:50%}

.way .ic svg{width:16px;height:16px;fill:currentColor}

.way b{display:block;font-family:"Plus Jakarta Sans",sans-serif;font-size:15.5px;font-weight:600}

.way span{display:block;font-family:"Plus Jakarta Sans",sans-serif;font-size:12.5px;color:var(--muted)}

form.callback{border:1px solid var(--line-strong);padding:22px;background:var(--bone)}

form.callback .lbl{color:var(--faint);display:block;margin-bottom:12px}

.fld{margin-bottom:13px}

.fld label{display:block;font-family:"Plus Jakarta Sans",sans-serif;font-size:12.5px;font-weight:600;margin-bottom:5px}

.fld input,.fld textarea{width:100%;border:1px solid var(--line);background:var(--paper);padding:12px 13px;font:inherit;font-size:16px;min-height:48px}

.fld input:focus,.fld textarea:focus{border-color:var(--red);outline:none}

.fld textarea{min-height:88px;resize:vertical}

form.callback .note{font-family:"Plus Jakarta Sans",sans-serif;font-size:12px;color:var(--faint);margin-top:11px;line-height:1.55}



body.t-sheet .three h3{font-family:"Fraunces",serif;font-size:21px;font-weight:400;margin-bottom:6px}

body.t-sheet .sec .three{margin-top:4px}



.sources .srcs{list-style:none;margin:0 0 16px}

.sources .srcs li{padding:11px 0;border-bottom:1px solid var(--line);font-size:16.5px;line-height:1.55;color:var(--muted)}

.sources .srcs b{display:block;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.06em;color:var(--red);margin-bottom:4px;font-weight:500}

.sources .checked{font-size:15px;color:var(--faint);font-style:italic;max-width:70ch}

.tool-h .t2{color:#8E99A5}

.cc-in{display:grid;grid-template-columns:auto 1fr;gap:14px 18px;align-items:center;margin-bottom:20px}
@media(max-width:700px){.cc-in{grid-template-columns:1fr}}

.cc-in label{font-family:"Plus Jakarta Sans",sans-serif;font-size:12.5px;font-weight:600}

.cc-in input{border:1px solid var(--line);background:var(--bone);padding:11px 12px;font:inherit;font-size:16px;min-height:48px;font-family:"JetBrains Mono",monospace}

.cc-in input:focus{border-color:var(--red);outline:none}

.cc-modes{display:flex;gap:8px;flex-wrap:wrap;grid-column:1/-1}

.cc-modes button{border:1px solid var(--line-strong);background:var(--bone);font-family:"Plus Jakarta Sans",sans-serif;font-size:12.5px;font-weight:600;padding:0 15px;min-height:44px;cursor:pointer}

.cc-modes button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
/* gozalti saati ciktisi (araclar.js DOM ile kurar) */
.cc-elapsed{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:6px}
.cc-elapsed .lbl{color:var(--faint)}
.cc-elapsed b{font-family:"Fraunces",serif;font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:400;color:var(--red)}
.cc-rows{list-style:none;margin:0;padding:0}
.cc-rows li{display:grid;grid-template-columns:150px 150px 1fr;gap:6px 18px;padding:13px 0;border-bottom:1px solid var(--line);align-items:baseline}
.cc-rows li.past{opacity:.42}
.cc-rows li.hard .cc-k{color:var(--red)}
.cc-k{font-family:"Plus Jakarta Sans",sans-serif;font-size:14px;font-weight:600}
.cc-t{font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--slate)}
.cc-left{font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--red);text-align:right}
.cc-d{grid-column:1/-1;font-size:15px;color:var(--muted);line-height:1.5}
@media(max-width:760px){.cc-rows li{grid-template-columns:1fr auto}.cc-t{grid-column:1}.cc-left{grid-column:2;grid-row:1}}
.cc-empty{color:var(--faint);font-style:italic}

.tool-note{border-top:1px solid var(--line);padding:14px 20px;font-size:14px;color:var(--muted);line-height:1.55;background:var(--bone)}

.tool-note b{color:var(--ink)}



.wa-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:860px){.wa-grid{grid-template-columns:1fr;gap:20px}}

.wa-prev{background:#0E1116;color:#DDE3E9;padding:18px;font-family:"JetBrains Mono",monospace;font-size:12.5px;line-height:1.7;white-space:pre-wrap;min-height:180px;border-left:3px solid #25D366}

.wa-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}

/* TR kaynakta gövde sınıfı ve alt bilgi marka bloğu biçimlenmemişti;
   actionbar sabit olduğu için gövdeye alt boşluk şart. */
body.has-actionbar{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
@media (min-width:900px){ body.has-actionbar{padding-bottom:0} }
.footer__brand{display:flex;flex-direction:column;gap:12px}
.footer__brand p{font-size:14px;line-height:1.6;color:var(--body);max-width:38ch}

/* köprü katmanı .tool-h ve figcaption'i düz kutuya çevirmişti; ikisi de
   iki uçlu satır (solda ad, sağda not) — orijinal düzeni geri veriyoruz. */
.tool-h{display:flex;justify-content:space-between;align-items:center;gap:14px;
  flex-wrap:wrap;padding:13px 18px;background:var(--ink);color:#fff;
  border-bottom:0;margin-bottom:0}
.tool-h span{font-size:11.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase}
.tool-h span+span{color:rgba(255,255,255,.62)}
.plate figcaption{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---- dergi dizini (jr-*, mg-*) — icl.css'ten tasindi ---- */



.jr{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}

.jr-group{background:var(--paper);padding:20px 20px 16px;display:flex;flex-direction:column;gap:12px}

.jr-head{text-decoration:none;display:block;border-bottom:1px solid var(--line);padding-bottom:11px}

.jr-head h3{font-family:"Fraunces",serif;font-weight:400;font-size:17px;line-height:1.2;
  margin:5px 0 0;color:var(--ink);letter-spacing:-.005em}

.jr-head:hover h3{color:var(--red)}

.jr-list{display:flex;flex-direction:column}

.jr-list a{display:block;text-decoration:none;padding:9px 0 9px 12px;
  border-left:1.5px solid transparent;transition:border-color .16s,padding-left .16s}

.jr-list a:hover{border-left-color:var(--red);padding-left:16px}

.jr-list .mg-t{display:block;font-family:"Plus Jakarta Sans",sans-serif;font-size:14px;
  font-weight:500;color:var(--ink);line-height:1.32}

.jr-list a:hover .mg-t{color:var(--red)}

.jr-list .mg-a{display:block;font-family:"JetBrains Mono",monospace;font-size:9px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--faint);margin-top:4px}

.mg-t{display:block;font-family:"Plus Jakarta Sans",sans-serif;font-size:14px;font-weight:500;
  color:var(--ink);line-height:1.3}

.mg-col a:hover .mg-t,.mg-col a:focus-visible .mg-t{color:var(--red)}

.mg-a{display:block;font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint);margin-top:3px}

/* ---- polis karti destesi (pcard-*) — icl.css'ten tasindi ---- */



.pcards{display:grid;gap:14px;margin:30px 0}

.pcard{border:1px solid var(--ink);background:var(--cream);break-inside:avoid}

.pcard-h{display:flex;justify-content:space-between;gap:12px;background:var(--ink);color:#fff;padding:9px 16px}

.pcard-h span{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase}

.pcard-tr{font-family:"Fraunces",serif;font-size:clamp(1.15rem,2.6vw,1.6rem);font-weight:400;line-height:1.32;letter-spacing:-.01em;padding:20px 20px 10px}

.pcard-en{font-family:"Plus Jakarta Sans",sans-serif;font-size:15px;color:var(--muted);line-height:1.55;padding:0 20px 14px}

.pcard-cite{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--red);letter-spacing:.04em;padding:11px 20px;border-top:1px solid var(--line-strong)}
@media print{
  .pcard{border:1.5px solid #000;margin-bottom:8px}
  .pcard-h{background:#000;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .pcards{gap:8px}}

/* Okuma çubuğu gizliyken yalnız transform ile kaçırılıyordu: içindeki
   <details> hâlâ sekme sırasındaydı ve aria-hidden=true bir kapsayıcının
   içinde odaklanılabilir öğe bırakmak erişilebilirlik ihlali. visibility
   ile tamamen çıkarılıyor; geçiş bozulmasın diye gecikmeli. */
.okc{visibility:hidden;transition:transform .28s cubic-bezier(.22,.61,.36,1),visibility 0s .28s}
.okc[data-gorunur="1"]{visibility:visible;transition:transform .28s cubic-bezier(.22,.61,.36,1),visibility 0s}
@media (prefers-reduced-motion:reduce){.okc{transition:none}}

/* ── sınıf çakışması: .top ────────────────────────────────────────────
   Tasarımın .top'u yapışkan site başlığı. Ama polis kartı bileşeni de
   iç bloğuna .top diyor (51 sayfada). Kartın içindeki kutu bu yüzden
   yapışkan oluyor, başlık zeminini ve alt çizgisini alıyor, üstelik
   yazdırırken tamamen gizleniyordu. Kart içindeki .top geri alınıyor.  */
.card .top{position:static;top:auto;z-index:auto;background:var(--ink);
  color:#fff;border-bottom:0;display:flex;justify-content:space-between;
  align-items:center;gap:14px;flex-wrap:wrap;padding:13px 18px;min-height:0}
.card .top>*{font-size:11.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase}
.card .top>*+*{color:rgba(255,255,255,.62)}
@media print{ .card .top{display:flex !important} }

/* WhatsApp önizleme kutusu boşken siyah bir dikdörtgen görünüyordu;
   ne olduğunu söylesin. */
.wa-prev:empty::before{content:"The message you compose will appear here.";
  color:rgba(221,227,233,.5);font-size:14px;line-height:1.6}
.wa-prev{padding:16px 18px}

/* ── satir ici stil yerine sinif ──────────────────────────────────
   CSP'den style-src 'unsafe-inline' kaldirilabilsin diye oznitelik
   stilleri siniflara cevrildi. --i sirasi da 1..9 arasi sabitlendi:
   beliren bloklarin gecikmesi icin kullaniliyor.               */
.u-abs{position:absolute}
.u-nb{border-bottom:0}
.u-w126{width:126px}
.u-w224{width:224px}
.u-w64{width:64px}
.u-lbl{display:block;margin-bottom:9px;color:var(--faint)}
.u-i1{--i:1}
.u-i2{--i:2}
.u-i3{--i:3}
.u-i4{--i:4}
.u-i5{--i:5}
.u-i6{--i:6}
.u-i7{--i:7}
.u-i8{--i:8}
.u-i9{--i:9}

.u-w140{width:140px}

/* ---- yazı ortası iletişim kutusu (.ac) — TR kardeş siteden uyarlandı (16/17 Eyl 2026) ----
   Uzun yazıların orta yarısında hiçbir çağrı yoktu; okuyucu kendi durumunu
   anlatan paragrafı okurken seçenek görmeli. Görsel dil sakin: uyarı rengi,
   titreme yok. Sol kenardaki ince yeşil çizgi gövde metninden ayırmaya yeter. */
.ac{margin:38px 0;padding:22px 24px;background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--green);border-radius:var(--r)}
.ac__b{margin:0 0 8px;font-size:18px;font-weight:700;line-height:1.32;color:var(--ink)}
.ac__m{margin:0 0 18px;font-size:15.5px;line-height:1.6;color:var(--body-2)}
.ac__d{display:flex;flex-wrap:wrap;gap:10px}
.ac__d .btn{width:auto;min-height:46px;font-size:15.5px;display:inline-flex;align-items:center;gap:8px;padding:0 18px;border-radius:999px;text-decoration:none}
.ac__d .btn svg{width:17px;height:17px;flex:none}
.prose .ac__d a.btn-dark,.prose .ac__d a.btn-red{color:#fff;text-decoration:none}
.ac__n{margin:14px 0 0;font-size:13.5px;color:var(--faint)}
@media (max-width:600px){.ac{padding:18px 18px;margin:30px 0}.ac__b{font-size:17px}.ac__d{flex-direction:column}.ac__d .btn{width:100%;justify-content:center}}
@media print{.ac{display:none}}
/* sözlük kutusu ekleri: İngilizce karşılık ve giriş cümlesi */
.tz-en{font-weight:400;color:var(--body-2)}
.tz-note{margin:0;padding:0 18px 6px;font-size:14px;color:var(--faint)}
@media (max-width:600px){.tz-note{padding:0 14px 6px}}