/* UM SPOT — Blog & iç sayfa stilleri (ana sayfaya dokunmadan) */
/* vault.css üzerine eksik class'ları tamamlar */

:root{
  --void:#05070d;
  --gold:#c8a04f;
  --gold-hi:#f0d79a;
  --ink:#eef1f7;
  --ink-dim:rgba(238,241,247,.58);
  --line:rgba(200,160,79,.18);
  --teal:#2dd4bf;
  --ease:cubic-bezier(.16,1,.3,1);
}

body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:"Inter",system-ui,sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Nav — ana sayfadaki ile aynı görünüm */
#nav{
  position:fixed;top:0;left:0;width:100%;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(20px,4vw,54px);
  background:rgba(5,7,13,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
#nav .brand{
  display:flex;align-items:center;gap:10px;
  color:var(--ink);text-decoration:none;font-size:20px;font-weight:300;letter-spacing:.02em;
}
#nav .brand b{font-weight:700;color:var(--gold)}
#nav .brand .dot{width:10px;height:10px;border-radius:50%;background:var(--teal);box-shadow:0 0 12px var(--teal)}
#nav .links{display:flex;gap:28px;list-style:none;margin:0;padding:0}
#nav .links a{color:var(--ink-dim);text-decoration:none;font-size:14px;transition:.3s var(--ease)}
#nav .links a:hover{color:var(--ink)}
/* vault.css'teki @media(max-width:900px){.links{display:none}} kuralı, bu
   dosyadaki "#nav .links" seçicisinin ID spesifikliği yüzünden eziliyordu —
   medya sorgusu spesifiklik eklemez. Alt sayfalarda hamburger markup'ı da yok,
   yani gizlemek menüyü tamamen erişilemez yapardı: 375px'te liste 532px'e
   çıkıp ekran dışına taşıyordu. Çözüm, ikinci satıra alıp sığdırmak. */
@media (max-width:900px){
  #nav{flex-wrap:wrap;row-gap:10px}
  #nav .links{
    order:3;width:100%;flex-wrap:wrap;justify-content:center;
    column-gap:16px;row-gap:6px;
  }
  #nav .links a{font-size:12px;white-space:nowrap}
}
#nav .cta{
  background:var(--gold);color:#0a0a0a;padding:11px 22px;border-radius:100px;
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  transition:.4s var(--ease);
}
#nav .cta:hover{background:var(--gold-hi)}

/* İçerik konteynerleri */
.inner{max-width:1180px;margin:0 auto}
.inner.left{text-align:left}
.inner.center{text-align:center}

/* Başlıklar */
.display{font-family:"Playfair Display",serif;font-weight:500;line-height:1.02;letter-spacing:-.02em}
.display.sm{font-size:clamp(32px,5.6vw,68px)}
.eyebrow{
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--teal);margin:0 0 14px;font-weight:600;
}
.section-title{
  font-family:"Playfair Display",serif;
  font-size:clamp(26px,3.4vw,40px);
  font-weight:600;color:var(--ink);
  margin:0 0 18px;line-height:1.15;letter-spacing:-.01em;
}
.lede{font-size:clamp(16px,1.5vw,19px);color:var(--ink-dim);line-height:1.85}

/* Butonlar */
.btn{padding:15px 34px;border-radius:100px;font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;transition:.5s var(--ease);
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer;border:none}
.btn.gold{background:var(--gold);color:#0a0a0a}
.btn.gold:hover{background:var(--gold-hi)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold)}
.acts{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}

/* Footer */
.foot{
  border-top:1px solid var(--line);
  padding:48px 6vw;text-align:center;
  display:flex;flex-direction:column;gap:14px;align-items:center;
  color:var(--ink-dim);font-size:13px;
}
.foot .fmark{font-size:22px;font-weight:300;color:var(--ink);letter-spacing:.02em}
.foot .fmark b{font-weight:700;color:var(--gold)}
.foot a{color:var(--teal);text-decoration:none}

/* Kategori listesi */
.cat-list li{list-style:none}

/* Detay (SSS) */
details{border-bottom:1px solid rgba(255,255,255,.06);padding:16px 0}
summary{cursor:pointer;font-weight:600;font-size:17px;color:var(--ink)}
details p{color:var(--ink-dim);line-height:1.9;margin-top:12px}

/* Blog görselleri */
img{max-width:100%}

/* ---- Yazı gövdesi ---- */
.prose p{color:var(--ink-dim);line-height:1.9;margin:0 0 14px;font-size:16.5px}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink);font-weight:600}
/* Govde ici baglantilar. vault.css'teki genel `a{color:inherit;text-decoration:none}`
   kurali yuzunden yazi icindeki linkler duz metinden hic ayrismiyordu.
   .related bir kart izgarasi, satir ici link degil — disarida birakiliyor.
   .hz-not ise .prose disinda, form dipnotunda; o yuzden ayrica yaziliyor. */
.prose p a,.prose ul:not(.related) li a,.prose ol li a,.note a,.hz-not a{
  color:var(--gold);text-decoration:underline;
  text-decoration-color:rgba(200,160,79,.4);text-underline-offset:3px;
  transition:text-decoration-color .3s var(--ease);
}
.prose p a:hover,.prose ul:not(.related) li a:hover,
.prose ol li a:hover,.note a:hover,.hz-not a:hover{text-decoration-color:var(--gold)}
.prose ul{margin:2px 0 16px;padding:0;list-style:none}
.prose ul li{
  position:relative;padding-left:22px;margin-bottom:9px;
  color:var(--ink-dim);line-height:1.8;font-size:16px;
}
.prose ul li::before{
  content:"";position:absolute;left:3px;top:12px;
  width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:.75;
}
.prose ul li strong{color:var(--ink)}
.prose h3{
  font-size:17px;font-weight:600;color:var(--ink);
  margin:20px 0 8px;letter-spacing:-.01em;
}

/* Yazı bölümü başlığı */
.post-sec{padding:22px 6vw;max-width:820px;margin:0 auto}
.post-sec h2{font-size:clamp(22px,2.6vw,28px);margin:0 0 12px}


/* Yazı künyesi */
.post-meta{
  font-size:13px;color:var(--ink-dim);margin:18px 0 0;
  display:flex;gap:8px 18px;flex-wrap:wrap;align-items:center;
  border-top:1px solid var(--line);padding-top:14px;
}

/* Vurgu kutusu */
.note{
  border-left:2px solid var(--gold);background:rgba(200,160,79,.06);
  padding:16px 20px;border-radius:0 10px 10px 0;margin:18px 0 4px;
}
.note p{margin:0;color:var(--ink-dim);line-height:1.85;font-size:15.5px}
.note p+p{margin-top:10px}

/* İlgili rehberler */
.related{
  display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  margin:18px 0 0;padding:0;list-style:none;
}
.related a{
  display:block;padding:16px 18px;border:1px solid var(--line);border-radius:12px;
  color:var(--ink);text-decoration:none;background:rgba(255,255,255,.02);
  transition:.35s var(--ease);height:100%;
}
.related a:hover{border-color:var(--gold);background:rgba(200,160,79,.06)}
.related b{display:block;font-weight:600;font-size:15px;margin-bottom:5px}
.related span{display:block;color:var(--ink-dim);font-size:13px;line-height:1.6}

/* ---- Kategori ve bölge sayfaları ---- */
/* Yazı bölümleriyle aynı tipografi, ama kart ızgarasına yer bırakan geniş kap */
.cat-sec{padding:22px 6vw;max-width:1100px;margin:0 auto}
.cat-sec h2{font-size:clamp(22px,2.6vw,28px);margin:0 0 12px}
.cat-sec.prose p,.cat-sec.prose ul,.cat-sec .note,.cat-sec.prose ol{max-width:760px}

/* Numaralı süreç listesi */
.prose ol{margin:2px 0 16px;padding-left:20px}
.prose ol li{color:var(--ink-dim);line-height:1.85;margin-bottom:9px;font-size:16px}
.prose ol li strong{color:var(--ink)}

/* Kategori kartları — satır içi stilin yerine tek yer */
/* .prose ul kuralları kart ızgarasını bozmasın diye burada geri alınır */
.cat-list,.prose ul.cat-list{
  list-style:none;padding:0;margin:16px 0 0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.cat-list li,.prose ul.cat-list li{
  border:1px solid var(--line);border-radius:14px;padding:16px 18px;
  background:rgba(255,255,255,.02);color:var(--ink-dim);
  font-size:15px;line-height:1.6;margin-bottom:0;position:static;
}
.cat-list li::before,.prose ul.cat-list li::before{content:none}
.cat-list li b{display:block;color:var(--ink);font-weight:600;font-size:15px;margin-bottom:4px}

/* Diğer kategori rozetleri */
.chips{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.chips a{
  border:1px solid var(--line);border-radius:100px;padding:10px 22px;
  color:var(--ink);text-decoration:none;font-size:14px;
  transition:.35s var(--ease);
}
.chips a:hover{border-color:var(--gold);color:var(--gold)}

/* Hizli teklif formu — bolge, kategori ve niyet sayfalarinda gomulu */
.hz-form{margin-top:24px;display:grid;gap:14px;max-width:760px}
.hz-form label{display:grid;gap:6px}
.hz-form label>span:first-child{
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--gold);
}
.hz-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
/* Dort alanli bolge formu: 3+1 yerine 2x2 dursun */
.hz-row.hz-4{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.hz-form input[type=text],.hz-form input[type=tel],.hz-form select,.hz-form textarea{
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;
  padding:13px 14px;color:var(--ink);font:inherit;font-size:15px;width:100%;
  transition:border-color .35s var(--ease);
}
.hz-form textarea{resize:vertical;line-height:1.6}
.hz-form input:focus-visible,.hz-form select:focus-visible,.hz-form textarea:focus-visible{
  outline:none;border-color:var(--gold);
}
.hz-form select option{background:var(--void);color:var(--ink)}
.hz-hp{display:none}
.hz-form label.hz-kvkk{
  display:flex;gap:10px;align-items:flex-start;
  font-size:13px;color:var(--ink-dim);line-height:1.55;
}
.hz-kvkk input{margin-top:3px;accent-color:var(--gold);width:17px;height:17px;flex:none}
.hz-kvkk a{color:var(--gold)}
.hz-acts{margin-top:6px;align-items:center;gap:14px;flex-wrap:wrap}
.hz-form button[type=submit]{border:0;cursor:pointer;font:inherit;font-weight:600}
.hz-form button[disabled]{opacity:.55;cursor:default}
.hz-durum{font-size:14px;color:var(--ink-dim)}
.hz-not{font-size:13px;color:var(--ink-dim);line-height:1.6;margin:4px 0 0;max-width:640px}

/* Kırıntı yolu — BreadcrumbList şemasının ekrandaki karşılığı.
   Eskiden <p class="crumbs"> idi; nav/ol/li'ye taşındı ki tarayıcı ve ekran
   okuyucu bunu gerçek bir gezinme listesi olarak görsün. Renk ve ayraç
   bilerek eskisiyle aynı — bu adım semantik, görsel değil.
   vault.css'te a{color:inherit} olduğu için renk açıktan veriliyor. */
.krumbs{margin:0 0 16px}
.krumbs ol{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  list-style:none;margin:0;padding:0;
  font-size:13px;color:var(--ink-dim);
}
.krumbs li{display:flex;align-items:center;gap:8px;min-width:0}
.krumbs li+li::before{content:"›";opacity:.35}
.krumbs a{color:var(--teal);text-decoration:none}
.krumbs a:hover{text-decoration:underline}
.krumbs a:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:2px}
/* Dar ekranda son basamak uzunsa satırı taşırmasın */
@media (max-width:560px){
  .krumbs [aria-current="page"]{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:58vw;
  }
}