/* =====================================================================
   Alican GÜNEŞ Yeminli Mali Müşavir sitesi — ortak stil (alt sayfalar)
   Kaynak: taslak/ana/index.html satır içi CSS'i (taslak aracı HARİÇ).
   Bölümler:
     0. Yazı tipi (Manrope, kendi alanımızdan)
     1. Renk ve koyu mod değişkenleri
     2. Temel / erişilebilirlik
     3. Üst menü (buzlu cam) + mobil menü
     4. Bloklar, tipografi, hap düğmeler
     5. Ana sayfadan ortak parçalar (özelge hapları, arama formu, liste, ok bağlantı, telefon)
     6. Alt sayfa kalıpları (yol, sayfa ilk ekranı, kalemler, adımlar, mevzuat, özelge kartları, SSS, kapanış)
     7. Alt bilgi
     8. Beliriş
     9. Kırılımlar
    10. Masaüstü ölçeği (≥735 px; her blok tek ekrana sığar, telefon değişmez)
   Araçlar sayfalarının stilleri: araclar/arac.css. (Eski 11. bölüm "Rehber tabloları" taslak/_arsiv/2026-09-25_rehberler/ altında.)
   ===================================================================== */

/* ---------- 0. Yazı tipi ----------
   Manrope değişken yazı tipi (ağırlık 200–800, tek dosya), Google Fonts v20'den indirildi (26.09.2026); sayfa dışarıya bağlanmaz.
   latin: ç ö ü ı · latin-ext: ğ ş İ. Yollar bu CSS dosyasına göre: site kökünde fonts/ (dağıtımda /fonts/).
   Ana sayfa (taslak/ana/index.html) aynı tanımı satır içinde taşır; dosyalar taslak/ana/fonts/ altında da var.
   Lisans: SIL Open Font License 1.1 — fonts/OFL.txt */
@font-face{
  font-family:Manrope; font-style:normal; font-weight:200 800; font-display:swap;
  src:url("fonts/manrope-v20-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:Manrope; font-style:normal; font-weight:200 800; font-display:swap;
  src:url("fonts/manrope-v20-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Renk ve koyu mod ---------- */
:root{
  --zemin:#fff; --blok-acik:#fff; --blok-gri:#f5f5f7; --blok-koyu:#0a1d4d;
  --metin:#1d1d1f; --metin-2:#4f4f55; --vurgu:#0a1d4d; --etiket:#0a1d4d;
  --dolgu:#0a1d4d; --dolgu-metin:#fff; --cizgi:rgba(0,0,0,.12); --hafif:rgba(10,29,77,.06);
  --menu-zemin:rgba(255,255,255,.72); --menu-opak:#fff; --menu-cizgi:rgba(0,0,0,.08);
  --alan:#fff; --alan-cizgi:rgba(0,0,0,.14);
  --ust-h:56px;
  --kenar:max(22px, env(safe-area-inset-left)); --kenar-sag:max(22px, env(safe-area-inset-right));
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --zemin:#08090c; --blok-acik:#08090c; --blok-gri:#15161b; --blok-koyu:#0f2459;
    --metin:#f5f5f7; --metin-2:#a9adb8; --vurgu:#b3c6ff; --etiket:#b3c6ff;
    --dolgu:#c9d6ff; --dolgu-metin:#0a1d4d; --cizgi:rgba(255,255,255,.14); --hafif:rgba(179,198,255,.08);
    --menu-zemin:rgba(8,9,12,.72); --menu-opak:#0d0e12; --menu-cizgi:rgba(255,255,255,.1);
    --alan:#1d1f26; --alan-cizgi:rgba(255,255,255,.18);
    color-scheme:dark;
  }
  .logo img{filter:brightness(0) invert(1)}
}
/* Koyu lacivert blok: her iki temada aynı iç renkler */
.koyu{
  --metin:#fff; --metin-2:#c3cadb; --vurgu:#fff; --etiket:#b3c6ff;
  --dolgu:#fff; --dolgu-metin:#0a1d4d; --cizgi:rgba(255,255,255,.2); --hafif:rgba(255,255,255,.08);
  --alan:#fff; --alan-cizgi:transparent;
  background:var(--blok-koyu); color:var(--metin);
}

/* ---------- 2. Temel / erişilebilirlik ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--zemin); color:var(--metin);
  font-family:Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:17px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-wrap:break-word;
}
a{color:inherit}
button,input{font:inherit}
img,svg{display:block}
h1,h2,h3,h4,p,ul,ol{margin:0}
ul,ol{padding:0; list-style:none}
.gizli{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
:focus-visible{outline:2px solid var(--vurgu); outline-offset:3px; border-radius:6px}
.atla{position:absolute; left:12px; top:-60px; z-index:100; background:var(--dolgu); color:var(--dolgu-metin); padding:10px 16px; border-radius:999px; text-decoration:none; font-weight:600}
.atla:focus{top:calc(8px + env(safe-area-inset-top))}
[id]{scroll-margin-top:calc(var(--ust-h) + env(safe-area-inset-top))}

/* ---------- 3. Üst menü (buzlu cam) ---------- */
.ust{
  position:sticky; top:0; z-index:50;
  padding-top:env(safe-area-inset-top);
  background:var(--menu-opak);
  border-bottom:1px solid var(--menu-cizgi);
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .ust{background:var(--menu-zemin); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px)}
}
.ust-ic{
  max-width:1200px; margin:0 auto; height:var(--ust-h);
  padding:0 var(--kenar-sag) 0 var(--kenar);
  display:flex; align-items:center; gap:12px;
}
.logo{display:flex; align-items:center; min-height:44px; padding:0 6px; margin-left:-6px; margin-right:auto; text-decoration:none}
.logo img{height:30px; width:auto}
.menu{display:flex; align-items:center; gap:4px}
.menu a{
  display:flex; align-items:center; min-height:44px; padding:0 12px;
  font-size:14px; font-weight:500; text-decoration:none; color:var(--metin); opacity:.82;
  transition:opacity .2s;
}
.menu a:hover{opacity:1}
.ust-ara{display:inline-flex; align-items:center; height:44px; margin-left:8px; text-decoration:none; color:var(--dolgu-metin)}
.ust-ara span{display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 16px; border-radius:999px; background:var(--dolgu); font-size:14px; font-weight:700; transition:opacity .2s}
.ust-ara:hover span{opacity:.88}
.ust-ara svg{width:15px; height:15px}
.menu-dugme{
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; margin-right:-10px; padding:0; border:0; background:none; color:var(--metin); cursor:pointer;
}
.menu-dugme svg{width:22px; height:22px}
.menu-dugme .c1,.menu-dugme .c2{transition:transform .3s ease; transform-origin:12px 12px}
.ust.acik .menu-dugme .c1{transform:translateY(3px) rotate(45deg)}
.ust.acik .menu-dugme .c2{transform:translateY(-3px) rotate(-45deg)}

@media (max-width: 833px){
  .ust-ic{flex-wrap:wrap; height:auto; min-height:var(--ust-h); row-gap:0}
  .logo{height:var(--ust-h)}
  html:not(.js) .ust{position:relative}
  .ust-ic > nav{order:3; width:100%}
  .menu{flex-wrap:wrap; padding-bottom:6px; margin-left:-12px}
  .js .ust-ic > nav{order:0; width:auto}
  .js .menu-dugme{display:inline-flex}
  .js .ust-ic{flex-wrap:nowrap; height:var(--ust-h)}
  .js .menu{
    position:absolute; left:0; right:0; top:100%; margin:0;
    flex-direction:column; align-items:stretch; gap:0;
    padding:8px var(--kenar-sag) calc(28px + env(safe-area-inset-bottom)) var(--kenar);
    background:var(--menu-opak); border-bottom:1px solid var(--menu-cizgi);
    visibility:hidden; opacity:0; transform:translateY(-8px);
    transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  }
  .js .ust.acik{background:var(--menu-opak)}
  .js .ust.acik .menu{visibility:visible; opacity:1; transform:none; transition:opacity .25s ease, transform .25s ease}
  .js .menu a{font-size:26px; font-weight:700; letter-spacing:-.02em; min-height:56px; padding:0; opacity:1; border-bottom:1px solid var(--menu-cizgi)}
  .js .menu li:last-child a{border-bottom:0}
}

/* ---------- 4. Bloklar, tipografi, hap düğmeler ---------- */
main{display:flex; flex-direction:column; gap:12px; padding-bottom:12px}
.blok{
  text-align:center;
  padding:clamp(56px, 8vw, 88px) var(--kenar-sag) clamp(48px, 6vw, 72px) var(--kenar);
  display:flex; flex-direction:column; align-items:center;
}
.blok > *{max-width:100%}
.gri{background:var(--blok-gri)}
.acik{background:var(--blok-acik)}
.etiket{margin-bottom:10px; font-size:clamp(17px, 1.6vw, 21px); font-weight:700; letter-spacing:-.01em; color:var(--etiket)}
.basl{
  font-size:clamp(38px, 5.6vw, 64px); line-height:1.06; font-weight:700; letter-spacing:-.03em;
  max-width:20ch; text-wrap:balance;
}
.alt{
  margin-top:12px; font-size:clamp(19px, 2.1vw, 26px); line-height:1.3; font-weight:500; letter-spacing:-.01em;
  max-width:34ch; text-wrap:balance;
}
.not{margin-top:14px; font-size:16px; color:var(--metin-2); max-width:52ch; text-wrap:pretty}
.haplar{display:flex; flex-wrap:wrap; justify-content:center; gap:12px 14px; margin-top:28px}
.hap{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 22px; border-radius:999px;
  font-size:17px; font-weight:600; text-decoration:none; line-height:1.2;
  transition:background-color .2s, opacity .2s, color .2s;
}
.hap svg{width:17px; height:17px; flex:none}
.hap-dolu{background:var(--dolgu); color:var(--dolgu-metin)}
.hap-dolu:hover{opacity:.88}
.hap-cizgi{border:1.5px solid var(--vurgu); color:var(--vurgu); padding:0 21px}
.hap-cizgi:hover{background:var(--hafif)}
.cizim{margin-top:auto; padding-top:clamp(40px, 5vw, 56px); color:var(--vurgu)}
.cizim svg{height:clamp(130px, 15vw, 210px); width:auto}
.cizim svg *{vector-effect:non-scaling-stroke}

/* ---------- 5. Ana sayfadan ortak parçalar ---------- */
/* Özelge hapları (konu/madde bağlantıları) */
.ozl{margin-top:30px; width:min(760px, 100%)}
.ozl-bas{font-size:14px; font-weight:600; color:var(--metin-2)}
.ozl ul{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:12px}
.ozl a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:999px;
  border:1px solid var(--cizgi); font-size:15px; font-weight:600; text-decoration:none; color:var(--vurgu);
  transition:background-color .2s, border-color .2s;
}
.ozl a:hover{background:var(--hafif); border-color:var(--vurgu)}

/* Özelge arama formu */
.ara-form{width:min(640px, 100%); margin-top:36px; text-align:left}
.ara-form label{display:block; font-size:15px; font-weight:600; margin:0 0 10px 20px; color:var(--metin-2)}
.ara-alan{
  display:flex; align-items:center; gap:6px;
  background:var(--alan); border:1px solid var(--alan-cizgi); border-radius:999px;
  padding:6px 6px 6px 20px; color:#1d1d1f;
}
.ara-alan > svg{width:20px; height:20px; flex:none; color:#6e6e73}
.ara-alan input{
  flex:1; min-width:0; height:44px; border:0; background:transparent; outline:0;
  font:inherit; font-size:17px; color:inherit; -webkit-appearance:none; appearance:none;
}
.ara-alan input::placeholder{color:#6e6e73}
.ara-alan input::-webkit-search-cancel-button{-webkit-appearance:none}
.ara-alan:focus-within{box-shadow:0 0 0 3px rgba(143,172,255,.55)}
@supports selector(:has(a)){
  .ara-alan:focus-within{box-shadow:none}
  .ara-alan:has(input:focus){box-shadow:0 0 0 3px rgba(143,172,255,.55)}
}
.ara-alan button{
  flex:none; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 20px;
  border:0; border-radius:999px; background:#0a1d4d; color:#fff; font:inherit; font-size:16px; font-weight:700; cursor:pointer;
}
.ara-alan button svg{width:16px; height:16px}
.ara-alan button:focus-visible{outline:2px solid #0a1d4d; outline-offset:2px}
.ornekler{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 8px; margin-top:16px}
.ornekler > span{font-size:14px; font-weight:600; color:var(--metin-2); margin-right:4px}
.ornekler a{display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:999px; border:1px solid var(--cizgi); font-size:15px; font-weight:600; text-decoration:none}
.ornekler a:hover{background:var(--hafif)}

/* İkonlu kısa kalemler (ana sayfadaki .liste; alt sayfada .kalemler ile üç sütun) */
.liste,.kalemler{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:36px 28px;
  margin-top:44px; width:100%; max-width:1180px; text-align:left;
}
.kalemler{grid-template-columns:repeat(3, minmax(0,1fr)); gap:40px 32px; margin-top:56px}
.liste li,.kalemler li{min-width:0; border-top:1px solid var(--cizgi); padding-top:20px}
/* Kalem sayısı üçe bölünmüyorsa son satır boş hücre bırakmasın (26.09.2026: tam tasdikte 5 kalem):
   masaüstünde 6 sütunlu ızgara, her kalem 2 sütun; son satırda 2 kalem kalırsa her biri 3 sütun, 1 kalırsa ortada 2 sütun. */
@media (min-width: 1069px){
  .kalemler{grid-template-columns:repeat(6, minmax(0,1fr))}
  .kalemler li{grid-column:span 2}
  .kalemler li:nth-last-child(2):nth-child(3n+1),.kalemler li:last-child:nth-child(3n+2){grid-column:span 3}
  .kalemler li:last-child:nth-child(3n+1){grid-column:3 / span 2}
}
/* İki sütunda tek kalan son kalem satırı boydan boya kaplar */
@media (max-width: 1068px){ .kalemler li:last-child:nth-child(odd){grid-column:1 / -1} }
.liste svg,.kalemler svg{width:30px; height:30px; color:var(--vurgu); margin-bottom:14px}
.liste h3,.liste h4,.kalemler h3{margin:0; font-size:19px; line-height:1.3; font-weight:700; letter-spacing:-.01em}
.liste p,.kalemler p{margin-top:6px; font-size:15.5px; color:var(--metin-2)}

/* Ok bağlantı ("… ›") */
.ok{display:inline-flex; align-items:center; gap:4px; min-height:44px; font-weight:600; color:var(--vurgu); text-decoration:none}
.ok::after{content:"\203A"; font-size:21px; line-height:1}
.ok:hover{text-decoration:underline; text-underline-offset:3px}

/* Büyük telefon numarası */
.tel-dev{
  display:inline-block; margin-top:34px; padding:6px 0; font-size:clamp(26px, 8.2vw, 88px); line-height:1.05; font-weight:800; letter-spacing:-.035em;
  font-variant-numeric:tabular-nums; white-space:nowrap; text-decoration:none; color:var(--metin);
}
.tel-dev:hover{opacity:.88}
.tel-alt{margin-top:4px; font-size:16px; color:var(--metin-2)}

/* ---------- 6. Alt sayfa kalıpları ---------- */
/* Yol (breadcrumb) — üst menünün hemen altında, logo hizasında */
.yol{max-width:1200px; margin:0 auto; padding:4px var(--kenar-sag) 0 var(--kenar); font-size:13px; line-height:1.3; color:var(--metin-2)}
.yol ol{display:flex; flex-wrap:wrap; align-items:center; column-gap:0}
.yol li{display:flex; align-items:center; min-width:0}
.yol li + li::before{content:"\203A"; margin:0 8px; font-size:16px; line-height:1; opacity:.7}
.yol a{display:inline-flex; align-items:center; min-height:44px; text-decoration:none}
.yol a:hover{color:var(--metin); text-decoration:underline; text-underline-offset:3px}
.yol [aria-current="page"]{display:inline-flex; align-items:center; min-height:44px; font-weight:600; color:var(--metin)}

/* Sayfa ilk ekranı (hizmet adı <h1>) */
.sayfa-ilk{padding-top:clamp(36px, 6vw, 72px)}
.sayfa-ilk h1{
  font-size:clamp(40px, 7.4vw, 88px); line-height:1.03; font-weight:800; letter-spacing:-.04em;
  max-width:16ch; text-wrap:balance;
}
.sayfa-ilk .giris-metni{margin-top:22px; color:var(--metin-2); font-size:clamp(18px, 2vw, 23px); line-height:1.4; font-weight:500; letter-spacing:-.01em; max-width:40ch; text-wrap:balance}
.sayfa-ilk .haplar{margin-top:34px}
.sayfa-ilk .cizim{padding-top:clamp(44px, 6vw, 72px)}

/* Süreç adımları — numara yok; adımlar ikonlu halka ve ince çizgiyle bağlanır */
.adimlar{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:28px;
  width:100%; max-width:1180px; margin-top:56px; text-align:left;
}
.adim{position:relative; min-width:0}
.adim-ikon{
  display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:999px; border:1.5px solid var(--vurgu); color:var(--vurgu);
}
.adim-ikon svg{width:22px; height:22px}
.adim:not(:last-child)::after{
  content:""; position:absolute; top:24px; left:60px; right:-16px; height:1px; background:var(--cizgi);
}
.adim h3{margin-top:20px; font-size:19px; line-height:1.3; font-weight:700; letter-spacing:-.01em}
.adim p{margin-top:6px; font-size:15.5px; color:var(--metin-2)}

/* Mevzuat çerçevesi — sade düz metin + dayanak listesi */
.metin{width:100%; max-width:680px; margin-top:44px; text-align:left}
.metin p{font-size:clamp(17px, 1.4vw, 18px); line-height:1.65; color:var(--metin-2); text-wrap:pretty}
.metin p + p{margin-top:14px}
.metin strong{color:var(--metin); font-weight:700}
.metin a{color:var(--vurgu); text-underline-offset:3px}
.dayanak{margin-top:32px; padding-top:18px; border-top:1px solid var(--cizgi)}
.dayanak-bas{font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--metin-2)}
.dayanak li{border-bottom:1px solid var(--cizgi)}
.dayanak li:last-child{border-bottom:0}
.dayanak a,.dayanak .dayanak-oge{display:flex; flex-direction:column; justify-content:center; align-items:flex-start; min-height:44px; padding:10px 0; font-size:15.5px; line-height:1.4; font-weight:600; text-decoration:none; color:var(--metin)}
.dayanak a:hover{text-decoration:underline; text-underline-offset:3px}
.dayanak small{display:block; margin-top:2px; font-size:13px; font-weight:500; color:var(--metin-2)}
.metin .uyari-not{margin-top:24px; font-size:14px; line-height:1.55}
/* Hizmet sayfasından ilgili araç (tek satır): "Araçlar  <araç adı> ›" — 26.09.2026 itibarıyla kullanan sayfa yok (KDV İade Asistanı arşivde) */
.arac-bag{display:flex; flex-wrap:wrap; align-items:center; column-gap:22px; margin-top:22px}
.arac-bag > span{font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--metin-2); margin-right:-4px}
.metin .arac-bag a{text-decoration:none}
.metin .arac-bag a:hover{text-decoration:underline}

/* Özelge kartları (koyu blokta; her biri özelge platformundaki sayfaya) */
.ozelge-kartlar{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px;
  width:100%; max-width:1180px; margin-top:44px; text-align:left;
}
.ozelge-kartlar li{min-width:0; display:flex}
.ozk{
  display:flex; flex-direction:column; gap:8px; width:100%; min-height:44px;
  padding:22px 22px 18px; border-radius:18px; border:1px solid var(--cizgi);
  text-decoration:none; color:var(--metin); transition:background-color .2s, border-color .2s;
}
.ozk:hover{background:var(--hafif); border-color:var(--vurgu)}
.ozk-ust{font-size:13px; font-weight:600; color:var(--metin-2)}
.ozk-bas{font-size:17px; line-height:1.4; font-weight:700; letter-spacing:-.01em}
.ozk-no{margin-top:auto; padding-top:6px; font-size:13px; line-height:1.4; color:var(--metin-2); overflow-wrap:anywhere}
.ozk-ok{display:inline-flex; align-items:center; gap:4px; font-size:15px; font-weight:600; color:var(--vurgu)}
.ozk-ok::after{content:"\203A"; font-size:19px; line-height:1}

/* Sık sorulanlar — <details>/<summary>, JS gerekmez */
.sss{width:100%; max-width:820px; margin-top:44px; text-align:left; border-top:1px solid var(--cizgi)}
.sss details{border-bottom:1px solid var(--cizgi)}
.sss summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  min-height:64px; padding:16px 0; cursor:pointer; list-style:none;
  font-size:clamp(18px, 1.6vw, 20px); line-height:1.35; font-weight:700; letter-spacing:-.01em;
}
.sss summary::-webkit-details-marker{display:none}
.sss summary::marker{content:""}
.sss summary svg{width:20px; height:20px; flex:none; color:var(--vurgu); transition:transform .25s ease}
.sss details[open] summary svg{transform:rotate(45deg)}
.sss summary:hover{color:var(--vurgu)}
.sss-cevap{padding:0 40px 24px 0}
.sss-cevap p{font-size:16.5px; line-height:1.65; color:var(--metin-2); max-width:64ch; text-wrap:pretty}
.sss-cevap p + p{margin-top:12px}
.sss-cevap a{color:var(--vurgu); text-underline-offset:3px}

/* Ok bağlantı satırı (ortalı, sarılır): "Tüm konular ›  Tüm kanun maddeleri ›" */
.ok-satir{display:flex; flex-wrap:wrap; justify-content:center; gap:0 24px; margin-top:18px}

/* Kapanış (iletişim çağrısı) */
.kapanis .alt{max-width:36ch}
.kapanis .ok-satir{margin-top:22px}
.kapanis .ok{font-size:16px}

/* ---------- 7. Alt bilgi ---------- */
.alt-bilgi{background:var(--blok-gri); color:var(--metin-2); font-size:13px; line-height:1.5}
.alt-ic{max-width:1180px; margin:0 auto; padding:28px var(--kenar-sag) calc(40px + env(safe-area-inset-bottom)) var(--kenar)}
.uyari{padding-bottom:18px; border-bottom:1px solid var(--cizgi)}
.alt-kolonlar{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; padding:22px 0; border-bottom:1px solid var(--cizgi)}
.alt-kolonlar > div{min-width:0}
.alt-kolonlar .alt-bas{font-size:13px; font-weight:700; color:var(--metin); margin-bottom:2px}
.alt-kolonlar a{display:flex; align-items:flex-start; min-height:44px; padding:12px 0; line-height:1.4; text-decoration:none}
.alt-kolonlar a:hover{text-decoration:underline; color:var(--metin)}
.alt-son{display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px; padding-top:22px}
.alt-son .logo{margin:0 0 0 -6px}
.alt-son .logo img{height:26px}

/* ---------- 8. Beliriş (yalnız JS çalışınca gizler) ---------- */
.belir-hazir .belir{opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1)}
.belir-hazir .belir.gorundu{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .belir-hazir .belir{opacity:1; transform:none; transition:none}
  .menu, .menu-dugme .c1, .menu-dugme .c2, .sss summary svg{transition:none!important}
}

/* ---------- 9. Kırılımlar ---------- */
@media (min-width: 834px){
  .blok.buyuk{min-height:560px}
}
@media (max-width: 1068px){
  .liste,.kalemler{grid-template-columns:repeat(2, minmax(0,1fr))}
  .ozelge-kartlar{grid-template-columns:repeat(2, minmax(0,1fr))}
  /* Adımlar dikey akışa geçer: halkalar solda, aralarında dikey ince çizgi */
  .adimlar{grid-auto-flow:row; grid-auto-columns:auto; gap:0; max-width:640px}
  .adim{padding:0 0 36px 72px}
  .adim:last-child{padding-bottom:0}
  .adim-ikon{position:absolute; left:0; top:0}
  .adim h3{margin-top:12px}
  .adim:not(:last-child)::after{left:24px; right:auto; top:60px; bottom:12px; width:1px; height:auto}
}
@media (max-width: 734px){
  /* Telefonda ilk ekran (yol satırı + .sayfa-ilk) görünür alanı tam doldurur (kullanıcı isteği 25.09.2026):
     sonraki bölüm ancak kaydırınca görünür. 57 = menü (56) + alt çizgi (1); 48 = tek satırlık yol satırı.
     svh: araç çubukları açıkken görünür yükseklik (100vh telefonda yanlış); desteklemeyende içerik kadar kalır. */
  @supports (height:1svh){ .sayfa-ilk{min-height:calc(100svh - 57px - 48px - env(safe-area-inset-top)); justify-content:center} }
  .liste,.kalemler,.ozelge-kartlar{grid-template-columns:minmax(0,1fr)}
  .kalemler{gap:28px; margin-top:40px}
  .adimlar{margin-top:40px}
  .adim{padding-left:64px}
  .alt-kolonlar{grid-template-columns:repeat(2, minmax(0,1fr))}
  .alt-kolonlar > div:last-child{grid-column:1 / -1}
  .ara-alan button span{display:none}
  .ara-alan button{padding:0; width:44px; justify-content:center}
  .ara-alan button svg{width:18px; height:18px}
  .hap{font-size:16px; padding:0 18px}
  .hap-cizgi{padding:0 17px}
  .ozl a,.ornekler a{padding:0 14px}
  .ornekler > span{flex-basis:100%; text-align:center; margin:0 0 2px}
  /* Uzun metin bölümleri telefonda sola yaslı */
  .sola{text-align:left; align-items:stretch}
  .sola .basl,.sola .alt{max-width:none}
  .metin,.sss{margin-top:28px}
  .sss-cevap{padding-right:0}
  .ozk{padding:20px 20px 16px}
}

/* =====================================================================
   10. MASAÜSTÜ ÖLÇEĞİ (≥735 px) — ana sayfadaki (taslak/ana/index.html)
   "MASAÜSTÜ ÖLÇEĞİ" bloğunun değişkenleri ve ortak kuralları; ana sayfaya
   özgü parçalar (.ilk, .hz-*, .ms-*, .ozelge, .olgular, .ilkeler, .hk, .kanal)
   buraya taşınmadı. Telefon (≤734 px) etkilenmez.
   Ölçüt: her blok ≤ pencere yüksekliği − üst menü (--ekran); ilk ekranda
   yol (breadcrumb) satırı da düşülür. "Mevzuat çerçevesi" ve "Sık sorulanlar"
   uzun metin: yalnız boşluk ve ölçek derlenir.
   ===================================================================== */
@media (min-width: 735px){
  :root{
    --ekran: calc(100svh - var(--ust-h) - 1px);            /* kullanılabilir yükseklik */
    --yol-h: 48px;                                         /* yol satırı (4 px + 44 px) */
    --blok-dikey: clamp(36px, 7vh, 76px);                  /* blok üst boşluğu (alt = ×0,85) */
    --b-ara: clamp(20px, 4.2vh, 44px);                     /* başlık → içerik aralığı */
    --b-ara-sik: clamp(12px, 2.2vh, 32px);                 /* yoğun bloklarda iç aralık */
    --b-h1-sayfa: clamp(40px, min(5.4vw, 9.2vh), 84px);    /* alt sayfa <h1> (hizmet adı) */
    --b-h2: clamp(32px, min(3.6vw, 6.6vh), 56px);          /* bölüm başlığı */
    --b-alt: clamp(17px, min(1.55vw, 2.9vh), 23px);        /* alt cümle */
    --b-etiket: clamp(15px, min(1.2vw, 2.3vh), 19px);      /* üst etiket */
    --b-cizim: clamp(80px, 16vh, 170px);                   /* ilk ekran çizimi */
    --b-tel: clamp(40px, min(5vw, 8.5vh), 76px);           /* kapanıştaki büyük numara */
    --b-hap-h: 40px;                                       /* hap düğme yüksekliği */
  }
  .blok{padding-top:var(--blok-dikey); padding-bottom:calc(var(--blok-dikey) * .85)}
  .basl{font-size:var(--b-h2)}
  .alt{margin-top:10px; font-size:var(--b-alt)}
  .etiket{margin-bottom:6px; font-size:var(--b-etiket)}
  .not{margin-top:8px; font-size:16px}
  .haplar{margin-top:clamp(18px, 3.2vh, 28px)}
  .hap{min-height:var(--b-hap-h); padding:0 20px; font-size:16px}
  .hap-cizgi{padding:0 19px}
  .ok{min-height:40px}
  .ok-satir{margin-top:clamp(8px, 1.6vh, 18px)}

  /* Sayfa ilk ekranı: yol satırıyla birlikte tam bir ekran */
  .sayfa-ilk{
    min-height:min(calc(var(--ekran) - var(--yol-h)), 880px); justify-content:center;
    padding-top:clamp(20px, 4vh, 56px); padding-bottom:clamp(24px, 4.5vh, 56px);
  }
  .sayfa-ilk h1{font-size:var(--b-h1-sayfa); max-width:18ch}
  .sayfa-ilk .giris-metni{margin-top:clamp(12px, 2.4vh, 22px); font-size:var(--b-alt); max-width:58ch}
  .sayfa-ilk .haplar{margin-top:clamp(18px, 3.6vh, 32px)}
  /* Çizim metnin hemen altında; grup ekranda dikey ortalanır (boş ara kalmaz) */
  .sayfa-ilk .cizim{margin-top:0; padding-top:clamp(24px, 5vh, 56px)}
  .sayfa-ilk .cizim svg{height:clamp(80px, 19vh, 190px)}

  /* Kalemler (Neler yapıyoruz): ikon başlığın solunda (ana sayfadaki özelge
     özellikleriyle aynı kalıp), açıklama altta tam genişlik */
  .kalemler{margin-top:var(--b-ara); gap:clamp(18px, 3.2vh, 36px) 32px}
  .kalemler li{
    display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; align-content:start;
    column-gap:10px; padding-top:16px;
  }
  .kalemler li > :not(svg):not(h3){grid-column:1 / -1; justify-self:start}
  .kalemler svg{width:24px; height:24px; margin:0}
  .kalemler h3{font-size:17px}
  .kalemler p{font-size:16px; line-height:1.4}

  /* Adımlar (Nasıl ilerliyoruz) */
  .adimlar{margin-top:var(--b-ara)}
  .adim h3{margin-top:14px; font-size:17px}
  .adim p{font-size:16px; line-height:1.4}

  /* Mevzuat çerçevesi (uzun metin: yalnız boşluk) */
  .metin{margin-top:var(--b-ara)}
  .metin p{font-size:17px; line-height:1.6}
  .metin p + p{margin-top:12px}
  .dayanak{margin-top:24px; padding-top:14px}
  .dayanak a,.dayanak .dayanak-oge{padding:8px 0; font-size:15.5px}
  .metin .uyari-not{margin-top:18px}

  /* İlgili özelgeler: arama + konu/madde hapları */
  .ara-form{margin-top:var(--b-ara-sik)}
  .ara-form label{margin:0 0 6px 20px; font-size:14px}
  .ara-alan{padding:4px 4px 4px 18px}
  .ara-alan input{height:42px}
  .ara-alan button{min-height:40px}
  .ornekler{margin-top:12px}
  .ornekler a{min-height:36px; padding:0 14px; font-size:15px}
  .ozl{margin-top:var(--b-ara-sik); width:min(980px, 100%)}
  .ozl ul{gap:6px; margin-top:8px}
  .ozl a{min-height:36px; padding:0 14px; font-size:15px}

  /* Sık sorulanlar (uzun metin: yalnız boşluk) */
  .sss{margin-top:var(--b-ara)}
  .sss summary{min-height:56px; padding:12px 0; font-size:clamp(17px, min(1.4vw, 2.6vh), 20px)}
  .sss-cevap{padding-bottom:18px}
  .sss-cevap p{font-size:16px; line-height:1.6}

  /* Kapanış */
  .tel-dev{margin-top:clamp(16px, 3vh, 28px); font-size:var(--b-tel)}
  .tel-alt{font-size:16px}
  .kapanis .ok-satir{margin-top:clamp(10px, 2vh, 22px)}
}
/* Dokunmatik ekranlı tablet (≥735 px, iPad): dokunma hedefleri 44 px'e döner.
   Fare ile kullanılan dizüstünde yukarıdaki sıkı ölçü (36–40 px) geçerli kalır. */
@media (min-width: 735px) and (pointer: coarse){
  :root{--b-hap-h:44px}
  .ornekler a,.ozl a,.ok{min-height:44px}
  .ara-alan input{height:44px}
  .ara-alan button{min-height:44px}
}