/* ==========================================================================
   ESSE VIP — ONAYLANAN MOBİL MOCKUP
   --------------------------------------------------------------------------
   ÖLÇÜLER: yeniarayuz.png referansından 460px genişlik için birebir alınmıştır.
   Referansta bölüm üst kenarları (px):
     topbar 10 · logo 14 · başlık 175 · ayraç 255 · güven şeridi 265
     kampanya bandı 338 · butonlar 418 · kartlar 475 · Türkiye 655 · şerit 810
   Bu değerleri değiştirmeden önce referansla karşılaştırın.
   Şubeye özel hiçbir değer bu dosyada yoktur.
   ========================================================================== */

:root{
  --ink:#141313;
  --paper:#f4eee8;
  --rose:#b86769;
  --rose-d:#a44d54;
  --rose-l:#d89a92;
  --gold-i:#eacb96;
  --line:rgba(74,50,42,.18);
  --shadow:0 10px 28px rgba(45,31,26,.13);
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --script:"Dancing Script","Segoe Script",cursive;
  --sans:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#ece4dc;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--sans);color:var(--ink);
  background:linear-gradient(180deg,#ede4dc,#f8f2ec);
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%;height:auto}  /* height:auto olmadan HTML height niteliği CSS genişliğini ezer */
h1,h2,h3{margin:0}
ul{margin:0;padding:0;list-style:none}
p{margin:0}
:focus-visible{outline:3px solid var(--rose);outline-offset:2px;border-radius:6px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px}

.page{
  width:min(100%,460px);margin:auto;position:relative;
  background:var(--paper);overflow:hidden;
  box-shadow:0 0 70px rgba(0,0,0,.12);
  padding-bottom:74px;
}

/* ── HERO ─────────────────────────────── ref: 0 → 338 ───────────────────── */
/* Referansın kendi hero fotoğrafı (901x646, arayüzü temizlenmiş) tek parça
   kullanılır. Üzerine hiçbir renk perdesi konmaz — mockup'taki netlik ve
   sıcaklık fotoğrafın kendisinden gelir. En-boy oranı 460x330 ile birebirdir. */
.hero{
  position:relative;min-height:330px;padding:10px 16px 0;overflow:hidden;
  background:url("../images/hero.jpg") center center/cover no-repeat;
}

/* Referansta menü/telefon düğmeleri logoyla AYNI banttadır (y10–48),
   logoyu aşağı itmemeleri için akıştan çıkarıldılar. */
.topbar{
  position:absolute;top:10px;left:16px;right:16px;z-index:4;
  display:flex;align-items:center;justify-content:space-between;
}
.circle{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:#1e1c1b;border:1px solid rgba(255,255,255,.5);
  box-shadow:0 5px 14px rgba(0,0,0,.22);cursor:pointer;padding:0;
}
.circle img{width:17px;height:17px;filter:brightness(0) invert(1)}
.menu{width:18px;display:grid;gap:3.5px}
.menu span{height:2px;border-radius:2px;background:#fff;display:block}

.brand{text-align:center;position:relative;z-index:2;padding-top:4px}   /* logo üstü ref: y14 */
.brand__logo{width:155px;margin:0 auto}                                  /* ref: y14 → 140 */
/* Şube etiketi — logoya yakın, gül rozet olarak öne çıkar.
   Sağ dolgu, harf aralığının son karakterden sonra bıraktığı boşluk kadar
   (≈3px) azaltıldı ki yazı rozette optik olarak ortalansın. */
.eyebrow{
  display:inline-block;margin-top:5px;                     /* ref: y155 */
  padding:4px 11px 4px 14px;border-radius:99px;
  background:linear-gradient(135deg,#b0575d,#8c3f46);
  color:#fdf4f0;font-size:8px;letter-spacing:3.4px;font-weight:700;
  box-shadow:0 4px 12px rgba(140,63,70,.30), inset 0 1px 0 rgba(255,255,255,.22);
}
.brand__h1{
  font-family:var(--serif);font-weight:800;font-size:38px;line-height:.98;
  margin:8px 0 0;letter-spacing:-.6px;                                   /* ref: y175 */
}
/* İkinci satır uzun hizmet adlarını da taşırmasın (ör. "PROTOKOLLERİ").
   460px'te 31px = referans değeri; dar ekranda kendiliğinden küçülür. */
.brand__h1 span{display:block;color:var(--rose);font-size:clamp(23px,7.2vw,31px);margin-top:1px}
.brand__rule{display:block;width:54px;height:1px;background:var(--rose-l);margin:12px auto 0} /* ref: y255 */

.trust{
  display:grid;grid-template-columns:repeat(4,1fr);
  margin:10px auto 0;position:relative;z-index:2;max-width:262px;        /* ref: y265 */
}
.trust__i{
  text-align:center;font-size:7.5px;font-weight:700;line-height:1.28;
  padding:0 3px;border-left:1px solid var(--line);
}
.trust__i:first-child{border-left:0}
.trust__i img{width:20px;height:20px;margin:0 auto 4px}

/* ── KAMPANYA BANDI ───────────────────── ref: 338 → 405 (67px) ──────────── */
.offer{
  position:relative;z-index:5;display:block;margin:8px 21px 10px;   /* ref: y338 */
  background:linear-gradient(100deg,#f9ede4,#efd5cb);
  border:1px solid rgba(255,255,255,.9);border-radius:14px;
  box-shadow:var(--shadow);min-height:67px;padding:10px 52px 10px 86px;
  text-align:center;
}
.offer__gift{
  position:absolute;left:2px;bottom:0;width:84px;
  -webkit-mask-image:radial-gradient(ellipse 66% 66% at 50% 52%,#000 58%,transparent 100%);
  mask-image:radial-gradient(ellipse 66% 66% at 50% 52%,#000 58%,transparent 100%);
}
.offer__label{display:block;font-size:8px;letter-spacing:3px;color:#92575a;font-weight:700}
.offer__big{
  display:block;font-family:var(--serif);font-weight:700;font-size:22px;
  color:var(--rose-d);line-height:1.1;margin:2px 0;white-space:nowrap;
}
.offer__sub{display:block;font-size:7.5px;letter-spacing:.3px;font-weight:700;line-height:1.3}
.offer__go{
  position:absolute;right:11px;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--rose);color:#fff;box-shadow:0 6px 14px rgba(184,103,105,.4);
}
.offer__go svg{width:18px;height:18px}


/* ── KAMPANYA GERİ SAYIMI ────────────────────────────────────────────────────
   Mücevher kutusu mantığı: derin şarabî gül zemin + fildişi kadran kutucukları.
   Renkler markanın kendi gül ailesinden (--rose türevleri), böylece siyah/altın
   gibi yabancı bir ada oluşturmuyor. Rakam fontu için ayrıntı aşağıdadır.
   -------------------------------------------------------------------------- */
.cd{
  margin:0 21px 10px;padding:9px 14px 10px;border-radius:14px;text-align:center;
  background:
    radial-gradient(130% 165% at 50% 0%,rgba(255,226,216,.16),transparent 60%),
    linear-gradient(150deg,#96434b,#6b2c35 58%,#4e1c24);
  border:1px solid rgba(255,226,216,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 10px 22px rgba(91,35,42,.28);
}
/* Başlık ve indirim notu tek satırda — blok yüksekliği kısaldı */
.cd__eyebrow{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:6.5px;letter-spacing:2.6px;font-weight:600;color:#f2d9d2;
}
.cd__eyebrow b{color:#fff;font-weight:800}
.cd__eyebrow span{height:1px;width:18px;background:linear-gradient(90deg,transparent,rgba(255,226,216,.6))}
.cd__eyebrow span:last-child{background:linear-gradient(90deg,rgba(255,226,216,.6),transparent)}

.cd__row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:9px auto 0;max-width:246px}
.cd__b{
  background:linear-gradient(180deg,#fffcf9,#f5e5df);
  border-radius:10px;padding:6px 4px 5px;border:1px solid rgba(125,52,59,.13);
  box-shadow:inset 0 1px 0 #fff, 0 4px 11px rgba(62,20,26,.24);
}
/* Rakam fontu: Playfair Display 500.
   Bodoni 600 fazla kalın, Cormorant 400 bu boyutta çok inceydi (tırnakları
   kayboluyordu). Playfair orta kontrastlıdır — 26px'te ince çizgileri ayakta
   kalır, hem okunur hem zarif. Sitenin başlık fontuyla da aynı aile. */
.cd__b b{
  display:block;font-family:var(--serif);font-weight:500;
  font-size:26px;line-height:1.06;color:#6e2a32;
  font-variant-numeric:tabular-nums lining-nums;letter-spacing:.6px;
}
.cd__b i{
  display:block;font-style:normal;font-size:6px;letter-spacing:1.9px;
  color:#9c6f74;margin-top:3px;font-weight:700;
}

/* ── HIZLI AKSİYONLAR ─────────────────── ref: 418 → 465 (47px) ──────────── */
.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:0 21px 7px}
.action{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:13px;min-height:58px;padding:8px 5px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30), 0 8px 18px rgba(0,0,0,.16);
  transition:transform .18s ease, box-shadow .18s ease;
}
.action:active{transform:translateY(1px)}
/* diyagonal ışık süpürmesi — dikkat çeker, kapalı da olabilir */
.action::after{
  content:;position:absolute;z-index:-1;top:-60%;left:-75%;width:42%;height:230%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transform:rotate(19deg);
  animation:sheen 5.2s cubic-bezier(.4,0,.2,1) infinite;
}
.action--call::after{animation-delay:0s}
.action--wa::after{animation-delay:.55s}
.action--map::after{animation-delay:1.1s}
@keyframes sheen{0%,68%{left:-75%}100%{left:135%}}
.action--call{background:linear-gradient(140deg,#12a862,#0a8c52 55%,#06663b);box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 9px 22px rgba(8,120,70,.42)}
.action--wa{background:linear-gradient(140deg,#2fcf76,#12a95f 55%,#0a8149);box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 9px 22px rgba(18,169,95,.42)}
.action--map{background:linear-gradient(140deg,#d0b47e,#b08f4f 55%,#8a6a33);box-shadow:inset 0 1px 0 rgba(255,255,255,.36), 0 9px 22px rgba(154,119,61,.38)}
.action img{width:20px;height:20px;filter:brightness(0) invert(1);margin-bottom:5px}
.action b{font-size:11px;letter-spacing:.3px}
.action small{font-size:7.5px;opacity:.88;margin-top:2px;letter-spacing:.2px;line-height:1.25}

/* ── FİYAT AL / KAMPANYAYI KAÇIRMA ───────────────────────────────────────── */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:0 21px 10px}
.duo__b{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:13px;min-height:54px;padding:9px 11px;
  display:flex;align-items:center;gap:8px;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 8px 18px rgba(0,0,0,.16);
  transition:transform .18s ease;
}
.duo__b:active{transform:translateY(1px)}
.duo__b::after{
  content:\;position:absolute;z-index:-1;top:-60%;left:-75%;width:42%;height:230%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);
  transform:rotate(19deg);animation:sheen 5.2s cubic-bezier(.4,0,.2,1) infinite;
}
.duo__b--price::after{animation-delay:1.65s}
.duo__b--camp::after{animation-delay:2.2s;background:linear-gradient(90deg,transparent,rgba(234,203,150,.34),transparent)}
.duo__b img{width:21px;height:21px;flex:none}
.duo__b b{display:block;font-size:10.5px;letter-spacing:.2px;line-height:1.18}
.duo__b small{display:block;font-size:7.5px;opacity:.88;margin-top:3px;letter-spacing:.2px}
.duo__b--price{background:linear-gradient(135deg,#d49b97,#b3595e)}
.duo__b--price img{filter:brightness(0) invert(1)}
/* siyah zeminde ikon altın çizilir (timer.svg kendi rengini taşır) */
.duo__b--camp{background:linear-gradient(135deg,#2c2725,#151414);border:1px solid rgba(234,203,150,.34)}
.duo__b--camp b{color:#f2e2cf}
.duo__b--camp small{color:var(--gold-i);opacity:.95}

/* ── KARTLAR ──────────────────────────── ref: 475 → 635 ─────────────────── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:0 21px 12px}
.card{
  background:#fffaf5;border:1px solid rgba(255,255,255,.9);border-radius:12px;
  overflow:hidden;box-shadow:var(--shadow);text-align:center;
  display:flex;flex-direction:column;
}
.card__img{display:block;position:relative}
.card__img > img{width:100%;height:80px;object-fit:cover}  /* > : rozet ikonunu kapsamasın */
.card__badge{
  position:absolute;left:6px;bottom:-11px;width:26px;height:26px;border-radius:50%;
  background:#fbe7e2;display:grid;place-items:center;border:1.5px solid #fffaf5;
}
.card__badge img{width:13px;height:13px}
.card__t{font-size:9.5px;line-height:1.16;margin:18px 4px 6px;font-weight:700;flex:1}
.card__go{
  width:26px;height:26px;border-radius:50%;margin:0 auto 8px;display:grid;place-items:center;
  background:linear-gradient(135deg,#d49b97,#b86a6d);color:#fff;
}
.card__go svg{width:14px;height:14px}

/* ── HİZMET LİSTESİ ──────────────────────────────────────────────────────── */
.grp{
  display:flex;align-items:baseline;gap:8px;padding:4px 21px 7px;
  font-size:8px;letter-spacing:2.4px;font-weight:700;
}
.grp i{font-style:normal;font-size:8px;letter-spacing:.4px;color:#8b7a72;font-weight:500}
.grp::after{content:"";flex:1;height:1px;background:var(--line)}

/* ── HİZMET DETAY (referansta yok — okunaklılık önceliklidir) ────────────── */
.detail{padding:2px 18px 14px}
.detail__crumb{font-size:8.5px;letter-spacing:1.2px;color:#8b7a72;margin-bottom:10px}
.detail__crumb a{color:var(--rose)}
.detail__h{font-family:var(--serif);font-weight:700;font-size:20px;line-height:1.15;margin-bottom:8px}
.detail__lead{font-size:12px;line-height:1.55;font-weight:600;color:#4a3b36;margin-bottom:9px}
.detail__p{font-size:11.5px;line-height:1.68;color:#5a4a44;margin-bottom:9px}
.detail__h3{font-family:var(--serif);font-weight:700;font-size:15px;margin:16px 0 8px}

.faq{display:grid;gap:6px}
.faq__i{
  background:#fffaf5;border:1px solid rgba(184,103,105,.16);border-radius:10px;
  padding:9px 11px;box-shadow:0 4px 12px rgba(45,31,26,.05);
}
.faq__i summary{font-size:11px;font-weight:700;cursor:pointer;list-style:none;position:relative;padding-right:18px}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary::after{content:"+";position:absolute;right:0;top:-3px;color:var(--rose);font-size:16px;line-height:1}
.faq__i[open] summary::after{content:"–"}
.faq__i p{font-size:11px;line-height:1.62;color:#5a4a44;margin-top:7px}

.ticks{display:grid;gap:7px;margin-top:11px}
.ticks li{position:relative;padding-left:17px;font-size:11.5px;line-height:1.5}
.ticks li::before{content:"";position:absolute;left:0;top:5px;width:7px;height:7px;border-radius:50%;background:var(--rose-l)}

.info{display:grid;gap:8px;margin-top:11px}
.info li{background:#fffaf5;border:1px solid rgba(184,103,105,.16);border-radius:10px;padding:9px 11px}
.info b{display:block;font-size:8px;letter-spacing:2px;color:var(--rose);margin-bottom:3px}
.info span{font-size:11.5px;line-height:1.5}
.inline-cta{display:inline-block;margin-top:4px;font-size:11.5px;font-weight:700;color:var(--rose)}

/* ── TÜRKİYE BÖLÜMÜ ───────────────────── ref: 655 → 800 (145px) ─────────── */
.net{
  background:linear-gradient(90deg,#f9f4ef 0%,#f1e7df 51%,#ddd0c5 100%);
  display:grid;grid-template-columns:1.05fr .95fr;min-height:145px;align-items:center;
}
.net__copy{padding:16px 8px 16px 18px}
.net__eyebrow{display:flex;align-items:center;gap:6px;font-size:7px;letter-spacing:2.4px;font-weight:700;color:#6f5b53}
.net__eyebrow span{height:1px;flex:1;max-width:18px;background:var(--line)}
.net__eyebrow span:last-child{display:none}
.net__h{font-family:var(--serif);font-weight:600;font-size:17px;line-height:1.2;margin:7px 0}
.net__h em{display:block;font-family:var(--script);font-style:normal;font-weight:600;color:var(--rose);font-size:19px;margin-top:2px;line-height:1.1}
.net__p{font-size:8px;line-height:1.6;color:#5a4a44}
.net__photo{height:100%;min-height:145px;overflow:hidden}
.net__photo img{width:100%;height:100%;object-fit:cover}

/* ── MARKA ŞERİDİ ─────────────────────── ref: 810 → 860 (50px) ──────────── */
.feats{display:grid;grid-template-columns:repeat(4,1fr);background:rgba(255,255,255,.45);padding:8px 12px 10px}
.feats__i{text-align:center;font-size:7px;font-weight:700;line-height:1.35;padding:0 2px;border-left:1px solid var(--line)}
.feats__i:first-child{border-left:0}
.feats__i img{width:17px;height:17px;margin:0 auto 4px}

/* ── FOOTER ──────────────────────────────────────────────────────────────── */
.foot{padding:18px 18px 16px;background:#efe6de;border-top:1px solid var(--line)}
.foot__h{font-size:8px;letter-spacing:2.4px;font-weight:700;color:var(--rose);margin-bottom:8px}
.foot__list{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 8px;margin-bottom:14px}
.foot__list a{font-size:9px;color:#5a4a44;line-height:1.32;display:block}
.foot__list a:hover,.foot__links a:hover{color:var(--rose)}
.foot__list [aria-current]{color:var(--rose);font-weight:700}
.foot__addr{font-style:normal;font-size:10px;line-height:1.75;color:#5a4a44;margin-bottom:14px}
.foot__addr a{font-weight:700;color:var(--ink)}
.foot__links{display:flex;flex-wrap:wrap;gap:6px 11px;padding-top:10px;border-top:1px solid var(--line)}
.foot__links a{font-size:9.5px;color:#6f5b53}
.foot__c{margin-top:10px;font-size:8.5px;color:#8b7a72}

/* ── SABİT ALT ÇUBUK ─────────────────────────────────────────────────────── */
.dock{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:30;
  width:min(100%,460px);display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:5px;
  background:#151414;padding:7px 10px calc(7px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.1);
}
.dock__a{
  min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:#fff;font-size:8.5px;font-weight:800;letter-spacing:.3px;border-radius:11px;text-align:center;
}
.dock__a img{width:17px;height:17px;filter:brightness(0) invert(1)}
.dock__a--wa{background:linear-gradient(135deg,#25b968,#0e9956)}

/* ── ÇEKMECE MENÜ ────────────────────────────────────────────────────────── */
.drawer{
  position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:min(100%,460px);z-index:60;background:var(--paper);
  overflow-y:auto;padding:14px 18px calc(18px + env(safe-area-inset-bottom));
  animation:drawerIn .22s ease;
}
@keyframes drawerIn{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
.drawer__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.drawer__head span{font-size:9px;letter-spacing:3.2px;font-weight:700;color:var(--rose)}
.drawer__x{
  width:38px;height:38px;border-radius:50%;border:0;background:#1e1c1b;color:#fff;
  font-size:22px;line-height:1;cursor:pointer;
}
.drawer__list{display:grid;gap:1px;margin-bottom:14px}
.drawer__list a{display:block;padding:9px 2px;font-size:12px;font-weight:600;border-bottom:1px solid var(--line)}
.drawer__list [aria-current]{color:var(--rose)}
.drawer__cta{
  display:block;text-align:center;background:linear-gradient(135deg,#25b968,#0e9956);
  color:#fff;font-size:11px;font-weight:800;letter-spacing:.5px;
  padding:13px;border-radius:12px;
}

/* ── HUKUKİ METİNLER ─────────────────────────────────────────────────────── */
.legal{font-size:11.5px;line-height:1.72;color:#5a4a44}
.legal h3{font-family:var(--serif);font-weight:700;font-size:14px;color:var(--ink);margin:16px 0 7px;line-height:1.25}
.legal h3:first-child{margin-top:0}
.legal h4{font-size:11px;font-weight:800;color:var(--ink);margin:12px 0 5px}
.legal p{margin:0 0 9px}
.legal ul,.legal ol{margin:0 0 10px;padding-left:16px}
.legal li{list-style:disc;margin-bottom:4px}
.legal ol li{list-style:decimal}
.legal strong{color:var(--ink)}
.legal a{color:var(--rose);word-break:break-word}
.legal table{width:100%;border-collapse:collapse;font-size:10.5px;margin:0 0 10px}
.legal th,.legal td{border:1px solid var(--line);padding:6px 7px;text-align:left}

/* ── DAR EKRAN (≤400px) ──────────────────────────────────────────────────── */
@media(max-width:400px){
  .brand__logo{width:150px}
  .brand__h1{font-size:35px}
  .offer{padding-left:72px;padding-right:44px}
  .offer__big{font-size:19px}
  .offer__gift{width:64px}
  .offer__go{width:30px;height:30px;right:8px}
  .card__img > img{height:70px}
  .card__t{font-size:8.5px}
  .duo__b b{font-size:8.5px}
  .duo__b small{font-size:6px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .action::after,.duo__b::after{display:none}
}