/* ===== Ortak site stili =====
   Bu dosya daha once her sayfanin icine ayri ayri kopyalanmisti.
   Tek kaynak: token veya kural degisikligi artik yalnizca burada yapilir. */

/* ===== Yazi tipleri =====
   Fontlar daha once Google Fonts'tan yukleniyordu; bu her sayfa acilisinda
   ziyaretcinin IP adresini ve tarayici bilgisini Google'a gonderiyordu.
   Artik dosyalar assets/fonts/ altindan, kendi alan adimizdan servis ediliyor
   ve disariya hicbir istek gitmiyor. Bu yuzden sayfalarda fonts.googleapis.com
   / fonts.gstatic.com <link>'leri YOKTUR; yeni sayfa uretirken de eklenmemeli.

   Bricolage Grotesque, IBM Plex Sans ve Playfair Display degisken (variable)
   font olarak tek dosyada geliyor; agirlik araligi font-weight'te bildiriliyor.
   IBM Plex Mono'nun degisken surumu yok, uc agirlik ayri dosya.

   Alt kumeler Google'in bolumlemesiyle ayni: latin + latin-ext. Turkce icin
   IKISI DE gerekli — c/o/u latin'de (U+0000-00FF), g/G/I/s/S latin-ext'te
   (U+0100-02BA); i (U+0131) latin'de. Yeni bir alfabe gerekirse ilgili alt
   kume dosyasi da indirilmeli.

   Kaynak: Google Fonts. Lisans: SIL Open Font License 1.1 (dort aile de).
   Yenileme: assets/fonts/OKUBENI.md */

/* --- Bricolage Grotesque (degisken: opsz 12..96, wght 400..800) --- */
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-weight:400 800;
  font-stretch:100%;
  font-display:swap;
  src:url(../fonts/bricolage-grotesque-var-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-weight:400 800;
  font-stretch:100%;
  font-display:swap;
  src:url(../fonts/bricolage-grotesque-var-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;
}

/* --- IBM Plex Sans (degisken: wght 400..600) — govde yazisi --- */
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url(../fonts/ibm-plex-sans-var-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url(../fonts/ibm-plex-sans-var-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;
}

/* --- Playfair Display (degisken: wght 600..800) — yalnizca logo ve baslik --- */
@font-face{
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:600 800;
  font-display:swap;
  src:url(../fonts/playfair-display-var-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:600 800;
  font-display:swap;
  src:url(../fonts/playfair-display-var-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;
}

/* --- IBM Plex Mono (statik: 400 / 500 / 600) --- */
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(../fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(../fonts/ibm-plex-mono-400-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:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(../fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(../fonts/ibm-plex-mono-500-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:'IBM Plex Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(../fonts/ibm-plex-mono-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(../fonts/ibm-plex-mono-600-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;
}

:root{
  --ink:#181C1A;
  --dark:#182233; /* koyu kutu/dugme/bolum zemini (CTA, footer, vurgu bolumleri) */
  --parchment:#EEF0EE;
  --paper:#FFFFFF;
  --paper-sicak:#FBF9F4; /* beyazin bir tik sicak tonu — kutu :hover zemini */
  --seal:#B5563A;
  --seal-text:#96462E; /* acik zeminde kucuk metin icin AA kontrastli turuncu */
  --seal-parlak:#ff7442; /* acik zeminli dugmelerin :hover'i */
  --seal-acik:#ff8a5c;   /* koyu zeminde vurgu ogesi: etiket, kenarlik, :hover (6.87:1) */
  --seal-on-dark:#FFB694; /* koyu zeminde VURGU METNI — okunmasi gereken govde metni
                             oldugu icin daha acik ton: 9.40:1. Daha once iki sayfa
                             grubunda #FFB694 ve #F0C9C2 diye elle yazilmisti. */
  --seal-koyu:#c4603f;   /* muhur zeminli dugmelerin :hover'i */
  --brass:#5B675F;
  --brass-on-dark:#A8B0A9; /* koyu zeminde AA kontrastli ikincil etiket rengi */
  --text:#181C1A;
  --text-soft:#565F5A;
  --line:rgba(24,28,26,0.14);
  --radius:4px;
  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  }
body{
    margin:0;
    background:var(--parchment);
    color:var(--text);
    font-family:'IBM Plex Sans', Georgia, serif;
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
a{color:inherit;}
a:focus-visible, button:focus-visible, input:focus-visible{
    outline:2px solid var(--seal);
    outline-offset:3px;
  }
.wrap{
    max-width:1080px;
    margin:0 auto;
    padding:0 32px;
  }
header.site{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(238,240,238,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
.header-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 0;
    gap:16px;
  }
.brand{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:var(--ink);
    flex-shrink:0;
  }
/* logo.png 2026-08-10'da kirpildi: 927x649 tuvalin cevresinde 155-209px
   saydam bosluk vardi ve cizim tuvalin yalnizca yarisini kapliyordu, yani
   "height:44px" gercekte 22px'lik bir isaret basiyordu. Dosya artik 524x324
   ve tamami cizim; ayni gorunumu korumak icin deger yariya indirildi.
   Deger 36px: yanindaki iki satirlik marka blogu (.mark ~24px + .tagline
   ~13px) yaklasik 37px, isaret onunla ayni boyda duruyor. Footer'daki oran
   da ayni (42px isaret / ~45px metin). */
.brand-mark{
    width:auto;
    height:36px;
    flex-shrink:0;
  }
.brand-text{
    display:flex;
    flex-direction:column;
    line-height:1.15;
  }
/* Logo yazisi. Sitede dort ayri sekilde tanimliydi (Playfair 700, Bricolage 800,
   Bricolage 600, ve Playfair bildirilip yuklenmedigi icin Georgia'ya dusen bir
   surum). Tek dogru tanim burasi; sayfa ici override'lar kaldirildi. */
.brand .mark{
    font-family:var(--serif);
    font-weight:700;
    font-size:21px;
    letter-spacing:0;
  }
.brand .mark em{
    font-style:normal;
    font-weight:800;
    color:var(--seal);
  }
.brand .tagline{
    font-family:'Bricolage Grotesque', sans-serif;
    font-size:11px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--text-soft);
  }
nav.top{
    display:none;
    align-items:center;
    gap:16px;
    font-family:'Bricolage Grotesque', sans-serif;
    font-size:12.5px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    flex-shrink:0;
  }
@media (min-width:1120px){
    nav.top{ display:flex; }
  }
nav.top a{
    text-decoration:none;
    color:var(--ink);
    border-bottom:1px solid transparent;
    padding-bottom:2px;
    white-space:nowrap;
    transition:border-color 0.2s ease;
  }
nav.top a:hover{ border-color:var(--seal); }
.header-cta{
    font-family:'Bricolage Grotesque', sans-serif;
    font-size:12.5px;
    font-weight:500;
    letter-spacing:0.05em;
    text-transform:uppercase;
    text-decoration:none;
    color:var(--paper);
    background:var(--dark);
    padding:9px 18px;
    border-radius:var(--radius);
    white-space:nowrap;
    flex-shrink:0;
    transition:background 0.2s ease;
  }
.header-cta:hover{ background:var(--seal); }
/* --------------------------------------------------------------------------
   İLETİŞİM ŞERİDİ — header'ın hemen altında, manşetin üstünde.
   Tam genişlik koyu bant: header ile künye arasında net bir kesme yapıyor.
   Masaüstünde 44px; burada harcanan her piksel manşeti aşağı ittiği için
   bilinçli olarak alçak tutuldu.
   -------------------------------------------------------------------------- */
.mh-bar{
  background:var(--dark);
  color:var(--parchment);
}
.mh-bar .wrap{
  display:flex; flex-wrap:wrap; align-items:center;
}
.mh-bar a{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 18px;
  text-decoration:none; color:var(--parchment);
  font-family:'Bricolage Grotesque', sans-serif; font-size:13px; letter-spacing:0.01em;
  border-right:1px solid rgba(243,239,231,0.14);
  transition:background 0.16s ease, color 0.16s ease;
}
/* İlk hücrenin sol boşluğu yok: altındaki manşet cetveliyle hizalanıyor */
.mh-bar a:first-child{ padding-left:0; }
.mh-bar a svg{ width:15px; height:15px; flex-shrink:0; color:var(--brass-on-dark); transition:color 0.16s ease; }
.mh-bar a:hover{ color:#fff; }
.mh-bar a:hover svg{ color:#fff; }
/* Geniş ekranda tam e-posta adresi, dar ekranda "E-posta" etiketi.
   Bu temel kural medya sorgusundan ÖNCE gelmeli; sonra yazılırsa
   aynı özgüllükte olduğu için medya sorgusunu eziyor. */
.mh-bar .m-kisa{ display:none; }
/* Tek eylem vurgusu: form, mühür kırmızısıyla ayrışıyor. Konum'a mesafe
   sağ uca değil, Konum yazısının kendi satır yüksekliği kadar (13px × 1.6
   satır yüksekliği = 20.8px) — iki ayrı eylem değil, aynı grubun devamı
   gibi okunsun diye. */
.mh-bar a.is-primary{
  margin-left:20.8px; border-right:0;
  background:var(--seal); color:#fff;
  font-family:'Bricolage Grotesque', sans-serif;
  font-size:11.5px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
}
.mh-bar a.is-primary:hover{ background:var(--seal-koyu); }
@media (max-width:900px){
  .mh-bar a{ padding:10px 13px; font-size:12px; }
  .mh-bar a.is-primary{ margin-left:19.2px; }}  /* 12px × 1.6 */
@media (max-width:560px){
  .mh-bar .wrap{ gap:0; }
  .mh-bar a{ padding:9px 11px; font-size:11.5px; }
  .mh-bar a.is-primary{ flex:1 0 100%; justify-content:center; padding:11px; margin-left:0; }
  /* Dar ekranda tam e-posta adresi şeridi taşırıyor; adres yerine
     etiket gösteriliyor, bağlantı yine mailto. */
  .mh-bar .m-uzun{ display:none; }
  .mh-bar .m-kisa{ display:inline; }}
.hero{
    padding:88px 0 72px;
    position:relative;
    overflow:hidden;
  }
.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
      repeating-linear-gradient(180deg, transparent, transparent 27px, rgba(24,28,26,0.035) 28px);
    pointer-events:none;
  }
/* Bolum etiketi. Renk --seal DEGIL --seal-text: 12px'lik bu metin acik zeminde
   --seal ile 4.21:1 kontrast veriyordu ve AA esigini (4.5) geciyemiyordu;
   --seal-text ayni zeminde 5.71:1. Kalinlik 600, genis harf araligiyla kucuk
   punto okunurlugunu toparliyor. Sitedeki 22 etiketin 21'i acik zeminde. */
.kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:'Bricolage Grotesque', sans-serif;
    font-size:12px;
    font-weight:600;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--seal-text);
    margin-bottom:20px;
    opacity:0;
    animation:rise 0.7s 0.05s ease-out forwards;
  }
.kicker::before{
    content:"";
    width:26px; height:1px;
    background:var(--seal-text);
    display:inline-block;
  }
/* Koyu zeminli bolumde ters cevir: --seal-text orada 2.44:1'e duser,
   --seal-acik 6.87:1 verir. Tek kullanim yeri simdilik index'in CTA bandi,
   ama kural burada dursun ki koyu bir bolum daha eklendiginde hazir olsun. */
.cta-band .kicker{ color:var(--seal-acik); }
.cta-band .kicker::before{ background:var(--seal-acik); }
.lede{
    font-size:18px;
    color:var(--text-soft);
    max-width:600px;
    margin:0 0 34px;
    opacity:0;
    animation:rise 0.7s 0.28s ease-out forwards;
  }
.btn{
    font-family:'Bricolage Grotesque', sans-serif;
    font-size:13px;
    font-weight:500;
    letter-spacing:0.05em;
    text-transform:uppercase;
    text-decoration:none;
    padding:13px 24px;
    border-radius:var(--radius);
    transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
.btn-primary{
    background:var(--dark);
    color:var(--paper);
    border:1px solid var(--dark);
  }
.btn-primary:hover{ background:var(--seal); border-color:var(--seal); }
.btn-ghost{
    background:transparent;
    color:var(--ink);
    border:1px solid var(--brass);
  }
.btn-ghost:hover{ border-color:var(--seal); color:var(--seal); }
@keyframes rise{
    from{ opacity:0; transform:translateY(14px); }
    to{ opacity:1; transform:translateY(0); }
  }
.section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:34px;
    flex-wrap:wrap;
  }
.section-head .num{
    font-family:'Bricolage Grotesque', sans-serif;
    font-size:12px;
    color:var(--brass);
    letter-spacing:0.08em;
  }
h2.section-title{
    font-family:'Bricolage Grotesque', serif;
    font-weight:500;
    font-size:clamp(24px, 3vw, 32px);
    margin:2px 0 0;
    color:var(--ink);
  }
.section-note{
    font-size:14.5px;
    color:var(--text-soft);
    max-width:320px;
    text-align:right;
  }
@media (max-width:640px){
    .section-note{ text-align:left; }
  }
.card-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
@media (min-width:760px){
    .card-grid{
      grid-template-columns:repeat(3, 1fr);
    }
  }
.card{
    background:var(--paper);
    padding:30px 26px 28px;
    text-decoration:none;
    color:var(--text);
    position:relative;
    display:flex;
    flex-direction:column;
    gap:16px;
    transition:background 0.25s ease, transform 0.25s ease;
  }
.card:hover{
    background:#ffffff;
    transform:translateY(-2px);
  }
.card:hover .stamp{
    border-color:var(--seal);
    color:var(--seal);
    transform:rotate(-3deg) scale(1.04);
  }
.stamp{
    align-self:flex-start;
    font-family:'Bricolage Grotesque', sans-serif;
    font-size:11px;
    letter-spacing:0.03em;
    color:var(--brass);
    border:1.5px solid var(--brass);
    border-radius:999px;
    padding:5px 12px;
    transform:rotate(-3deg);
    transition:all 0.25s ease;
    white-space:nowrap;
  }
.card h3{
    font-family:'Bricolage Grotesque', serif;
    font-weight:500;
    font-size:19px;
    line-height:1.32;
    margin:0;
    color:var(--ink);
  }
.card p{
    font-size:14.5px;
    color:var(--text-soft);
    margin:0;
    flex-grow:1;
  }
.card .go{
    font-family:'Bricolage Grotesque', sans-serif;
    font-size:11.5px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--seal);
    display:flex;
    align-items:center;
    gap:6px;
  }
.card .go svg{
    width:12px; height:12px;
    transition:transform 0.2s ease;
  }
.card:hover .go svg{ transform:translateX(3px); }
.contact-sec{
    padding:60px 0 64px;
    border-top:1px solid var(--line);
  }
.contact-sec .section-head{ margin-bottom:28px; }
.contact-grid{
    display:grid;
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    grid-template-columns:1fr;
  }
@media (min-width:720px){
    .contact-grid{ grid-template-columns:repeat(2,1fr); }
  }
.contact-item{
    background:var(--paper);
    padding:24px 24px;
    text-decoration:none;
    color:var(--text);
    display:flex;
    gap:16px;
    align-items:flex-start;
    transition:background 0.2s ease;
  }
a.contact-item:hover{ background:#fff; }
.contact-item .ci-ic{
    flex-shrink:0;
    width:38px; height:38px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--brass);
    border-radius:999px;
    color:var(--seal);
  }
.contact-item .ci-ic svg{ width:18px; height:18px; }
.contact-item .label{
    font-family:'Bricolage Grotesque', sans-serif;
    font-size:11px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--text-soft);
    display:block;
    margin-bottom:4px;
  }
/* Metin sutunu esneyebilsin: flex ogesinin varsayilan min-width:auto degeri,
   e-posta adresi gibi bolunmeyen uzun bir kelime varsa kutuyu disari tasirir. */
.contact-item > span:last-child{ min-width:0; }
.contact-item .val{
    overflow-wrap:anywhere;
    font-family:'Bricolage Grotesque', serif;
    font-size:17px;
    color:var(--ink);
    line-height:1.3;
  }
.contact-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:24px;
  }
.contact-map{
    margin-top:26px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    line-height:0;
  }
.contact-map iframe{ width:100%; height:300px; border:0; }
/* ===== Footer =====
   Koyu kapanis seridi. Sayfa ustteki .mh-bar ile altta bu seridin arasina
   aliniyor; iki koyu bant sayfayi cerceveliyor ve alt kenar sonumlenerek
   degil kapanarak bitiyor. Onceki surum acik zeminde uc sutundu ve her
   sayfada 326px yer kapliyordu; simdi 110px.

   Tekrar temizligi (bilincli): "Iletisim" ve "Hakkinda" baglantilari
   footer'dan cikarildi, cunku header YAPISKAN — o iki hedef zaten her an
   ekranda. Geriye yalnizca header'da bulunmayan iki sayfa kaldi.
   Adres kaliyor: ad-adres-telefon ucusunun sayfada bulunmasi yerel arama
   sonuclari icin ise yariyor. */
footer{
    background:var(--dark);
    color:var(--parchment);
    font-size:13.5px;
  }
footer .wrap{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:16px 28px;
    padding-top:22px;
    padding-bottom:18px;
  }
/* Marka: header'daki dizilisin koyu zemine uyarlanmis hali — logo solda,
   yaninda iki satirli ad. Boy BURADA sinirlaniyor; <img> bir olcu kurali
   bulamazsa dosyanin dogal boyunda basiliyor. Buradaki 42px artik gercekten
   42px'lik bir isaret demek (bkz. .brand-mark yanindaki kirpma notu). */
footer .f-brand{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:inherit;
    margin-right:auto;
  }
/* Beyaz cizim DOSYAYA GOMULU (logo-beyaz.png, ColorMatrix ile uretildi);
   CSS filtresi YOK. Onceden "filter:brightness(0) invert(1)" kullaniliyordu;
   olcumler dogru gorunmesine ragmen tarayicida cikmiyordu, o yuzden filtreye
   bagimlilik tumuyle kaldirildi. Ayrica dosya adi her degisimde yenilendi,
   boylece onbellekteki eski surum servis edilemiyor.

   Bir ara yalnizca monogram (tapinaksiz) kullanildi: olcume gore tapinagin
   ~3px'lik cizgisi 42px'te 0.4px'e dusuyor ve gri lekeye donusuyordu. Pratikte
   yuksek piksel yogunluklu ekranda tapinak okunuyor, bu yuzden TAM logoya
   donuldu. Monogram surumu (logo-monogram-beyaz.png / logo-monogram.png)
   daha kucuk kullanimlar icin duruyor. */
/* Logo AYRI DOSYA DEGIL, bu dosyanin icinde data URI olarak duruyor.
   Gerekce: ayri bir /logo-*.png istegi uc ayri denemede tarayiciya ulasmadi
   (onbellek), oysa bu stil dosyasi ulasiyordu — koyu footer zemini gorunuyordu.
   Logo CSS'in icinde seyahat edince ayri istek, ayri onbellek kaydi ve yol
   sorunu diye bir ihtimal kalmiyor.
   Beyaz cizim goruntunun kendisinde (ColorMatrix ile uretildi); CSS filtresi
   yok. Oran 524x324 -> 68x42. */
/* Logo GORELI yolla bagli: kok sayfalarda "logo-beyaz.png", alt klasordeki
   ornek belge sayfalarinda "../logo-beyaz.png". Kok-mutlak yol ("/logo-...")
   KULLANMA — sayfalar cift tiklanarak file:// ile de aciliyor ve o kipte
   kok-mutlak yol diskin kokune cozulup kiriliyor. Header de ayni sebeple
   goreli yol kullaniyor.
   Beyaz cizim goruntunun kendisinde (logo-beyaz.png, ColorMatrix ile
   uretildi); CSS filtresi yok. */
footer .f-brand img{
    height:42px;
    width:auto;
    flex-shrink:0;
  }
footer .f-brand-text{
    display:flex;
    flex-direction:column;
    line-height:1.15;
  }
footer .f-ad{
    font-family:var(--serif);
    font-weight:700;
    font-size:19px;
    color:#fff;
  }
/* Soyadi vurgusu header'daki gibi muhur renginde; ama koyu zeminde --seal
   (#B5563A) AA'yi gecmiyor, o yuzden koyu zemin icin ayrilmis ton. */
footer .f-ad em{
    font-style:normal;
    font-weight:800;
    color:var(--seal-on-dark);
  }
footer .f-tag{
    font-family:'Bricolage Grotesque', sans-serif;
    font-weight:600;
    font-size:11.5px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--brass-on-dark);
  }
footer .f-tel{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:'Bricolage Grotesque', sans-serif;
    font-size:16px;
    font-weight:600;
    color:var(--seal-on-dark);
    text-decoration:none;
  }
footer .f-tel svg{ width:15px; height:15px; flex-shrink:0; }
footer .f-tel:hover{ color:#fff; }
footer .f-adres{ font-size:12.5px; color:var(--brass-on-dark); }
footer .f-links{
    display:flex;
    flex-wrap:wrap;
    gap:8px 18px;
  }
footer .f-links a{
    font-size:13px;
    text-decoration:none;
    color:var(--parchment);
    border-bottom:1px solid rgba(243,239,231,0.25);
    padding-bottom:1px;
  }
footer .f-links a:hover{ color:#fff; border-color:#fff; }
/* Telif + sorumluluk notu: ayri blok ve kesikli ikinci cizgi yerine seridin
   kendi icinde ince bir ayirici. Not italikten duz yaziya cevrildi; 12px
   italik uzun metin okunmuyordu. */
footer .f-alt{ border-top:1px solid rgba(243,239,231,0.14); }
footer .f-alt .wrap{
    justify-content:space-between;
    gap:6px 18px;
    padding-top:11px;
    padding-bottom:14px;
    font-size:11.5px;
    color:var(--brass-on-dark);
    line-height:1.5;
  }
@media (max-width:780px){
    footer .wrap{ gap:14px 22px; }
    footer .f-brand{ margin-right:0; flex-basis:100%; }
  }
/* Yazdirma: tarayicilar arka plan rengini varsayilan olarak basmaz, dolayisiyla
   koyu zemin kagida gecmez ve beyaz metin gorunmez olurdu. Footer'i gizlemek
   yerine acik surumune donduruyoruz; kunye ve sorumluluk notu ciktida kalsin.
   (Ornek belge sayfalari footer'i zaten kendi @media print'inde gizliyor.) */
@media print{
    footer{ background:transparent; color:#000; }
    /* Isaretin beyazi dosyaya gomulu; kagitta beyaz beyaz uzerine dusup
       gorunmez olurdu. invert(1) beyaz pikselleri siyaha ceviriyor, saydam
       alan saydam kaliyor. */
    footer .f-brand img{ filter:invert(1); }
    footer .f-ad, footer .f-ad em, footer .f-tag, footer .f-tel,
    footer .f-adres, footer .f-links a, footer .f-alt .wrap{ color:#000; }
    footer .f-links a{ border-bottom-color:#999; }
    footer .f-alt{ border-top-color:#999; }
  }
.wa-float{
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:60;
    width:56px;
    height:56px;
    border-radius:999px;
    background:#25D366;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 6px 20px rgba(0,0,0,0.22);
    transition:transform 0.2s ease, box-shadow 0.2s ease;
  }
.wa-float:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,0.28); }
.wa-float svg{ width:30px; height:30px; }
@media (max-width:480px){
    .wa-float{ width:52px; height:52px; right:16px; bottom:16px; }
  }
.nav-toggle{
    display:none;
    background:none;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:8px 9px;
    cursor:pointer;
    color:var(--ink);
    align-items:center;
  }
.nav-toggle svg{ width:18px; height:18px; display:block; }
@media (max-width:1119px){
    .nav-toggle{ display:inline-flex; }
    .header-row{ justify-content:flex-start; gap:10px; }
    .brand{ margin-right:auto; }
    nav.top{
      position:absolute;
      top:100%; left:0; right:0;
      display:none;
      flex-direction:column;
      align-items:stretch;
      gap:0;
      background:var(--parchment);
      border-bottom:1px solid var(--line);
      padding:6px 32px 14px;
      box-shadow:0 10px 24px rgba(24,28,26,0.08);
    }
    nav.top.open{ display:flex; }
    nav.top a{ padding:11px 0; border-bottom:1px solid var(--line); }
    nav.top a:last-child{ border-bottom:none; }
  }
/* Telefon genisligi: marka + hamburger + iletisim dugmesi 375px'e sigmiyor,
   sayfa yatay kayiyordu. Yalnizca baslik kucultuluyor; govde bosluklarina
   dokunulmuyor. Dokunma hedefleri 44px'in altina inmiyor. */
/* header.site ile niteleniyor: bazi sayfalar kendi <style> blogunda ayni
   siniflari duz haliyle yeniden tanimliyor ve site.css'ten sonra geldigi
   icin esit ozgullukte onu eziyor. */
@media (max-width:480px){
    header.site .wrap{ padding:0 16px; }
    /* Dar ekranda isaret masaustundekinden bir tik kucuk. Deger eskiden
       38px'ti; logo.png dolgulu oldugu icin o 38px'lik kutu 19px'lik bir
       cizim basiyordu. Dosya kirpilinca ayni deger masaustunu (36px) gecen
       bir isaret vermeye basladi; eski oran (19/22) korunarak 31px'e cekildi. */
    header.site .brand-mark{ height:31px; }
    /* 19px, 18 degil. Marka yazisi --seal ile 4.21:1 veriyor; WCAG'de kalin
       metin 18.66px'ten itibaren "buyuk metin" sayilir ve esigi 4.5 yerine 3.0
       olur. 18px'te bu bandin (381-480px) altinda kaliyordu; 481px ustunde
       zaten 21px oldugu icin sorun yoktu. Punto buyutuldu, marka rengi korundu:
       rengi degistirmek logonun vurgusunu tum sitede degistirirdi. */
    header.site .brand .mark{ font-size:19px; }
    header.site .brand .tagline{ font-size:9.5px; letter-spacing:0.1em; }
    header.site .header-cta{ padding:9px 13px; font-size:12px; }
  }
/* --------------------------------------------------------------------------
   DOKUNMA HEDEFLERI — mobilde denetim ogeleri en az 44px.
   WCAG 2.2 AA esigi 24x24 (2.5.8) ve mevcut 36-38px onu zaten geciyor;
   44px AAA (2.5.5) ve Apple/Material kilavuz degeri. Yani bu bir uyum
   duzeltmesi degil, parmakla isabet kolayligi.
   Kural zaten index.html'in kendi blogunda vardi ve dogru calisiyordu;
   diger 110 sayfaya hic gecmemisti. Buraya alindi.
   Kirilma noktalari bilerek mevcut olanlardan secildi (1119 ve 900); sitede
   zaten 24 ayri esik var, yenisi eklenmedi.
   Esik 1119: index'teki eski kural 780px kullaniyordu ama hamburger 1119px'ten
   itibaren goruntuleniyor — yani 781-1119 arasi kucuk kaliyordu. Kural artik
   dugmenin gorundugu her genislige uyuyor.
   -------------------------------------------------------------------------- */
@media (max-width:1119px){
    .nav-toggle{ min-width:44px; min-height:44px; justify-content:center; }
    .header-cta{ min-height:44px; display:inline-flex; align-items:center; }
    /* Icindekiler kutusunun acma basligi yalnizca 18px yuksekliginde bir
       satirdi; oysa kutuyu acip kapatan tek denetim o. ~79 makale sayfasi. */
    .icindekiler>summary{ min-height:44px; }
    /* Yalnizca button.btn niteleniyor: <a class="btn"> ogeleri inline-block ve
       zaten 44px'in uzerinde; min-height onlarda metni dikeyde ortalamadan
       kutuyu buyuturdu. Belge sayfalarinin yazdirma dugmeleri <button>. */
    button.btn{ min-height:44px; }
    /* Bu dordu ilk taramada gozden kacmisti: o tarama yalnizca button/.btn/
       select/summary/.chip sorguluyordu, duz <a> ogelerini hic olcmemisti.
       Hepsi flex ogesi oldugu icin min-height calisiyor; align-items ile
       metin dikeyde ortalaniyor, aksi halde kutu buyuyup yazi tepede kalirdi. */
    .brand{ min-height:44px; }
    footer .f-tel,
    footer .f-brand,
    footer .f-links a{ min-height:44px; display:inline-flex; align-items:center; }
    .toolbar .back{ min-height:44px; display:inline-flex; align-items:center; }
  }
/* Serit baglantilari sitenin birincil eylemleri (telefon, WhatsApp, e-posta);
   yukseklikleri 36px'ti. Serit bilincli olarak alcak tutulmustu, bu yuzden
   artis en aza indirildi: yalnizca min-height, dolgular oldugu gibi kaldi. */
@media (max-width:900px){
    .mh-bar a{ min-height:44px; }
  }
/* Cok dar ekranda marka yazisi dusuyor, AAG monogramu kaliyor. .brand'in
   aria-label'i durdugu icin baglantinin erisilebilir adi degismiyor. */
@media (max-width:380px){
    header.site .wrap{ padding:0 12px; }
    header.site .brand-text{ display:none; }
  }
/* Liste/kurumsal sayfa basligi (makaleler, ornek-belgeler, iletisim, kvkk).
   Dort sayfada dort ayri tanim vardi: ikisi yalnizca 2px alt bosluk, biri 6px
   kucuk punto, biri de Playfair ile ayrisiyordu. Playfair sitede baska hicbir
   baslikta kullanilmiyor (yalnizca logo), o yuzden cogunlugun degeri kanon
   kabul edildi. Kutunun kendi dolgusu ve .lede'si hala sayfa icinde. */
.page-head h1{
    font-family:'Bricolage Grotesque', sans-serif;
    font-weight:800;
    font-size:clamp(30px, 4.6vw, 48px);
    line-height:1.05;
    letter-spacing:-0.01em;
    color:var(--ink);
    margin:0 0 18px;
  }
main.article-main{padding:56px 0 20px;}
.article-wrap{max-width:760px;margin:0 auto;padding:0 32px;}
.crumbs{font-family:'Bricolage Grotesque',sans-serif;font-size:12px;color:var(--text-soft);margin:0 0 14px;}
/* --seal DEGIL --seal-text: 12px'lik kirinti metni acik zeminde --seal ile
   4.21:1 veriyordu, AA esigi 4.5. --seal-text ayni zeminde 5.71:1.
   Ayni gerekce .kicker icin de gecerliydi. */
.crumbs a{color:var(--seal-text);text-decoration:none;}
.art-badge{display:inline-block;font-family:'Bricolage Grotesque',sans-serif;font-size:11px;font-weight:600;
    letter-spacing:0.08em;text-transform:uppercase;color:var(--brass);
    border:1px solid rgba(91,103,95,0.4);border-radius:999px;padding:4px 11px;margin:0 0 14px;}
.article h1{font-family:'Bricolage Grotesque',Georgia,serif;font-weight:600;font-size:2.05rem;
    line-height:1.2;color:var(--ink);margin:0 0 8px;}
.son-guncelleme{display:inline-flex;align-items:center;gap:8px;font-family:'Bricolage Grotesque',sans-serif;
    font-size:12px;letter-spacing:0.04em;color:var(--text-soft);background:rgba(91,103,95,0.10);
    border:1px solid var(--line);border-radius:999px;padding:5px 12px;margin:6px 0 26px;}
.son-guncelleme svg{width:14px;height:14px;color:var(--seal);}
.son-guncelleme time{color:var(--ink);font-weight:500;}
.article{max-width:70ch;}
/* Egik cizgiyle birlesik uzun basliklar ("Onarim/Genisletme/Degistirme") dar
   ekranda tek kelime sayilip satira sigmiyor ve sayfayi yatay kaydiriyordu;
   tarayici "/" karakterinde kendiliginden bolmuyor. Punto kucultmek yerine
   sigmayan kelimenin bolunmesine izin veriliyor. */
.article h1, .article h2, .article h3{overflow-wrap:break-word;}
.article p{line-height:1.75;margin:0 0 1.05em;}
.article strong{color:var(--ink);}
.article a{color:var(--seal-text);text-decoration:underline;text-decoration-color:rgba(150,70,46,0.55);text-decoration-thickness:1.5px;
    text-underline-offset:2px;}
.article a:hover{color:var(--seal);text-decoration-color:var(--seal);}
.article ul{margin:0 0 1.1em;padding-left:1.3em;}
.article li{line-height:1.7;margin-bottom:0.5em;}
.article h2{font-family:'Bricolage Grotesque',Georgia,serif;font-weight:600;font-size:1.5rem;color:var(--ink);
    margin:2.4em 0 0.7em;padding-bottom:0.35em;position:relative;}
.article h2::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
    background:linear-gradient(90deg,var(--brass) 0 52px,rgba(91,103,95,0.28) 52px 100%);}
.article h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:0.98rem;letter-spacing:0.03em;
    color:var(--ink);margin:1.7em 0 0.4em;}
.faq{margin:0 0 1.1em;}
.faq-q{font-weight:600;color:var(--ink);margin:0 0 0.25em;}
.faq-a{margin:0 0 0.2em;}
.onemli{background:rgba(181,86,58,0.06);border:1px solid rgba(181,86,58,0.28);
    border-left:3px solid var(--seal);border-radius:2px;padding:14px 18px;margin:1.4em 0;line-height:1.62;}
/* Etiket ve vurgular --seal-text: kutunun kendi tonlu zemini (seal %6) uzerinde
   --seal yalnizca 3.91:1 veriyor, AA esigi 4.5. --seal-text ayni zeminde 5.3:1. */
.onemli::before{content:"ÖNEMLİ";display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:11px;
    font-weight:600;letter-spacing:0.1em;color:var(--seal-text);margin-bottom:6px;}
.onemli.bilgi{background:rgba(24,28,26,0.04);border-color:var(--line);border-left-color:var(--brass);}
.onemli.bilgi::before{content:"NOT";color:var(--brass);}
.article table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:0.95rem;}
.article th,.article td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top;}
.article th{background:rgba(24,28,26,0.04);color:var(--ink);font-family:'Bricolage Grotesque',sans-serif;font-weight:600;}
.article tr:nth-child(even) td{background:rgba(0,0,0,0.015);}
.madde-feragat{font-style:italic;color:var(--text-soft);font-size:0.95rem;
    border-top:1px solid var(--line);margin-top:2.4em;padding-top:1.2em;}
/* Icindekiler (ankor menu) — uzun makalelerde h1 altinda duran katlanabilir kutu */
.icindekiler{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--brass);
    border-radius:var(--radius);padding:14px 18px;margin:2em 0;}
.icindekiler>summary{font-family:'Bricolage Grotesque',sans-serif;font-size:11px;font-weight:600;
    letter-spacing:0.1em;text-transform:uppercase;color:var(--brass);cursor:pointer;
    list-style:none;display:flex;align-items:center;justify-content:space-between;}
.icindekiler>summary::-webkit-details-marker{display:none;}
.icindekiler>summary::after{content:"+";font-family:'IBM Plex Mono',monospace;font-size:15px;line-height:1;}
.icindekiler[open]>summary::after{content:"–";}
.icindekiler ol{columns:2;column-gap:30px;margin:14px 0 2px;padding-left:1.2em;font-size:0.94rem;}
.article .icindekiler li{margin:0 0 7px;line-height:1.45;break-inside:avoid;}
.article .icindekiler a{color:var(--text);text-decoration:none;
    border-bottom:1px solid transparent;transition:color 0.15s ease,border-color 0.15s ease;}
.article .icindekiler a:hover{color:var(--seal-text);border-bottom-color:currentColor;}
.article h2{scroll-margin-top:16px;}
/* Dar ekranda genis tablo sayfayi yatay kaydiriyordu; artik tablo kendi
   icinde kayiyor. Hucreler en uzun kelimenin altina inemedigi icin
   kucultmek yerine kaydirmak dogru cozum.
   .rates-table ayrica niteleniyor: arac sayfalarinda .article sarmalayicisi
   yok, o yuzden yalnizca ".article table" yazildiginda kapsam disinda kaliyor
   ve tablo sayfayi disari tasiriyordu (ornek: sure-takvimi). */
@media (max-width:520px){
    .article table, .rates-table, .doc-table{ display:block; overflow-x:auto; max-width:100%; }
  }
/* Izgara ogesinin varsayilan min-width:auto degeri, icindeki en uzun kelime
   hucreden genisse kutuyu disari tasirir. */
.card-grid > .card{ min-width:0; }
.card h3, .card p{ overflow-wrap:break-word; }
@media (max-width:640px){ .article-wrap{padding:0 18px;} .article h1{font-size:1.6rem;}
    /* Uzun icindekiler dar ekranda tum sayfayi yiyor; yuksekligi sinirlayip
       kendi icinde kaydiriyoruz. DIKKAT: burada "columns:1" KULLANILMAZ —
       cok sutunlu kutuda yukseklik siniri iceriyi asagi degil YANA tasirir ve
       maddelerin bir kismi gorunmez olur. "columns:auto" cok sutunu kapatir. */
    .icindekiler ol{columns:auto;max-height:42vh;overflow-y:auto;} }

/* ===== Makale sonu: ilgili yazilar + iletisim =====
   kaynak/makale-sonu.js tarafindan uretilir; elle duzenlenmez. */
.makale-sonu{margin:3.2em 0 0;}
.makale-sonu .ms-blok + .ms-blok{margin-top:26px;}
.article .makale-sonu h2.ms-h{font-family:'Bricolage Grotesque',sans-serif;font-size:12px;font-weight:600;
    letter-spacing:0.12em;text-transform:uppercase;color:var(--brass);
    margin:0 0 14px;padding:0 0 10px;border-bottom:1px solid var(--line);}
.article .makale-sonu h2.ms-h::after{display:none;}
.ms-liste{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);
    border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.article a.ms-yazi{display:block;background:var(--paper);padding:15px 17px;
    text-decoration:none;color:var(--text);transition:background 0.2s ease;}
.article a.ms-yazi:hover{background:#fff;}
.ms-yazi .ms-tur{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
    letter-spacing:0.1em;text-transform:uppercase;color:var(--brass);margin-bottom:5px;}
.ms-yazi .ms-ad{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:600;
    font-size:15.5px;line-height:1.35;color:var(--ink);margin-bottom:4px;
    border-bottom:1px solid transparent;transition:color 0.2s ease;}
.article a.ms-yazi:hover .ms-ad{color:var(--seal-text);}
.ms-yazi .ms-ozet{display:block;font-size:13.5px;line-height:1.5;color:var(--text-soft);}
.ms-iletisim{background:var(--dark);color:var(--parchment);border-radius:var(--radius);padding:22px 22px 20px;}
.article .ms-iletisim h2.ms-h{color:var(--brass-on-dark);border-bottom-color:rgba(238,240,238,0.18);}
.article .ms-iletisim p{color:rgba(238,240,238,0.82);font-size:14.5px;line-height:1.6;margin:0 0 16px;}
.ms-eylem{display:flex;flex-wrap:wrap;gap:10px;}
.article a.ms-btn{display:inline-flex;align-items:center;gap:9px;
    font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:600;letter-spacing:0.03em;
    text-decoration:none;color:var(--parchment);
    border:1px solid rgba(238,240,238,0.32);border-radius:var(--radius);
    padding:10px 16px;min-height:44px;box-sizing:border-box;
    transition:background 0.2s ease,border-color 0.2s ease,color 0.2s ease;}
.article a.ms-btn:hover{background:rgba(238,240,238,0.1);border-color:var(--parchment);color:#fff;}
.article a.ms-btn svg{width:16px;height:16px;flex-shrink:0;}
.article a.ms-btn-ana{background:var(--seal);border-color:var(--seal);color:#fff;}
.article a.ms-btn-ana:hover{background:var(--seal-koyu);border-color:var(--seal-koyu);color:#fff;}
@media (max-width:640px){
    .ms-eylem{flex-direction:column;align-items:stretch;}
    .article a.ms-btn{justify-content:center;}
  }

/* ===== Arac ve makale bilesenleri =====
   Bu kurallar daha once hesaplama araci / yol haritasi sayfalarinin
   icine ayri ayri kopyalanmisti; govdeleri her sayfada birebir ayniydi.
   Sayfadan sayfaya degisen kurallar yerinde birakildi. */
.arac-kutu{background:var(--paper);border:1px solid var(--line); border-left:3px solid var(--seal);border-radius:var(--radius); padding:18px 20px;margin:1.6em 0;}
.arac-kutu .ak-etiket{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--seal);display:block;margin-bottom:6px;}
.arac-kutu a{font-weight:600;}
.calc{background:var(--paper); border:1px solid var(--line); border-top:3px solid var(--seal); border-radius:var(--radius); padding:32px; margin:28px 0 12px; box-shadow:0 1px 0 rgba(24,28,26,0.04), 0 12px 30px -18px rgba(24,28,26,0.35);}
.deadline{background:var(--dark); color:var(--paper); border-radius:var(--radius); border-left:3px solid var(--seal); padding:20px 22px; margin:0 0 24px;}
/* Koyu kutulardaki vurgu metni. Bu iki kural yedi sayfada elle yazilmis iki
   ayri tonla (#FFB694 ve #F0C9C2) duruyordu; ikisi de ayni isi yapiyor. */
.deadline strong{ color:var(--seal-on-dark); }
.result .rr.warn span{ color:var(--seal-on-dark); }
.explain{margin:34px 0;}
.field:last-child{margin-bottom:0;}
.formula{font-family:'IBM Plex Mono', monospace; font-size:15px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; margin:14px 0; color:var(--ink);}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.hint{font-size:14px; color:var(--text-soft); margin:6px 0 0;}
.nav-row{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap;}
.opt:hover{border-color:var(--seal); border-left-color:var(--seal); background:#FFFCFA;}
.opts{display:flex; flex-direction:column; gap:10px;}
.q-hint{font-size:15px; color:var(--text-soft); margin:0 0 22px;}
.rates-table{width:100%; border-collapse:collapse; margin:14px 0; font-size:15px; background:var(--paper); border:1px solid var(--line);}
.res-title{font-family:'Bricolage Grotesque', Georgia, serif; font-weight:600; font-size:29px; line-height:1.16; color:var(--ink); margin:0 0 12px;}
.result{margin-top:26px; padding:26px; background:var(--dark); color:var(--paper); border-radius:var(--radius); border-left:3px solid var(--brass);}
/* Sonuc basligi. 14 hesaplama sayfasinda 26/32/34/36/38 diye bes ayri punto
   vardi. Olcunce bunun daginikliktan degil icerik uzunlugundan geldigi
   goruldu: bazi araclarin "sonucu" rakam degil cumle — "25 Temmuz 2027 ·
   kiracinin bildirim son gunu" gibi. Masaustunde 38px on dort sayfanin
   on ucunde tek satira sigiyor; dar ekranda ayni cumleyi 6 satira cikardigi
   icin 520px altinda 26px'e iniyor. Punto sayfa basina degil, ekran
   genisligine gore degisiyor — sabit istisna sinifina gerek kalmadi. */
.result .rbig{
    font-family:'Bricolage Grotesque', Georgia, serif;
    font-weight:600;
    font-size:38px;
    line-height:1.15;
    margin:0 0 4px;
  }
@media (max-width:520px){
    .result .rbig{ font-size:26px; }
  }
.seg{display:flex; gap:0; border:1px solid var(--brass); border-radius:var(--radius); overflow:hidden;}
.tag.belge{color:var(--brass); border-color:rgba(91,103,95,0.4);}
.tool{background:var(--paper); border:1px solid var(--line); border-top:3px solid var(--seal); border-radius:var(--radius); padding:32px; margin:28px 0 12px; box-shadow:0 1px 0 rgba(24,28,26,0.04), 0 12px 30px -18px rgba(24,28,26,0.35);}
.trail{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 20px;}
.xlinks{margin-top:34px; padding-top:24px; border-top:1px solid var(--line);}
.zblock{border-top:1px solid var(--line); padding-top:22px; margin-top:22px;}
.zdesc{font-size:14px; color:var(--text-soft); margin:0 0 18px;}
.ztitle{font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--seal); margin:0 0 4px;}
.arac-kutu p{margin:0;}
.deadline p{margin:0; font-size:16.5px; line-height:1.55;}
.explain h2{font-family:'Bricolage Grotesque', Georgia, serif; font-weight:600; font-size:24px; color:var(--ink); margin:0 0 12px;}
.explain h3{font-family:'Bricolage Grotesque', Georgia, serif; font-weight:600; font-size:19px; color:var(--ink); margin:22px 0 8px;}
.explain li{margin-bottom:7px;}
.explain p{margin:0 0 14px;}
/* .note kutusunun zemini de seal %6 tonu; ayni gerekceyle --seal-text.
   .note a burada tanimli: belge sayfalari .article kapsayicisi kullanmadigi
   icin ".article a" kurali oralara ulasmiyordu ve 19 sayfa kendi kopyasini
   tasiyordu. */
.note strong{color:var(--seal-text);}
.note a{color:var(--seal-text);}
.opt .ot{display:block; font-size:17px; font-weight:600; color:var(--ink); line-height:1.35;}
.rates-table td.mono{font-family:'IBM Plex Mono', monospace; white-space:nowrap;}
.rates-table th{font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.8px; text-transform:uppercase; color:var(--ink); background:var(--parchment);}
.res h3{font-family:'Bricolage Grotesque', Georgia, serif; font-weight:600; font-size:19px; color:var(--ink); margin:26px 0 12px;}
.res-cta strong{color:var(--ink);}
.res-links .ld{display:block; font-weight:400; font-size:14.5px; color:var(--text-soft); margin-top:2px;}
.res-links a{text-decoration:none; font-weight:600;}
.res-links li:last-child{border-bottom:none;}
.res-links ul{margin:0; padding:0; list-style:none;}
.result .rexplain{margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,0.16); font-size:14px; line-height:1.55; opacity:0.92;}
.result .rlabel{font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:1.2px; text-transform:uppercase; opacity:0.7; margin:0 0 6px;}
.result .rrows{margin-top:18px; border-top:1px solid rgba(255,255,255,0.16); padding-top:16px;}
.seg button{flex:1; padding:11px 10px; font-family:'IBM Plex Mono', monospace; font-size:13px; letter-spacing:0.5px; background:transparent; color:var(--ink); border:none; cursor:pointer; transition:background .15s, color .15s;}
.seg button.active{background:var(--dark); color:var(--paper);}
.steps li{counter-increment:s; position:relative; padding:0 0 14px 38px; font-size:16px; line-height:1.55;}
.steps li:last-child{padding-bottom:0;}
.trail button{font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.3px; background:var(--parchment); color:var(--text-soft); border:1px solid var(--line); border-radius:var(--radius); padding:5px 9px; cursor:pointer; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .15s, border-color .15s;}
.trail button::before{content:"↩ "; color:var(--seal);}
.warn strong{color:var(--seal-text);}
.xlinks h2{font-family:'Bricolage Grotesque', Georgia, serif; font-weight:600; font-size:20px; color:var(--ink); margin:0 0 14px;}
.xlinks li{padding:7px 0; border-bottom:1px dashed var(--line);}
.xlinks ul{margin:0; padding:0; list-style:none;}
.result .rexplain strong{color:var(--paper);}
.result .rr span:first-child{opacity:0.78;}
.xlinks li a{text-decoration:none;}
.xlinks li a:hover{text-decoration:underline;}
.rates-table th, .rates-table td{text-align:left; padding:10px 14px; border-bottom:1px solid var(--line);}
.seg button + button{border-left:1px solid var(--brass);}


/* ===== "Icerige atla" baglantisi =====
   Klavye ve ekran okuyucu kullanicilari icin. Header yapiskan ve altinda
   mh-bar var; bu baglanti olmadan her sayfada ~10 baglantiyi gecmek gerekiyordu.
   Gorunmez durur, yalnizca odaklaninca ekrana iner. z-index header (50) ve
   wa-float (60) uzerinde olmali ki ustlerine cikabilsin. */
.skip-link{
  position:fixed; left:12px; top:-56px; z-index:200;
  background:var(--seal); color:var(--seal-text);
  padding:10px 18px; border-radius:var(--radius);
  font-weight:600; text-decoration:none; font-size:14px;
  box-shadow:0 6px 20px rgba(0,0,0,0.18);
  transition:top .16s ease;
}
.skip-link:focus{ top:12px; }
/* Odak hedefi ana icerik; tabindex="-1" verildigi icin odak halkasi gerekmiyor. */
main:focus{ outline:none; }