/* ═══════════════════════════════════════════════════════════════════════════
   STİL A · "SICAK KİL" — Editorial Luxury arketipi (high-end-visual-design §3.A.2)
   Zemin: sıcak kâğıt · tek eylem rengi: terracotta · başlık: serif · kartlar: çift çerçeve (double-bezel)
   Menü: yüzen ada (§5.A) · SSS/il listesi: kart değil ince çizgili satır (taste §4.4)
   Palet neden bu: kullanıcı 14.09'da bakır/kırmızı tonu beğendi, zemin renkli istedi;
   taste-skill bej+pirinç yasağını bilerek aştık (brief kazanır — impeccable "the brief wins").
   Şekil kilidi: buton = hap · kart = 18 · giriş alanı = 12 · rozet = hap
   ═══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
@import url('/stil/stil-ortak.css');

:root{
  --fd:"Cormorant Garamond",Georgia,serif;          /* display */
  --fb:"Plus Jakarta Sans",system-ui,sans-serif;    /* body */
  /* kesfet.html'in kendi değişken adları — tek eylem rengi terracotta'ya YENİDEN BAĞLANDI */
  --teal:#B8432A; --teal-deep:#8E3320; --teal-soft:#C9603F; --ghost:#F3E3D6; --teal-hafif:#F8ECE3;
  --coral:#B8432A; --coral-deep:#8E3320; --coral-btn:#8E3320;             /* ikinci vurgu YOK: tek vurgu kilidi */
  --ivory:#F4EBDF; --cream:#FFFBF5; --tepsi:#EADCCB;                        /* zemin · yüzey · çerçeve tepsisi */
  --gold:#B58A4A; --ink:#2B1F17; --mut:#7A6659; --mut-acik:#A08D80;
  --line:#E3D2C2; --line-koyu:#CDB7A3;
  --green:#3E7C5A; --red:#9E2B2B;
  --rad:18px; --rad-s:12px;
  --shadow:0 34px 70px -30px rgba(74,40,20,.45);
  --shadow-s:0 12px 28px -16px rgba(74,40,20,.28);
  --golge-kart:0 1px 2px rgba(74,40,20,.06),0 10px 24px -14px rgba(74,40,20,.22);
  --hat:1px solid var(--line);
}

/* ── Tipografi (kesfet iç sayfası ~40 yerde Manrope yazıyor → !important zorunlu) ── */
:where(body *:not(svg):not(svg *)){font-family:var(--fb)!important}   /* :where → özgüllük 0, başlık kuralı üstüne yazabilsin */
body{background:var(--ivory);color:var(--ink);font-size:15.5px}
h1,h2,h3,.date .dd,.rdv-bas h1,.rdv-b h2,.bas-hak h2,.blok-b h2,.modal h2,.usta-p h2,.sec-head.sm h2,.owner h2,.adim .no{
  font-family:var(--fd)!important;font-weight:600;letter-spacing:-.005em}
.bas-kart h1{font-size:clamp(36px,5.2vw,54px);line-height:1}
.sec-head.sm h2{font-size:30px;font-weight:600}
.sec-head h2{font-size:clamp(28px,3.4vw,40px)}
.rdv-bas h1{font-size:34px}
.rdv-b h2,.blok-b h2,.bas-hak h2{font-size:26px}
.modal h2{font-size:30px}
.date .dd{font-size:23px;font-weight:700;font-variant-numeric:normal}   /* Cormorant'ta tabular rakam aralığı çok geniş */
.biz .bd h3,.adim h3,.bos h3,.review .who,.wait .wi b{font-family:var(--fb)!important;font-weight:700;letter-spacing:0}   /* küçük boyda serif okunmaz → gövde fontu */
.eyebrow,.eyebrow-s,.owner .eb,footer h4,.field-t,.svc-lead,.slot-g,.grup-b i,.bilgi b{color:var(--teal);letter-spacing:.14em;font-weight:700}
.eyebrow-s,.svc-lead,.field-t,.slot-g{color:var(--mut)}

/* ── Menü: yüzen ada (high-end §5.A "Fluid Island Nav") ── */
header{background:transparent;border-bottom:0;backdrop-filter:none;padding:12px 0 4px}
header nav.wrap{height:60px;background:rgba(255,251,245,.9);border:1px solid var(--line);border-radius:999px;
  padding:0 10px 0 18px;box-shadow:var(--shadow-s);backdrop-filter:saturate(140%) blur(10px);max-width:calc(var(--maxw) - 48px)}
.brand{color:var(--ink);font-weight:800}
.brand img{border-radius:50%;box-shadow:none;border:1px solid var(--line)}
.hdr-appts,.hamburger{border-color:var(--line);color:var(--ink);border-radius:999px}

/* ── Butonlar: hap + "buton içinde buton" ikon (high-end §4.B) ── */
.btn{border-radius:999px;font-weight:700;padding:12px 22px}
.btn-teal{background:var(--teal);color:#fff;box-shadow:0 14px 26px -14px rgba(184,67,42,.65),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-teal:not(:disabled):hover{background:var(--teal-deep)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-koyu)}
.btn-ghost:hover{border-color:var(--ink);background:var(--cream)}
.btn-teal .ik,.cta-btn .ik{width:26px;height:26px;padding:5px;border-radius:50%;background:rgba(255,255,255,.18);margin:-4px -8px -4px 0;
  transition:transform var(--sure-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.btn-teal:hover .ik,.cta-btn:hover .ik{transform:translate(2px,-1px) scale(1.05)}}
.qbtn,.ftab,.chip,.kat-serit .ks,.svc-chip,.seo .il,.ara{background:var(--cream);border-color:var(--line);color:var(--ink);border-radius:999px}
.qbtn{color:var(--ink)}
.qbtn.sel,.ftab.sel,.chip.sel,.kat-serit .ks.sel{background:var(--teal);border-color:var(--teal);color:#fff}
.svc-ek{border-color:var(--teal);color:var(--teal);background:transparent;border-radius:999px}
.biz .cta-btn{background:var(--teal);border-color:var(--teal);color:#fff;border-radius:999px;padding:8px 10px 8px 16px}
.biz .ara{border-color:var(--line-koyu)}

/* ── Ana sayfa üstü: mağaza rozetleri düz yüzey (mint gradyan kalktı), arama pil ── */
.home-top{background:transparent;border-bottom:0;padding-top:8px}
.mgz,footer .magaza a{background:var(--cream);border:1px solid var(--line);color:var(--ink);border-radius:999px;box-shadow:none}
.mgz small,footer .magaza a small{color:var(--mut)}
.mgz:hover,footer .magaza a:hover{box-shadow:var(--shadow-s);filter:none;border-color:var(--line-koyu)}
.home-search{background:var(--cream);border:1px solid var(--line);border-radius:999px;box-shadow:none;padding:0 22px}
.home-search:focus-within{border-color:var(--teal);box-shadow:0 0 0 4px rgba(184,67,42,.10)}
.sug,.svc-panel,.locpanel,.nav-dd-m{background:var(--cream);border-color:var(--line);box-shadow:var(--shadow);border-radius:18px}
.nav-dd-m a i,.sug .si .tg,.locpanel .ci .n{background:var(--ghost);color:var(--teal)}

/* ── Kategori kutuları: çerçevesiz yüzey, tepsi içinde fotoğraf ── */
.cat-ic{background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:6px}
.cat-ic .ci-em{border-radius:13px;background:var(--tepsi)}
.cat-ic .ci-em img{filter:saturate(1.05) contrast(1.02)}
.cat-ic .ci-b{padding:12px 4px 8px}
.cat-ic .ci-n{background:var(--ghost);color:var(--teal)}
.cat-ic:hover{border-color:var(--line-koyu);box-shadow:var(--golge-kart)}

/* ── İşletme kartları (coverflow + ızgara): çift çerçeve ── */
.biz{background:var(--cream);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 0 0 5px rgba(234,220,203,.55),var(--golge-kart)}
.biz .cov{margin:6px 6px 0;border-radius:13px;overflow:hidden}
.biz .cov img{filter:saturate(1.1) contrast(1.03)}
.biz .cov .badge{background:rgba(255,251,245,.94);color:var(--teal)}
.biz .bd h3{font-weight:700;font-size:17px}
.biz .fiyat b,.biz .price{color:var(--teal)}
.biz .rating{color:var(--gold)}
.cf-stage>.biz.cf-c{box-shadow:0 0 0 5px rgba(234,220,203,.7),0 26px 54px -20px rgba(74,40,20,.45)}
.cf-stage>.biz.cf-1{box-shadow:0 0 0 5px rgba(234,220,203,.5),0 16px 34px -20px rgba(74,40,20,.3)}
.cf-stage>.biz.cf-2{box-shadow:0 0 0 5px rgba(234,220,203,.4),0 10px 24px -18px rgba(74,40,20,.2)}
.cf-btn{background:var(--cream);border:1px solid var(--line);color:var(--ink)}
.cf-btn:hover{border-color:var(--ink)}
.cf-dot{background:var(--line-koyu)} .cf-dot.on{background:var(--teal)}
.fav{background:rgba(255,251,245,.94);color:var(--mut)} .fav:hover{color:var(--teal)}
.open.yes{background:var(--green)} .open.no{background:var(--red)}
.biz .onay.hemen{background:rgba(62,124,90,.14);color:#2E6446}
.biz .onay.bekle,.bas-alt .onay.bekle{background:rgba(181,138,74,.18);color:#7A5A2A}
.demo-chip{color:#7A5A2A;background:rgba(181,138,74,.14)}
.demo-not{background:#F7E9CC;border-color:#E6CF9E;color:#5E4210;border-radius:12px}

/* ── "İşletmeler için" bloğu: koyu blok YOK (taste §4.11 tema kilidi) → aynı paletin derin kumu ── */
.owner{background:var(--tepsi);color:var(--ink);border:1px solid var(--line-koyu);border-radius:22px;padding:56px 48px}
.owner::after{background:radial-gradient(70% 110% at 100% 0%,rgba(184,67,42,.14) 0%,transparent 60%)}
.owner .eb{color:var(--teal)}
.owner h2{color:var(--ink);font-size:clamp(32px,4vw,46px);font-weight:600;max-width:22ch}
.owner .ol{color:var(--mut)}
.owner .oz{background:rgba(255,251,245,.72);border:1px solid var(--line);color:var(--ink);border-radius:12px}
.owner .oz .ik{color:var(--teal)}
.owner .obtn{background:var(--teal);color:#fff;border-radius:999px;box-shadow:0 14px 26px -14px rgba(184,67,42,.65)}
.owner .obtn:hover{background:var(--teal-deep);box-shadow:0 16px 30px -14px rgba(184,67,42,.7)}
.owner .oalt{color:var(--mut)} .owner .oalt a{color:var(--ink);border-bottom-color:var(--line-koyu)}

/* ── İl listesi · Nasıl çalışır · SSS: kart değil, ince çizgili editoryal satırlar ── */
.seo .sd,.sss details{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0;padding:0;box-shadow:none}
.seo .sd[open],.sss details[open]{box-shadow:none;border-color:var(--line)}
.seo .sd>summary,.sss summary{padding:0 4px;min-height:60px;font-size:16px;font-weight:600}
.seo .sd>summary:hover,.sss summary:hover{color:var(--teal)}
.seo .il-liste{padding:0 4px 20px}
.seo .il{background:var(--cream);border-color:var(--line)}
.seo .il b{background:var(--teal)}
.sss .cvp{padding:0 4px 20px}
.adimlar{gap:0;border-top:1px solid var(--line)}
.adim{background:transparent;border:0;border-right:1px solid var(--line);border-radius:0;padding:28px 24px 28px 0;margin-right:24px}
.adim:last-child{border-right:0;margin-right:0}
.adim .no{width:auto;height:auto;background:none;color:var(--teal);font-size:40px;font-weight:600;line-height:1;margin-bottom:12px;display:block}
.adim h3{font-weight:700;font-size:17px}
.bos{background:var(--cream);border:1px dashed var(--line-koyu)}
.bos .ik{color:var(--teal)}

/* ── Salon sayfası ── */
.crumb{color:var(--mut)}
.gal{padding:6px;background:var(--tepsi);border-radius:22px;box-shadow:var(--golge-kart);border:1px solid var(--line)}
.gal-r{border-radius:16px;overflow-x:auto;overflow-y:hidden}   /* 20.09: overflow:hidden yatay kaydırmayı öldürüyordu (kullanıcı telefonda fark etti) */
.gal-r figure{background:var(--tepsi);height:clamp(250px,34vw,420px)}
.gal-ok,.gal-fav,.gal-pay,.gal-geri{background:rgba(255,251,245,.94);color:var(--ink)}
.gal-say{background:rgba(43,31,23,.72)}
.bas-alt .onay.hemen{background:rgba(62,124,90,.14);color:#2E6446}
.bas-adres{background:var(--ghost);border-radius:12px;color:var(--ink)} .bas-adres:hover{background:#EED9C8}
.bas-adres .ik{color:var(--teal)}
.bas-eylem a{background:var(--cream);border:1px solid var(--line);border-radius:14px;color:var(--ink)}
.bas-eylem a:hover{border-color:var(--teal);color:var(--teal)}
.bas-yeni,.bas-hak-dev,.blok-b a,.rdv-ekle,.bilgi a{color:var(--teal)}
.svc-kat{background:var(--cream);border:1px solid var(--line);border-radius:14px}
.svc-kat.acik{box-shadow:var(--golge-kart)}
.svc-kat-b{background:var(--cream)}
.svc-kat-b .kic{background:var(--ivory);box-shadow:none;border:1px solid var(--line)}
.sline2{background:var(--cream);border:1px solid var(--line);border-radius:12px}
.sline2:hover{border-color:var(--line-koyu)}
.sline2.sel{border-color:var(--teal);background:var(--teal-hafif)}
.sline2 .sthumb.ph,.sthumb.ph{background:var(--ghost)} .sthumb.ph .ik{color:var(--teal)}
.svc-daha{border-color:var(--line-koyu);color:var(--teal);border-radius:12px}
.svc-daha:hover{background:var(--teal-hafif);border-color:var(--teal)}
.dcard,.rdv-kart,.book-card,.review{background:var(--cream);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 0 0 6px rgba(234,220,203,.55),var(--golge-kart)}
.review{box-shadow:none;border-radius:14px}
.ozet{background:var(--ivory);border:1px solid var(--line);border-radius:12px}
.ozet-sat{border-bottom-color:var(--line)} .ozet-top{border-top-color:var(--line-koyu)}
.saat-t td{border-bottom:1px solid var(--line)} .saat-t tr.bugun td{color:var(--teal)}
.ekip-k .av,.ekip-k .hepsi{background:var(--ghost);color:var(--teal);border-color:var(--line)}
.ekip-k .sahip{background:var(--teal)}
.ekip-i{border-color:var(--line);color:var(--teal);background:var(--cream)}
.svc.sel,.sline.sel{background:var(--teal-hafif)} .svc.sel{border-color:var(--teal)}
.svc .pr,.pr .p-old+.p-new{color:var(--teal)}
.svc .chk,.sline .chk{border-color:var(--line-koyu);border-radius:50%}
.type-chip,.bilgi .bi,.grup-b i,.slot-g b,.svc-cat .cat-t .g,.notice,.rdv-bilgi{background:var(--ghost);color:var(--teal)}
.rdv-bilgi{color:var(--mut);border-radius:12px}
.salon-cubuk{background:rgba(255,251,245,.94);border-top:1px solid var(--line);backdrop-filter:blur(10px)}

/* ── Randevu oluştur: adım rozetleri, tarih/saat hücreleri ── */
.rdv-geri{background:var(--cream);border-color:var(--line);color:var(--ink)}
.rdv-b b{background:var(--teal);width:30px;height:30px;font-family:var(--fb)!important;font-size:14px;font-weight:800}
.date{background:var(--cream);border-color:var(--line);border-radius:12px;width:64px}
.date:hover{border-color:var(--line-koyu)}
.date.sel{background:var(--teal);border-color:var(--teal);color:#fff}
.date .dn{font-size:10.5px;letter-spacing:.06em}
.slot{background:var(--cream);border-color:var(--line);border-radius:999px;font-weight:600}
.slot:hover{border-color:var(--ink)}
.slot.sel{background:var(--teal);border-color:var(--teal);color:#fff}
.slot.closed{background:var(--ghost);color:var(--mut-acik)}
.slot-banner.ok{background:rgba(62,124,90,.12);color:var(--green)} .slot-banner.no{background:rgba(158,43,43,.1);color:var(--red)}
.wait{background:var(--ghost);border-color:var(--line)} .wait.on{background:rgba(62,124,90,.10);border-color:rgba(62,124,90,.4)}
.grup+.grup{border-top-color:var(--line)}
.ipucu{color:var(--mut)}

/* ── Giriş penceresi (modal) ── */
.modal-bg{background:rgba(43,31,23,.55)}
.modal{background:var(--cream);border-radius:22px;border:1px solid var(--line);
  box-shadow:0 0 0 8px rgba(234,220,203,.55),var(--shadow)}
.modal input,.modal textarea,.locpanel .il-ara,.svc-panel .sp-s{background:#fff;border:1px solid var(--line-koyu);border-radius:12px}
.modal input:focus,.modal textarea:focus{outline:2px solid var(--teal);border-color:transparent}
.modal label{color:var(--ink)}
.modal .x{color:var(--mut)}
.phone-wrap .cc{background:var(--ivory);border-color:var(--line-koyu);color:var(--ink);border-radius:12px}
.gbtn{border-color:var(--line-koyu);border-radius:12px;background:#fff}
.modal .ok-ic{background:var(--green)}
.empty .em .ik{color:var(--teal)}
.sk{background:linear-gradient(90deg,#EFE4D6,#F8F0E6,#EFE4D6);background-size:200% 100%}

/* ── Alt bilgi: kâğıt üstünde, koyu blok yok ── */
footer{background:var(--tepsi);color:var(--mut);border-top:1px solid var(--line-koyu)}
.fbrand{color:var(--ink)} .fbrand img{border-radius:50%}
.f-g p.fp,footer h4{color:var(--mut)}
footer .f-g a{color:var(--ink)} footer .f-g a:hover{color:var(--teal)}
.f-alt{border-top-color:var(--line-koyu);color:var(--mut)}

/* ── Sayfa yüklenince tek seferlik kademeli giriş (frontend-design: "one orchestrated page load") ── */
@media (prefers-reduced-motion:no-preference){
  #view>.wrap>*:not(.cf):not(.rail){animation:stilA-gel 520ms var(--ease-out) both}
  #view>.wrap>*:nth-child(2){animation-delay:50ms} #view>.wrap>*:nth-child(3){animation-delay:100ms}
  #view>.wrap>*:nth-child(4){animation-delay:150ms} #view>.wrap>*:nth-child(n+5){animation-delay:200ms}
  @keyframes stilA-gel{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}