/* =========================================================
   Umrah Self — AÇIK TEMA
   Koyu bölümleri krem/beyaz zemine çevirir. Her sayfada en son yüklenir.
   Kaldırmak için sayfalardaki <link href="assets/light.css"> satırını silmek yeterli.
   ========================================================= */

/* Koyu olarak tasarlanmış kapsayıcıların içinde renkleri tersine çevir */
.nav,.mobile-menu,.page-hero,.dark,.site-footer,
.hero,.why,.dep,.vip,.app,.plan,body>footer,
.vip-card,.amount,.distmap,.s-now,.day-card,.vip-hero{
  --night:#fbf8f1; --night-2:#ffffff; --night-3:#f1ebde;
  --cream:#10201a; --on-dark:#2a3a34; --on-dark-muted:#5f6e68;
  --line-dark:#e3dac6; --gold-2:#1a6b54;
  color:#2a3a34;
}
body{background:#fbf8f1}
.btn-dark{background:#0f4a3a!important;color:#fff!important}
.btn-dark:hover{background:#1a6b54!important}
.btn-gold{color:#10201a!important}
.btn-cream{background:#0f4a3a!important;color:#fff!important}
.btn-cream:hover{background:#1a6b54!important}

/* ---------- menü ---------- */
.nav,.nav.solid{background:rgba(251,248,241,.94)!important;backdrop-filter:blur(14px);border-bottom:1px solid #e9e1cf!important;color:#10201a}
.nav .logo,.site-footer .logo,footer .logo{color:#10201a}
.nav .logo i,.site-footer .logo i,footer .logo i{color:#a8823a}
.nav .menu a{color:#2a3a34;opacity:.9}
.nav .menu a:hover,.nav .menu a.active{color:#0f4a3a}
.nav .menu a.active{border-color:#c9a45c}
.nav .burger{color:#10201a}
.nav .logo svg path{stroke:#a8823a}
.nav .logo svg rect:first-of-type{fill:#c9a45c}
.nav .logo svg rect:last-of-type{fill:#fbf8f1}
.lc-btn{border-color:#d9cfb9!important;color:#10201a!important}
.lc-btn:hover{border-color:#10201a!important}
.mobile-menu,.mobile-menu.open{background:#fbf8f1!important}
.mobile-menu a{color:#10201a!important;border-color:#e3dac6!important}

/* ---------- sayfa başlıkları ---------- */
.page-hero{background:linear-gradient(180deg,#f7f2e7 0%,#efe6d2 100%)!important;color:#2a3a34}
.page-hero .ph-sky{color:#d8ccb2!important;opacity:.75}
.page-hero h1{color:#10201a}
.page-hero h1 em{color:#1a6b54}
.page-hero p{color:#5f6e68}
.crumbs{color:#7a8781}

/* koyu bölümler */
.dark,.sec.dark{background:#f1ebde!important}
.vip-hero{background:linear-gradient(180deg,#f7f2e7,#efe4cc)!important}

/* ---------- görseller (fotoğraf yerine çizim) ---------- */
.art svg.sk,.tour .art svg,.post .ph svg,.live svg{color:rgba(22,66,54,.62)!important}
.art::after{background:linear-gradient(180deg,transparent 45%,rgba(16,32,26,.35))!important}
.day-view .sky svg{color:rgba(22,66,54,.6)!important}

/* ---------- alt bilgi ---------- */
.site-footer,body>footer{background:#efe8d8!important;color:#5f6e68}
.site-footer h4,body>footer h4{color:#10201a}
.site-footer a:hover,body>footer a:hover{color:#0f4a3a}
.lic{border-color:#ddd2bb!important}
.lic b{color:#10201a!important}
.f-big{color:rgba(15,74,58,.08)!important}
.f-big em{color:rgba(168,130,58,.16)!important}
.f-bot{border-color:#ddd2bb!important}

/* =========================================================
   ANA SAYFA
   ========================================================= */
/* gündüz gökyüzü */
.hero #sky stop:nth-child(1){stop-color:#e6efe9}
.hero #sky stop:nth-child(2){stop-color:#eef1e8}
.hero #sky stop:nth-child(3){stop-color:#f5ebd5}
.hero #sky stop:nth-child(4){stop-color:#f1dcae}
.hero #glow stop{stop-color:#fff6df}
.hero #stars{display:none}
.hero .scene svg svg{color:#a9c2b6!important}
.hero .scene>svg>path{fill:#f2d79a;opacity:.85}
.hero .scene::after{background:linear-gradient(90deg,rgba(251,248,241,.92) 0%,rgba(251,248,241,.55) 52%,rgba(251,248,241,.05) 100%),linear-gradient(0deg,#fbf8f1 0%,transparent 30%)!important}
.hero h1,.hero .h1x{color:#10201a}
.hero h1 em,.hero .h1x em{color:#1a6b54}
.flag{color:#2a3a34!important}
.finder{background:#fff!important;color:#10201a!important;box-shadow:0 20px 50px rgba(16,32,26,.12)!important;border:1px solid #ece4d2}
.finder-tabs button{background:#fff!important;border-color:#e3dac6!important;color:#2a3a34!important}
.finder-tabs button[aria-pressed="true"]{background:#0f4a3a!important;color:#fff!important;border-color:#0f4a3a!important}
.day-card{background:rgba(255,255,255,.88)!important;border-color:#e9e1cf!important;box-shadow:0 20px 50px rgba(16,32,26,.1)}
.day-card .top span:last-child,.day-card .meta{color:#a8823a!important}
.next{background:#faf6ec!important;border-color:#ece4d2!important}
.next .th{background:linear-gradient(135deg,#cfe3d8,#f1e6cc)!important;color:#0f4a3a!important}
.route .inner{background:rgba(255,255,255,.92)!important;border-color:#e9e1cf!important;box-shadow:0 20px 50px rgba(16,32,26,.08)}
.route .head span:first-child{color:#10201a!important}
.route .head span:last-child{color:#7a8781!important}
.stop .dot{background:#fbf8f1!important;border-color:#b9c4bf!important;color:#5d6b65!important}
.stop.on .dot,.stop.done .dot{background:#c9a45c!important;border-color:#c9a45c!important;color:#fff!important}
.stop b{color:#10201a!important}
.stop .c{color:#5d6b65!important}
.stop.on small{color:#a8823a!important}
.route .stop{border-color:#ece4d2}
.route .stop.on{border-color:#c9a45c}
.track .base{background:#e3dac6!important}

.why{background:#fbf8f1!important}
.why p.big .soft{color:#9aa7a1!important}
.why p.big em{color:#a8823a!important}
.stat span{color:#a8823a!important}
.stats{border-color:#e3dac6!important}

.dep{background:#f6f1e6!important}
.dep h2 em{color:#1a6b54}
.round{border-color:#d9cfb9!important;color:#10201a!important}
.round:hover{background:#0f4a3a!important;color:#fff!important}
.tour h3,.tour .tg{color:#fff!important}
.tour h3 em{color:#f6e2b6!important}
.tour::after{background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(10,30,24,.72) 100%)!important}
.tour .bar a{background:#0f4a3a!important;color:#fff!important}

.vip{background:#f1ebde!important}
.vip h2 em{color:#a8823a!important}
.vip .eyebrow,.vip .kicker{color:#7a8781}
.vip-list{background:#e3dac6!important;border-color:#e3dac6!important}
.vip-item{background:#fff!important}
.vip-item .ic{border-color:#e0cfa6!important;color:#a8823a!important}

.app{background:#fbf8f1!important}
.app h2 em{color:#1a6b54}
.feats{background:#e3dac6!important;border-color:#e3dac6!important}
.feat{background:#fff!important}
.feat .ic{color:#a8823a!important}
.store{border-color:#d9cfb9!important;color:#5f6e68!important}
.store b{color:#10201a!important}
.store svg{fill:#10201a!important}
.phone .scr-top{background:#0f4a3a!important;color:#fff!important}
.phone .scr-top b{color:#fff!important}
.phone .scr-top small{color:#bcd3ca!important}

.plan{background:#f1ebde!important}
.plan h2 em{color:#1a6b54}
.plan .contact b{color:#10201a}

/* iç sayfalardaki koyu kutular */
.vip-card{background:linear-gradient(135deg,#f3ead6,#fff)!important;border:1px solid #e3dac6}
.amount{background:#0f4a3a!important;color:#fff!important}
.amount *{color:inherit}
.s-now{background:#0f4a3a!important;color:#fff!important}
.distmap{background:linear-gradient(180deg,#eef4f0,#f7f1e3)!important;border:1px solid #e3dac6;color:#2a3a34!important}
.ic-box{background:#0f4a3a;color:#f1dfb6}
.draft{background:#f1dfb6}

/* kafile detay başlığı */
.pk-hero{color:#2a3a34!important}
.pk-hero::after{background:linear-gradient(90deg,rgba(251,248,241,.94),rgba(251,248,241,.55) 60%,rgba(251,248,241,.1)),linear-gradient(0deg,rgba(251,248,241,.9),transparent 50%)!important}
.pk-hero .sky svg{color:rgba(22,66,54,.35)!important}
.pk-hero h1{color:#10201a!important}
.pk-hero h1 em{color:#1a6b54!important}
.pk-hero .crumbs,.pk-hero .crumbs a{color:#5f6e68!important}
/* VIP başlığı */
.vip-hero .sky{color:#ddd0b3!important;opacity:.8}
.vip-hero h1 em{color:#a8823a!important}
.vip-hero p{color:#5f6e68!important}

/* ---------- logo: Umrah Self ---------- */
.logo{gap:10px!important;align-items:center}
.logo .lm{flex:none;display:block;filter:drop-shadow(0 2px 4px rgba(15,74,58,.18))}
.logo .lw{display:flex;flex-direction:column;line-height:1}
.logo .lw b{font-family:var(--serif,Georgia,serif);font-weight:600;font-size:23px;letter-spacing:-.01em;color:#10201a}
.logo .lw small{font-family:inherit;font-size:9.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#a8823a;margin-top:4px}
@media (max-width:420px){.logo .lm{width:34px;height:34px}.logo .lw b{font-size:20px}.logo .lw small{font-size:8.5px;letter-spacing:.2em}}
.f-big{font-size:clamp(44px,8.6vw,150px)!important;letter-spacing:-.045em!important}
@media (max-width:440px){.nav .btn-cream,.nav .nav-cta{display:none!important}}

/* =========================================================
   ESTETİK DOKUNUŞLAR (2026-11-05) — gerçek fotoğraflar ve ince ayrıntılar
   Yedek: ../prototip-yedek-2026-11-05/
   ========================================================= */
::selection{background:#e6cd96;color:#10201a}
.photo{background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}

/* Ayın kafilesi: fotoğraf + krem geçiş */
.hero .scene.photo{background-image:url(img/hero-mekke.jpg);background-size:cover;background-position:center 55%;transform:scale(1.05);animation:heroZoom 20s ease-out forwards}
@keyframes heroZoom{to{transform:scale(1)}}
.hero .scene.photo{left:34%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 30%,#000 62%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 30%,#000 62%)}
.hero .scene.photo::after{background:linear-gradient(0deg,#fbf8f1 0%,rgba(251,248,241,0) 28%),linear-gradient(180deg,rgba(251,248,241,.55) 0%,rgba(251,248,241,0) 22%),linear-gradient(rgba(251,248,241,.14),rgba(251,248,241,.14))!important}
@media (max-width:860px){.hero .scene.photo{left:0;opacity:.35;-webkit-mask-image:none;mask-image:none}}
.hero .day-card{backdrop-filter:blur(14px)}
.hero .next .th{background-image:url(img/kabe-tavaf.jpg)!important;background-size:cover!important;background-position:center!important}
.hero .next .th .icon{opacity:0}

/* Kafile kartları */
.tour{border-radius:26px!important;box-shadow:0 18px 40px rgba(16,32,26,.12);transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.tour:hover{transform:translateY(-6px);box-shadow:0 28px 60px rgba(16,32,26,.2)}
.tour .art.photo{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.tour:hover .art.photo{transform:scale(1.06)}
.tour::after{background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0) 45%,rgba(8,18,14,.82) 100%)!important}

/* Hizmet kutuları */
.svc{transition:background .35s,transform .35s}
.svc:hover{background:#fff!important}
.svc:hover .ic{transform:translateY(-3px) rotate(-4deg)}
.svc .ic{transition:transform .35s}

/* Mekke'de bir gün */
.day-view .sky{background-size:cover!important;background-position:center!important;transition:background-image .6s}
.day-view .sky svg{display:none}
.day-view .sky::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,0) 35%,rgba(8,18,14,.78) 100%)}
.day-view small,.day-view .t,.day-view h3,.day-view p{position:relative;z-index:1}

/* Hocalar */
.guide{transition:transform .45s,box-shadow .45s}
.guide:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(16,32,26,.14)}
.guide .ph.photo{position:relative}
.guide .ph.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(8,18,14,.6))}
.guide .ph.photo small{position:relative;z-index:1;color:#fff!important}
.guide .ph.photo span{position:relative;z-index:1;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#0f4a3a;color:#f1dfb6!important;font-size:26px!important;border:3px solid rgba(255,255,255,.85);box-shadow:0 10px 24px rgba(0,0,0,.25)}

/* Uygulama telefonu */
.live.photo{position:relative}
.live.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.55))}
.live.photo .dot,.live.photo .cap{position:relative;z-index:1}

/* Rehber yazıları */
.post .ph.photo{transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.post:hover .ph.photo{transform:scale(1.04)}
.post .ph{overflow:hidden}

/* İç sayfalardaki fotoğraflı görseller */
.art.photo::after{background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.4))!important}
.pk-hero .sky{background-size:cover!important;background-position:center!important}
.pk-hero .sky svg{display:none}
.card,.mini-h,.post{transition:transform .4s,box-shadow .4s}
a.card:hover,.mini-h:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(16,32,26,.12)}

/* yeni başlık daha uzun: boyut */
.hero .h1x{font-size:clamp(48px,6.6vw,104px)!important}

/* Ayın kafilesi / "Uçuş, otel, vize." bölümü: sade arka plan (fotoğraf yerine) — 2026-11-07 */
.hero .scene.photo{
  left:0!important;-webkit-mask-image:none!important;mask-image:none!important;animation:none!important;transform:none!important;opacity:1!important;
  background-color:#fbf8f1!important;
  background-image:
    radial-gradient(ellipse 60% 70% at 85% 35%,rgba(201,164,92,.16),rgba(201,164,92,0) 70%),
    radial-gradient(ellipse 50% 60% at 10% 100%,rgba(26,107,84,.07),rgba(26,107,84,0) 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23c9a45c' stroke-width='1' opacity='.32'%3E%3Cpath d='M60 10l14 36 36 14-36 14-14 36-14-36-36-14 36-14z'/%3E%3Crect x='35' y='35' width='50' height='50' transform='rotate(45 60 60)'/%3E%3Ccircle cx='60' cy='60' r='12'/%3E%3C/g%3E%3C/svg%3E")!important;
  background-size:auto,auto,120px 120px!important;
  background-position:center,center,right top!important;
  background-repeat:no-repeat,no-repeat,repeat!important;
}
/* desen sağda görünür, sola doğru kaybolur */
.hero .scene.photo::after{background:linear-gradient(90deg,#fbf8f1 0%,rgba(251,248,241,.96) 40%,rgba(251,248,241,.55) 75%,rgba(251,248,241,.35) 100%),linear-gradient(0deg,#fbf8f1 0%,rgba(251,248,241,0) 30%)!important}
.hero .day-card{box-shadow:0 24px 60px rgba(16,32,26,.1)!important}


/* ---------- ÇEREZ BİLDİRİMİ ---------- */
.cookie-note{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;max-width:620px;margin:0 auto;display:flex;gap:16px;align-items:center;background:#fff;color:var(--text);border:1px solid var(--line);border-radius:18px;padding:14px 16px;box-shadow:0 12px 40px rgba(6,16,12,.16);font-size:14px}
.cookie-note p{margin:0;flex:1}
.cookie-note a{color:var(--emerald-2);text-decoration:underline}
.cookie-note .btn{flex:none}
@media (max-width:520px){.cookie-note{flex-direction:column;align-items:stretch}}