/* =========================================================
Belle Amore Beauty — main stylesheet
Palet: buz beyazı zemin · petrol tipografi · turkuaz-petrol
ve şeftali vurgular (vurgu renkleri yalnızca küçük
alanlarda; geniş yüzeyler daima açık kalır)
1. tokens 2. base 3. type 4. buttons 5. header
6. hero 7. story 8. services 9. packages 10. shop
11. compare 12. team 13. quotes 14. booking 15. journal
16. footer 17. cart / search / misc 18. responsive
========================================================= */
/* ---------- 1. tokens ---------- */
:root{
--paper:#F9FBFB; /* ana zemin — buz beyazı */
--soft:#EDF4F4; /* açık petrol bölüm zemini */
--sage:#E5F0F0; /* bir ton koyu petrol bölümü */
--blush:#FCF2EC; /* şeftali bölümü */
--ink:#16343A; /* başlık ve metin — petrol */
--ink-2:#3C5A60;
--mute:#7E9498;
--accent:#0E7C86; /* turkuaz-petrol — vurgu */
--accent-d:#0B646D; /* koyu petrol — buton ve okunur metin */
--peach:#E8845F; /* şeftali/mercan — ince detay */
--peach-l:#F0B79C; /* açık şeftali — koyu zeminde */
--grad:linear-gradient(90deg,#0E7C86 0%,#E8845F 100%);
/* rgba üretiminde kullanılan ham değerler */
--ink-rgb:22,52,58; /* çizgi, gölge ve perde renkleri */
--paper-rgb:249,251,251; /* koyu zemin üzerindeki açık metinler */
--ov-rgb:11,36,41; /* fotoğraf üzerindeki karartma katmanı */
--on-dark:#F0B79C; /* koyu zeminde vurgu metni */
--on-dark-2:#7FCBD2; /* koyu zeminde ikincil vurgu */
--flag-fg:#3A1A0E; /* şeftali rozetin yazı rengi */
--ph-warm:linear-gradient(150deg,#FBE9E0,#F2D3C4);
--ph-sand:linear-gradient(150deg,#EFF6F6,#DBEAEA);
--ph-deep:linear-gradient(150deg,#1F4A52,#16343A);
--arrow:url("data:image/svg+xml;utf8,");
--line:rgba(var(--ink-rgb),.14);
--line-2:rgba(var(--ink-rgb),.07);
--light-line:rgba(var(--paper-rgb),.22);
/* kurumsal tipografi: başlıklar Montserrat, metin Inter */
--d:"Montserrat",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
--s:"Inter",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
--shell:1360px;
/* Başlık şeridi ve üst şerit için daha geniş kapsayıcı. Sayfa gövdesi
okunabilirlik için 1360px'te kalır; menü ise ekranın tamamını
kullanır, aksi hâlde maddeler sıkışıp alt satıra iniyor. */
--shell-wide:1720px;
--pad:clamp(20px,5vw,72px);
--ease:cubic-bezier(.22,.61,.36,1);
--ease-io:cubic-bezier(.65,.02,.16,1);
--head-h:82px;
}
/* ---------------------------------------------------------
TEMA: KIRMIZI
Sıcak beyaz zemin · derin bordo tipografi · canlı kırmızı
ve antik altın vurgular.
Etkinleştirmek için kök dizindeki renk.txt dosyasına
"kirmizi" yazıp kaydetmeniz yeterlidir.
--------------------------------------------------------- */
html[data-tema="kirmizi"]{
--paper:#FDFAF9; /* ana zemin — sıcak beyaz */
--soft:#F7EDEA; /* açık bölüm zemini */
--sage:#F3E3DF; /* bir ton koyu bölüm */
--blush:#FBF0EC; /* pudra bölümü */
--ink:#4E1622; /* başlık ve metin — derin bordo */
--ink-2:#7A3B45;
--mute:#A88189;
--accent:#C8102E; /* canlı kırmızı — vurgu */
--accent-d:#A50E26; /* koyu kırmızı — buton ve okunur metin */
--peach:#C08A3C; /* antik altın — ince detay */
--peach-l:#F0BCA8;
--grad:linear-gradient(90deg,#C8102E 0%,#C08A3C 100%);
--ink-rgb:78,22,34;
--paper-rgb:253,250,249;
--ov-rgb:44,8,16;
--on-dark:#F0BCA8;
--on-dark-2:#E8C79B;
--flag-fg:#2E1207;
--ph-warm:linear-gradient(150deg,#FBE7E2,#F3CDC6);
--ph-sand:linear-gradient(150deg,#F8F1EF,#EEDCD8);
--ph-deep:linear-gradient(150deg,#6E1A28,#4E1622);
--arrow:url("data:image/svg+xml;utf8,");
}
/* ---------------------------------------------------------
TEMA: GOLD
Fildişi zemin · sıcak koyu kahve tipografi · metalik altın.
Altın hissi düz sarıdan değil, açık–koyu geçişten gelir:
büyük altın yüzeyler --gold-leaf degradesini kullanır,
üzerine koyu yazı yazılır (altın üstünde beyaz yazı soluk
okunur). Okunur altın metin için --accent-d (bronz) vardır.
--------------------------------------------------------- */
html[data-tema="gold"]{
--paper:#FFFCF5; /* ana zemin — fildişi */
--soft:#F8F1DF; /* açık şampanya bölümü */
--sage:#F2E9D2; /* bir ton koyu şampanya */
--blush:#FDF8EC; /* sıcak krem bölüm */
--ink:#211C10; /* başlık ve metin — sıcak koyu kahve */
--ink-2:#4E4634;
--mute:#948B76;
--accent:#C1993F; /* altın — çizgi, ikon, grafik */
--accent-d:#7C6420; /* bronz-altın — okunur metin (5,6:1) */
--peach:#D9B44A; /* açık altın — rozet ve ince detay */
--peach-l:#E9D08A;
/* metalik altın yaprağı — koyu yazı taşıyan YÜZEYLER için */
--gold-leaf:linear-gradient(105deg,#9C7A22 0%,#D9B44A 26%,#F5E7B4 46%,#C9A227 64%,#A8842A 100%);
/* açık zeminde okunacak altın YAZI için (bir tık koyu) */
--gold-text:linear-gradient(100deg,#7C6420 0%,#B08C2C 30%,#D4B45E 50%,#A8842A 74%,#7C6420 100%);
--grad:linear-gradient(90deg,#A8842A 0%,#E3C86E 45%,#C1993F 100%);
--ink-rgb:33,28,16;
--paper-rgb:255,252,245;
--ov-rgb:26,20,8;
--on-dark:#E4C97C; /* koyu zeminde altın metin */
--on-dark-2:#D6C39A;
--flag-fg:#2A2109;
--ph-warm:linear-gradient(150deg,#F9EFD6,#E9D9AE);
--ph-sand:linear-gradient(150deg,#FCF8EC,#F1E8D0);
--ph-deep:linear-gradient(150deg,#3C3418,#211C10);
--arrow:url("data:image/svg+xml;utf8,");
}
/* --- GOLD temasına özel bileşenler: metalik yüzeyler --- */
/* Ana butonlar altın yaprağı; üzerine koyu yazı, hover'da koyu zemin */
html[data-tema="gold"] .btn--ink{
--bg:var(--gold-leaf); --fg:#241D08; --bd:transparent;
--hb:var(--ink); --hf:var(--on-dark);
}
html[data-tema="gold"] .btn--out{
--bg:transparent; --fg:var(--ink); --bd:rgba(193,153,63,.6);
--hb:var(--ink); --hf:var(--on-dark);
}
html[data-tema="gold"] .btn--bone{
--bg:#fff; --fg:var(--ink); --bd:#fff; --hb:var(--gold-leaf); --hf:#241D08;
}
/* Logo, ön yükleme ve büyük rakamlar — açık zeminde okunur altın */
html[data-tema="gold"] .brand__word,
html[data-tema="gold"] .loader__mark,
html[data-tema="gold"] .gscore__n,
html[data-tema="gold"] .stats b,
html[data-tema="gold"] .pkgcard__price b,
html[data-tema="gold"] .pkgd__buy b{
background:var(--gold-text);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
/* koyu kartta fiyat parlak altın olsun */
html[data-tema="gold"] .pkgcard--hi .pkgcard__price b,
html[data-tema="gold"] .pkgcard--hi .pkgcard__cur{
background:var(--gold-leaf);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
html[data-tema="gold"] .ft__brand .brand__word,
html[data-tema="gold"] .ad__brand-w{
background:linear-gradient(100deg,#C1993F 0%,#F3E3B0 45%,#D9B44A 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Öne çıkan paket kartı: koyu zemin + altın rozet */
html[data-tema="gold"] .pkgcard__flag{background:var(--gold-leaf);color:#241D08}
html[data-tema="gold"] .pkgcard--hi .btn--ink{
--bg:var(--gold-leaf); --fg:#241D08; --bd:transparent; --hb:var(--paper); --hf:var(--ink);
}
/* Altın üstünde beyaz yazı soluk kaldığı için koyu zemine çevrilir */
html[data-tema="gold"] .ad__badge{background:var(--ink);color:var(--on-dark)}
html[data-tema="gold"] .tag--new{background:var(--ink);color:var(--on-dark)}
html[data-tema="gold"] .prd__tag--sale{background:var(--ink);color:var(--on-dark)}
/* İnce altın çizgiler biraz daha görünür olsun */
html[data-tema="gold"] .lbl::before,
html[data-tema="gold"] .kick::before{height:2px}
html[data-tema="gold"] .sig{border-left-color:var(--accent)}
/* ---------------------------------------------------------
TEMA: PEMBE
Gül beyazı zemin · derin erik tipografi · kırmızımsı pembe
vurgu ve altın detay.
--------------------------------------------------------- */
html[data-tema="pembe"]{
--paper:#FFFBFC;
--soft:#FCEEF1;
--sage:#F8E3E8;
--blush:#FFF3EE;
--ink:#4A1428;
--ink-2:#7B3B52;
--mute:#A9808F;
--accent:#D6336C;
--accent-d:#B22456;
--peach:#C4954A;
--peach-l:#F5BFCB;
--grad:linear-gradient(90deg,#D6336C 0%,#C4954A 100%);
--ink-rgb:74,20,40;
--paper-rgb:255,251,252;
--ov-rgb:46,10,26;
--on-dark:#F5BFCB;
--on-dark-2:#EFCBA0;
--flag-fg:#3A2210;
--ph-warm:linear-gradient(150deg,#FCE3E9,#F6C9D3);
--ph-sand:linear-gradient(150deg,#FDF0F3,#F2DEE4);
--ph-deep:linear-gradient(150deg,#6E1D3C,#4A1428);
--arrow:url("data:image/svg+xml;utf8,");
}
/* ---------------------------------------------------------
TEMA: GÖKYÜZÜ
Açık gökyüzü mavisi zemin · lacivert tipografi · canlı mavi
vurgu ve sıcak kum detay.
--------------------------------------------------------- */
html[data-tema="gokyuzu"]{
--paper:#FAFCFE;
--soft:#EAF3FB;
--sage:#DDEBF7;
--blush:#FFF4EC;
--ink:#16304D;
--ink-2:#3E5A78;
--mute:#8098AF;
--accent:#2E8BD6;
--accent-d:#1668A8;
--peach:#E0A458;
--peach-l:#BFE0F7;
--grad:linear-gradient(90deg,#2E8BD6 0%,#E0A458 100%);
--ink-rgb:22,48,77;
--paper-rgb:250,252,254;
--ov-rgb:10,28,48;
--on-dark:#BFE0F7;
--on-dark-2:#F0C99A;
--flag-fg:#2A1A06;
--ph-warm:linear-gradient(150deg,#FDECDE,#F6D6BC);
--ph-sand:linear-gradient(150deg,#EDF5FC,#D8E8F5);
--ph-deep:linear-gradient(150deg,#1F4A73,#16304D);
--arrow:url("data:image/svg+xml;utf8,");
}
/* ---------------------------------------------------------
TEMA: LAVANTA
Açık lila zemin · derin patlıcan tipografi · leylak vurgu
ve altın detay.
--------------------------------------------------------- */
html[data-tema="lavanta"]{
--paper:#FCFAFE;
--soft:#F1ECF8;
--sage:#E7DFF3;
--blush:#FBF0F4;
--ink:#2E2140;
--ink-2:#574A6E;
--mute:#928AA5;
--accent:#7C5CC4;
--accent-d:#63449F;
--peach:#B08A3E;
--peach-l:#D6C3F0;
--grad:linear-gradient(90deg,#7C5CC4 0%,#B08A3E 100%);
--ink-rgb:46,33,64;
--paper-rgb:252,250,254;
--ov-rgb:28,18,42;
--on-dark:#D6C3F0;
--on-dark-2:#EBD3A8;
--flag-fg:#2A1E06;
--ph-warm:linear-gradient(150deg,#F6E9F2,#E7D2E8);
--ph-sand:linear-gradient(150deg,#F3EEFA,#E2D9F0);
--ph-deep:linear-gradient(150deg,#4A3568,#2E2140);
--arrow:url("data:image/svg+xml;utf8,");
}
/* ---------- 2. base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.is-locked{overflow:hidden}
body{
margin:0;background:var(--paper);color:var(--ink);
font-family:var(--s);font-weight:400;font-size:16px;line-height:1.68;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
overflow-x:hidden;
}
body.is-loading{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
svg{fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--accent-d);outline-offset:3px}
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
section{position:relative}
/* fotoğraf katmanı: hafif gren + görsel gelmezse yumuşak degrade */
.ph{position:relative;overflow:hidden;background:var(--soft);margin:0}
.ph::after{
content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.22;
background-image:url("data:image/svg+xml;utf8,");
}
.ph img{width:100%;height:100%;object-fit:cover}
.ph--warm{background:var(--ph-warm)}
.ph--sand{background:var(--ph-sand)}
.ph--deep{background:var(--ph-deep)}
.ph.is-broken img{display:none}
/* ---------- 3. type ---------- */
.disp{font-family:var(--d);font-weight:700;letter-spacing:-.028em;line-height:1.06;margin:0}
.disp i{font-style:normal;font-weight:400;color:var(--accent-d)}
/* NOT: .h1 bilerek tanımlanmadı. Sayfa başlıkları "disp h1 splt" ile
yazılıyor ama boyutu h1 öğesinin kendi kuralından geliyor ve tasarım
böyle kurgulanmış. .h1'e ölçü vermek bütün sayfa başlıklarını
büyütüp arama formuyla çakıştırıyordu. */
.h2{font-size:clamp(1.95rem,4.1vw,3.35rem)}
.h3{font-size:clamp(1.5rem,2.5vw,2.1rem);line-height:1.14}
p{margin:0 0 1.1em}
.lead{font-size:clamp(1.02rem,1.4vw,1.22rem);color:var(--ink-2);line-height:1.66}
/* Küçük açıklama satırı (fiyat notu, form altı uyarı) */
.tiny{font-size:.8rem;line-height:1.65;color:var(--mute)}
/* Dar okuma kolonu — uzun metinlerde satır uzunluğunu sınırlar.
.shell--n tanımsızdı, yasal metinler sayfa boyunca uzuyordu. */
.shell--n{max-width:820px}
/* Zengin metin gövdesi (hakkımızda, KVKK, hizmet grubu, bölge sayfası).
Bu sınıfın da kuralı yoktu: paragraf, başlık ve listeler tarayıcı
varsayılanıyla çıkıyordu. */
.article{font-size:1rem;line-height:1.85;color:var(--ink-2)}
.article>*:first-child{margin-top:0}
.article p{margin:0 0 1.2em}
.article h2{
font-family:var(--d);font-weight:700;font-size:clamp(1.2rem,2vw,1.55rem);
letter-spacing:-.02em;line-height:1.2;color:var(--ink);margin:2em 0 .6em;
}
.article h3{
font-family:var(--d);font-weight:600;font-size:clamp(1.05rem,1.5vw,1.24rem);
letter-spacing:-.015em;color:var(--ink);margin:1.7em 0 .5em;
}
.article ul,.article ol{margin:0 0 1.3em;padding-left:22px}
.article li{margin-bottom:.55em}
.article a{color:var(--accent-d);border-bottom:1px solid currentColor}
/* Zengin metin içindeki karşılaştırma tabloları. Sarmalayıcı kutu
KULLANILAMIYOR: panel kaydederken div'i ve class'ı siliyor
(crud_temizHtml). Bu yüzden tablo sarmalayıcısız duyarlı olmalı —
üç kısa kolonla 320px'te de sığıyor, hücreler sarıyor. */
.article table{width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:.93rem}
.article th,.article td{padding:11px 12px 11px 0;text-align:left;vertical-align:top;
border-bottom:1px solid var(--line-2);overflow-wrap:break-word}
.article thead th{font-family:var(--d);font-size:.66rem;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--mute);padding-bottom:9px}
.article tbody tr:last-child td{border-bottom:0}
@media (max-width:560px){
.article table{font-size:.86rem}
.article th,.article td{padding:9px 8px 9px 0}
}
.article blockquote{
margin:1.8em 0;padding:20px 26px;background:var(--soft);border-left:3px solid var(--accent);
font-family:var(--d);font-weight:600;font-size:1.06rem;letter-spacing:-.015em;color:var(--ink);
}
.article article+article{margin-top:2.6em;padding-top:2.2em;border-top:1px solid var(--line)}
.lbl{
display:inline-flex;align-items:center;gap:10px;font-size:.68rem;font-weight:600;letter-spacing:.22em;
text-transform:uppercase;color:var(--accent-d);margin-bottom:1.5rem;
}
.lbl::before{content:"";width:24px;height:2px;border-radius:2px;background:var(--grad)}
.lbl--light{color:var(--on-dark)}
.lbl--light::before{background:linear-gradient(90deg,var(--on-dark),var(--on-dark-2))}
.kick{
display:inline-flex;align-items:center;gap:10px;font-size:.68rem;font-weight:600;letter-spacing:.22em;
text-transform:uppercase;color:var(--accent-d);margin-bottom:1.4rem;
}
.kick::before{content:"";width:24px;height:2px;border-radius:2px;background:var(--grad)}
.lnk{
position:relative;font-size:.8rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
padding-bottom:4px;white-space:nowrap;color:var(--accent-d);
}
.lnk::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform-origin:right;transition:transform .5s var(--ease)}
.lnk:hover::after{transform:scaleX(0);transform-origin:left}
.sechead{max-width:820px;margin-bottom:clamp(38px,5vw,68px)}
.sechead--split{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.sechead__note{max-width:420px;color:var(--mute);font-size:.94rem;margin:1rem 0 0}
.sechead--split .sechead__note{margin-bottom:6px}
/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.on{opacity:1;transform:none}
.splt .ln-w{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.splt .ln-i{display:block;transform:translateY(105%);transition:transform 1s var(--ease)}
.splt.on .ln-i{transform:none}
.splt.on .ln-i:nth-child(2){transition-delay:.08s}
.splt.on .ln-i:nth-child(3){transition-delay:.16s}
/* ---------- 4. buttons ---------- */
.btn{
--bg:var(--accent-d);--fg:#fff;--bd:var(--accent-d);--hb:var(--ink);--hf:#fff;
position:relative;display:inline-flex;align-items:center;justify-content:center;
height:54px;padding:0 30px;border:1px solid var(--bd);background:var(--bg);color:var(--fg);
font-family:var(--d);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
overflow:hidden;isolation:isolate;cursor:pointer;
transition:color .4s var(--ease),border-color .4s var(--ease);
}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--hb);transform:translateY(101%);transition:transform .5s var(--ease)}
.btn:hover{color:var(--hf);border-color:var(--hb)}
.btn:hover::before{transform:translateY(0)}
.btn--sm{height:42px;padding:0 20px;font-size:.66rem}
.btn--full{width:100%}
.btn--ink{--bg:var(--accent-d);--fg:#fff;--bd:var(--accent-d);--hb:var(--ink);--hf:#fff}
.btn--bone{--bg:#fff;--fg:var(--ink);--bd:#fff;--hb:var(--accent-d);--hf:#fff}
.btn--out{--bg:transparent;--fg:var(--ink);--bd:var(--line);--hb:var(--ink);--hf:#fff}
/* ---------- loader ---------- */
.loader{
position:fixed;inset:0;z-index:200;background:var(--paper);color:var(--ink);
display:flex;align-items:center;justify-content:center;
transition:clip-path 1.1s var(--ease-io);clip-path:inset(0 0 0 0);
}
.loader.is-out{clip-path:inset(0 0 100% 0)}
.loader__inner{text-align:center;position:relative}
/* flex + justify-content ŞART: blok olunca tüm genişliği
kaplıyor, içindeki display:block resme text-align:center işlemiyor
ve amblem yazının soluna kayıyordu. */
.loader__logo{display:flex;justify-content:center;margin:0 0 22px;
animation:lmark 1.1s var(--ease) both}
.loader__logo img{display:block;width:auto;height:clamp(84px,14vw,132px)}
.loader__mark{
display:block;font-family:var(--d);font-weight:700;font-size:clamp(1.35rem,4vw,2.4rem);
letter-spacing:.22em;text-indent:.22em;animation:lmark 1.4s var(--ease) both;
}
.loader__sub{
display:block;margin-top:12px;font-size:.64rem;letter-spacing:.4em;text-transform:uppercase;
color:var(--mute);animation:lmark 1.4s .15s var(--ease) both;
}
@keyframes lmark{from{opacity:0;filter:blur(9px);letter-spacing:.42em}to{opacity:1;filter:none}}
.loader__meter{position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--line-2)}
.loader__meter i{display:block;height:100%;width:0;background:var(--grad);transition:width .25s linear}
.loader__num{position:absolute;right:var(--pad);bottom:26px;font-size:.7rem;letter-spacing:.2em;color:var(--mute)}
.scrollbar{position:fixed;top:0;left:0;height:2px;width:0;background:var(--grad);z-index:120;transition:width .12s linear}
/* imleç */
.cursor{position:fixed;top:0;left:0;z-index:190;pointer-events:none;opacity:0;transition:opacity .3s}
.cursor__dot,.cursor__ring{position:absolute;border-radius:50%;transform:translate(-50%,-50%)}
.cursor__dot{width:5px;height:5px;background:var(--ink)}
.cursor__ring{width:34px;height:34px;border:1px solid rgba(var(--ink-rgb),.35);transition:width .3s var(--ease),height .3s var(--ease),background .3s,border-color .3s}
.cursor__label{
position:absolute;transform:translate(-50%,-50%);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
color:#fff;opacity:0;transition:opacity .25s;white-space:nowrap;
}
.cursor.is-big .cursor__ring{width:74px;height:74px;background:var(--ink);border-color:var(--ink)}
.cursor.is-big .cursor__dot{opacity:0}
.cursor.is-big .cursor__label{opacity:1}
.cursor.is-inv .cursor__dot{background:#fff}
.cursor.is-inv .cursor__ring{border-color:rgba(255,255,255,.6)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}
/* ---------- 5. header ---------- */
.topbar{background:var(--ink);color:rgba(var(--paper-rgb),.82);font-size:.71rem;letter-spacing:.08em;position:relative;z-index:60;overflow:hidden}
.topbar__in{display:flex;justify-content:space-between;align-items:center;height:38px}
.topbar__rot{height:38px;overflow:hidden}
.topbar__rot ul{list-style:none;margin:0;padding:0;transition:transform .7s var(--ease)}
.topbar__rot li{height:38px;line-height:38px;white-space:nowrap}
.topbar__links{display:flex;align-items:center;gap:10px}
.topbar__links a:hover{color:#fff}
.topbar .sep{opacity:.4}
.topbar__lang span{opacity:.45;margin-left:6px}
.head{
position:sticky;top:0;z-index:70;color:var(--ink);
background:rgba(var(--paper-rgb),.94);backdrop-filter:blur(12px);
transition:box-shadow .5s var(--ease);
}
/* Başlık şeridi sayfa gövdesinden GENİŞTİR.
Menüye bir madde daha eklenince (Öncesi / Sonrası) 1360px'lik gövde
genişliğinde sıkışıyor, "Öncesi / Sonrası" bölü işaretinden ve
"Randevu Al" boşluktan iki satıra kırılıyordu. Üst şerit de aynı
genişliği kullanır, yoksa logo ile üstteki metin hizasız kalırdı. */
.head__in,.topbar__in{max-width:var(--shell-wide);margin-inline:auto}
.head__in{display:flex;align-items:center;justify-content:space-between;gap:clamp(18px,2vw,34px);height:var(--head-h);position:relative}
.head::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--line-2)}
.head.is-solid{box-shadow:0 6px 24px -22px rgba(var(--ink-rgb),.8)}
/* Marka kilidi: amblem solda, yazı sağda İKİ SATIR —
"BELLE AMORE" üstte, "BEAUTY" altında. Logodaki düzenin aynısı.
Eskiden üçü tek satırdaydı ve "BEAUTY" yanda duruyordu. */
.brand{display:flex;align-items:center;gap:10px;color:var(--ink)}
.brand__ic{display:block;flex:none}
.brand__ic img{display:block;width:auto;height:34px}
.brand__txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.brand__word{font-family:var(--d);font-weight:700;font-size:1.02rem;letter-spacing:.19em;line-height:1;white-space:nowrap}
/* Alt satır artık YATAY YER KAPLAMIYOR (kelimenin altında), bu yüzden
dar ekranlarda gizlenmesi gerekmiyor — eskiden üst menü sıkışmasın
diye ≤1320px ve ≤760px'te display:none yapılıyordu. */
.brand__tag{font-size:.54rem;font-weight:500;letter-spacing:.28em;line-height:1;
text-transform:uppercase;opacity:.7;white-space:nowrap}
.nav{display:flex;align-items:center;gap:clamp(14px,1.9vw,32px);color:var(--ink)}
/* nowrap ŞART: menü maddeleri iki satıra bölünürse başlık şeridinin
yüksekliği bozuluyor ve maddeler birbirine giriyor. */
.nav a{position:relative;font-family:var(--d);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:6px 0;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.nav a:hover::after{transform:scaleX(1)}
.head__act{display:flex;align-items:center;gap:clamp(8px,1.1vw,16px);color:var(--ink);flex:none}
/* Randevu düğmesi ne bölünsün ne de ezilsin */
.head__cta{white-space:nowrap;flex:none}
.brand{flex:none}
.ico{position:relative;width:34px;height:34px;display:grid;place-items:center;color:inherit;transition:color .5s,opacity .3s}
.ico svg{width:19px;height:19px}
.ico:hover{opacity:.65}
.burger{display:none;width:34px;height:34px;flex-direction:column;justify-content:center;gap:6px;color:inherit}
.burger i{display:block;width:22px;height:1.5px;background:currentColor;transition:transform .4s var(--ease)}
.burger.is-on i:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger.is-on i:last-child{transform:translateY(-3.75px) rotate(-45deg)}
/* mega */
.mega{
position:absolute;left:0;top:100%;width:100%;background:var(--paper);border-top:1px solid var(--line-2);
box-shadow:0 26px 50px -40px rgba(var(--ink-rgb),.4);
opacity:0;visibility:hidden;transform:translateY(-8px);transition:.4s var(--ease);
}
.mega.is-on{opacity:1;visibility:visible;transform:none}
.mega__in{display:grid;grid-template-columns:repeat(3,1fr) 300px;gap:40px;padding-block:44px}
.mega__in--svc{grid-template-columns:repeat(4,1fr);gap:34px}
.mega__all{margin-top:auto;padding-top:14px;font-weight:500;color:var(--accent-d)!important}
/* hizmet grupları (hizmetler sayfası) */
.svcgrp{margin-bottom:clamp(30px,4vw,52px)}
.svcgrp__t{
display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 4px;
font-family:var(--d);font-weight:700;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-d);
}
.svcgrp__t em{font-style:normal;font-family:var(--s);font-size:.76rem;letter-spacing:.04em;text-transform:none;color:var(--mute)}
.svcd__not{margin-top:20px;padding:13px 16px;background:var(--soft);border-left:3px solid var(--peach);font-size:.88rem;color:var(--ink-2)}
.pkgd__buy small{font-family:var(--s);font-size:.8rem;font-weight:400;color:var(--mute)}
.mega__col{display:flex;flex-direction:column;gap:11px}
.mega__col .lbl{margin-bottom:6px}
.mega__col a{font-size:.94rem;color:var(--ink-2);width:fit-content;position:relative;transition:color .3s}
.mega__col a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.mega__col a:hover{color:var(--accent-d)}
.mega__col a:hover::after{transform:scaleX(1)}
.mega__promo{display:block}
.mega__promo figure{aspect-ratio:16/10}
.mega__promo img{transition:transform .8s var(--ease)}
.mega__promo:hover img{transform:scale(1.05)}
.mega__promo-txt{display:block;margin-top:12px;font-size:.84rem;color:var(--mute)}
.mega__promo-txt em{display:block;font-style:normal;font-family:var(--d);font-weight:600;font-size:.98rem;color:var(--ink);margin-bottom:3px}
/* mobil menü */
.mnav{
position:fixed;inset:0;z-index:65;color:var(--paper);background:var(--ink);
padding:calc(var(--head-h) + 60px) var(--pad) 40px;
display:flex;flex-direction:column;justify-content:space-between;
clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease-io);
}
.mnav.is-on{clip-path:inset(0 0 0 0)}
.mnav__list{display:flex;flex-direction:column}
.mnav__list a{
display:flex;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--light-line);
font-family:var(--d);font-weight:600;font-size:clamp(1.2rem,4.6vw,1.7rem);letter-spacing:-.015em;
opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.mnav.is-on .mnav__list a{opacity:1;transform:none}
.mnav__list a i{font-style:normal;font-family:var(--s);font-size:.64rem;letter-spacing:.2em;color:var(--on-dark)}
.mnav__foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.mnav__foot a:first-child{font-size:1.1rem}
.mnav .btn--ink{--bg:var(--paper);--fg:var(--ink);--bd:var(--paper);--hb:var(--accent-d);--hf:#fff}
/* ---------- taslak önizleme şeridi ----------
Yalnızca panelde oturumu açık yöneticiye görünür; ziyaretçi bu
sayfada 404 alır. Sayfanın en üstüne oturur, tasarımı bozmasın diye
akışın içinde durur (sabitlenmez). */
.taslakbar{
position:relative;z-index:60;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
padding:11px clamp(16px,4vw,40px);
background:#8A5A00;color:#fff;font-size:.84rem;line-height:1.5;
}
.taslakbar__t{
flex:none;padding:3px 9px;border-radius:20px;background:rgba(255,255,255,.2);
font-size:.66rem;font-weight:700;letter-spacing:.14em;
}
.taslakbar b{font-weight:700}
.taslakbar a{margin-left:auto;color:#fff;border-bottom:1px solid rgba(255,255,255,.5);white-space:nowrap}
.taslakbar a:hover{border-color:#fff}
@media (max-width:640px){
.taslakbar{font-size:.79rem;gap:9px}
.taslakbar a{margin-left:0;flex-basis:100%}
}
/* ---------- 6. hero ---------- */
/* tam genişlikte ama alçak editoryal bant — sayfayı boydan boya kaplamaz */
.hero{
position:relative;color:#fff;overflow:hidden;
width:100%;height:clamp(420px,44vw,540px);
}
.hero__stage{position:absolute;inset:0}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1.1s var(--ease),visibility 1.1s}
.slide.is-active{opacity:1;visibility:visible}
.slide__media{position:absolute;inset:0}
/* Karartma oranı panelden ayarlanır: --ov1/--ov2/--ov3 slayt üzerinde
satır içi olarak verilir, verilmezse eski görünüm aynen korunur. */
.slide__media::before{
content:"";position:absolute;inset:0;z-index:2;
background:linear-gradient(98deg,
rgba(var(--ov-rgb),var(--ov1,.84)) 0%,
rgba(var(--ov-rgb),var(--ov2,.56)) 46%,
rgba(var(--ov-rgb),var(--ov3,.1)) 100%);
}
.slide__media img{transform:scale(1.12);transition:transform 8s linear}
.slide.is-active .slide__media img{transform:scale(1)}
.slide__copy{
position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:center;
padding-bottom:52px;
}
.slide .disp,.slide__txt{max-width:540px}
.slide .kick{color:var(--on-dark);transition-delay:.15s;margin-bottom:1rem}
.slide .kick::before{background:linear-gradient(90deg,var(--on-dark),var(--on-dark-2))}
.slide .disp{font-size:clamp(1.6rem,3.3vw,2.65rem);line-height:1.16;margin-bottom:1.1rem}
.slide .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.slide .ln b{display:block;font-weight:700;transform:translateY(108%);transition:transform 1.05s var(--ease)}
.slide.is-active .ln b{transform:none}
.slide.is-active .ln:nth-child(1) b{transition-delay:.25s}
.slide.is-active .ln:nth-child(2) b{transition-delay:.34s}
.slide.is-active .ln:nth-child(3) b{transition-delay:.43s}
.slide .ln i{font-style:normal;font-weight:400;color:var(--on-dark-2)}
.slide__txt{max-width:420px;color:rgba(255,255,255,.84);font-size:.93rem;line-height:1.62;margin-bottom:0;transition-delay:.5s}
/* H1'in içindeki konum satırı (views/anasayfa.php). Görünür, küçük ve
.kick ile aynı dilde; başlığın devasa puntosunu devralmaması için
font-size/weight/letter-spacing burada sıfırlanıyor — .disp
kalıtımıyla 4rem'lik bir satır çıkardı. */
.disp__loc{
display:block;margin-top:1.1rem;
font-family:var(--d);font-size:.68rem;font-weight:600;letter-spacing:.22em;
text-transform:uppercase;line-height:1.4;color:rgba(255,255,255,.72);
}
.slide__act{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:1.5rem;transition-delay:.6s}
.slide__act .btn{height:48px;padding:0 26px}
.slide__act .lnk{color:#fff}
.slide.is-active .reveal{opacity:1;transform:none}
/* ---- panelden ayarlanan slayt seçenekleri ---- */
.slide__badge{
display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
padding:6px 14px;margin-bottom:14px;border:1px solid rgba(255,255,255,.34);
border-radius:40px;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
color:#fff;background:rgba(255,255,255,.08);backdrop-filter:blur(4px);
}
.slide__note{
margin-top:1.1rem;font-size:.8rem;letter-spacing:.02em;
color:rgba(255,255,255,.62);transition-delay:.68s;
}
.slide__act .btn--line{
background:none;color:#fff;border:1px solid rgba(255,255,255,.45);
}
.slide__act .btn--line:hover{background:#fff;color:var(--ink);border-color:#fff}
/* yatay hizalama */
.slide--orta .slide__copy{align-items:center;text-align:center}
.slide--orta .disp,.slide--orta .slide__txt{max-width:640px;margin-left:auto;margin-right:auto}
.slide--orta .slide__act{justify-content:center}
.slide--orta .slide__badge{align-self:center}
.slide--orta .kick::before{display:none}
.slide--sag .slide__copy{align-items:flex-end;text-align:right}
.slide--sag .slide__act{justify-content:flex-end}
.slide--sag .slide__badge{align-self:flex-end}
.slide--sag .kick::before{display:none}
/* dikey konum */
.slide--ust .slide__copy{justify-content:flex-start;padding-top:clamp(38px,7vw,74px)}
.slide--alt .slide__copy{justify-content:flex-end;padding-bottom:clamp(78px,9vw,104px)}
/* açık fotoğrafta koyu yazı */
.slide--koyu .slide__copy{color:var(--ink)}
.slide--koyu .kick{color:var(--accent-d)}
.slide--koyu .kick::before{background:linear-gradient(90deg,var(--accent),var(--accent-d))}
.slide--koyu .ln i{color:var(--accent-d)}
.slide--koyu .slide__txt{color:var(--ink-2)}
.slide--koyu .slide__note{color:var(--mute)}
.slide--koyu .slide__badge{border-color:rgba(var(--ink-rgb),.2);background:rgba(255,255,255,.55);color:var(--ink)}
.slide--koyu .slide__act .lnk{color:var(--ink)}
.slide--koyu .slide__act .btn--line{color:var(--ink);border-color:rgba(var(--ink-rgb),.3)}
.slide--koyu .slide__act .btn--line:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
/* yakınlaşma efekti kapalıysa */
.slide--nozoom .slide__media img{transform:none;transition:none}
.slide--nozoom.is-active .slide__media img{transform:none}
@media (max-width:760px){
.slide--sag .slide__copy,.slide--orta .slide__copy{align-items:flex-start;text-align:left}
.slide--sag .slide__act,.slide--orta .slide__act{justify-content:flex-start}
}
.hero__ui{position:absolute;left:0;right:0;bottom:22px;z-index:4;display:flex;align-items:center;gap:22px}
.hero__dots{display:flex;gap:10px;flex:1;max-width:190px}
.hero__dots button{position:relative;flex:1;height:2px;background:rgba(255,255,255,.3);overflow:hidden}
.hero__dots button i{position:absolute;inset:0;width:0;background:#fff;display:block}
.hero__dots button.is-on i{width:100%;transition:width 6.5s linear}
.hero__nums{display:flex;align-items:center;gap:10px;font-size:.72rem;letter-spacing:.18em;color:rgba(255,255,255,.62)}
.hero__nums span:first-child{color:#fff}
.hero__nums i{width:26px;height:1px;background:rgba(255,255,255,.38)}
.hero__arrows{margin-left:auto;display:flex;gap:8px}
.hero__arrows button{width:44px;height:44px;border:1px solid rgba(255,255,255,.32);display:grid;place-items:center;transition:background .4s var(--ease),color .4s,border-color .4s}
.hero__arrows svg{width:20px;height:10px}
.hero__arrows button:hover{background:#fff;color:var(--ink);border-color:#fff}
/* dar bantta yer kaplamamaları için gizli; geniş ekranda üst köşede künye */
.hero__side{
position:absolute;top:22px;left:50%;transform:translateX(-50%);z-index:4;
width:min(100% - 2 * var(--pad), var(--shell) - 2 * var(--pad));
display:flex;align-items:center;justify-content:flex-end;gap:12px;
font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.6);white-space:nowrap;
}
.hero__side i{width:26px;height:1px;background:rgba(255,255,255,.35)}
.hero__scroll{display:none}
/* ---------- ticker ---------- */
.ticker{overflow:hidden;padding-block:17px;background:var(--soft);color:var(--ink)}
.ticker__row{display:flex;gap:22px;align-items:center;width:max-content;animation:tick 52s linear infinite}
.ticker__row span{font-family:var(--d);font-weight:600;font-size:clamp(.66rem,.9vw,.78rem);letter-spacing:.17em;text-transform:uppercase;white-space:nowrap}
.ticker__row b{font-weight:400;color:var(--peach)}
.ticker:hover .ticker__row{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
/* ---------- 7. story ---------- */
.story{padding-block:clamp(80px,11vw,150px)}
.story__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,110px);align-items:center}
.story__media{position:relative;padding-bottom:70px}
.story__img{will-change:transform}
.story__img--a{aspect-ratio:4/5}
.story__img--b{position:absolute;right:-6%;bottom:0;width:46%;aspect-ratio:1/1;box-shadow:-22px -22px 0 var(--paper)}
.story__stamp{
position:absolute;left:-14px;top:26px;display:flex;align-items:center;gap:10px;
writing-mode:vertical-rl;font-size:.62rem;letter-spacing:.3em;color:var(--mute);
}
.story__stamp i{width:1px;height:40px;background:var(--peach)}
.story__body .h2{margin-bottom:1.6rem}
.story__body p{color:var(--ink-2)}
.sig{margin-top:2.2rem;padding-left:20px;border-left:2px solid var(--accent)}
.sig__name{display:block;font-family:var(--d);font-weight:600;font-size:1.05rem}
.sig__role{display:block;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-top:4px}
.stats{list-style:none;margin:3.2rem 0 0;padding:26px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;border-top:1px solid var(--line)}
.stats b{display:block;font-family:var(--d);font-size:clamp(1.6rem,2.5vw,2.2rem);font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.stats span{display:block;font-size:.71rem;letter-spacing:.1em;color:var(--mute);margin-top:6px}
/* ---------- 8. services ---------- */
.svc{padding-block:clamp(70px,9vw,120px);background:var(--soft)}
.svc__list{position:relative}
.svcrow{
position:relative;display:grid;grid-template-columns:56px 1fr 1.1fr auto;gap:26px;align-items:center;
padding:30px 0;border-top:1px solid var(--line);
}
.svcrow:last-of-type{border-bottom:1px solid var(--line)}
/* hover vurgusu satırın iki yanına taşar; taşma payı asla sayfa
kenar boşluğunu geçmemeli — yoksa dar ekranda yatay kayma olur */
.svcrow::before{content:"";position:absolute;top:0;bottom:0;
left:calc(-1 * min(24px, var(--pad)));right:calc(-1 * min(24px, var(--pad)));
background:var(--paper);opacity:0;transition:opacity .45s var(--ease);z-index:-1}
.svcrow:hover::before{opacity:1}
.svcrow__n{font-style:normal;font-size:.68rem;letter-spacing:.16em;color:var(--peach)}
.svcrow h3{margin:0;font-family:var(--d);font-weight:600;font-size:clamp(1.05rem,1.8vw,1.5rem);letter-spacing:-.015em;line-height:1.2;transition:transform .5s var(--ease),color .4s}
.svcrow:hover h3{transform:translateX(10px);color:var(--accent-d)}
.svcrow p{margin:0;color:var(--mute);font-size:.92rem;max-width:420px}
.svcrow__meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:.72rem;letter-spacing:.1em;color:var(--mute);white-space:nowrap}
.svcrow__meta em{font-style:normal;font-family:var(--d);font-weight:600;font-size:.9rem;letter-spacing:0;color:var(--ink)}
.svc__peek{
position:absolute;top:0;left:0;width:250px;height:320px;pointer-events:none;z-index:5;
box-shadow:0 22px 44px -26px rgba(var(--ink-rgb),.45);
opacity:0;transform:translate(-50%,-50%) scale(.9);transition:opacity .4s var(--ease),transform .5s var(--ease);
}
.svc__peek.is-on{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* ---------- 9. packages ---------- */
.pkg{padding-block:clamp(80px,10vw,140px)}
.pkg__switch{position:relative;display:inline-flex;border:1px solid var(--line);padding:4px;background:var(--paper)}
.pkg__switch button{position:relative;z-index:2;padding:11px 22px;font-family:var(--d);font-size:.7rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);transition:color .4s}
.pkg__switch button.is-on{color:#fff}
.pkg__pill{position:absolute;top:4px;left:4px;height:calc(100% - 8px);background:var(--ink);transition:transform .5s var(--ease),width .5s var(--ease);z-index:1}
.pkg__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);align-items:stretch}
.pkgcard{
position:relative;display:flex;flex-direction:column;padding:clamp(26px,3vw,40px);
border:1px solid var(--line);background:var(--paper);
transition:border-color .5s,transform .6s var(--ease),box-shadow .6s var(--ease);
}
.pkgcard:hover{border-color:rgba(var(--ink-rgb),.3);transform:translateY(-5px);box-shadow:0 26px 50px -40px rgba(var(--ink-rgb),.45)}
.pkgcard--hi{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pkgcard--hi:hover{transform:translateY(-7px);box-shadow:0 30px 56px -34px rgba(var(--ink-rgb),.6)}
.pkgcard__flag{
position:absolute;top:0;right:clamp(26px,3vw,40px);transform:translateY(-50%);
background:var(--peach);color:var(--flag-fg);font-family:var(--d);font-weight:700;font-size:.6rem;
letter-spacing:.14em;text-transform:uppercase;padding:7px 14px;
}
.pkgcard__n{display:block;font-family:var(--d);font-weight:700;font-size:1.02rem;letter-spacing:.16em;text-transform:uppercase}
.pkgcard__d{margin:.7rem 0 0;font-size:.89rem;color:var(--mute);min-height:66px}
.pkgcard--hi .pkgcard__d{color:rgba(var(--paper-rgb),.66)}
/* Fiyat bloğunun yerini alan kampanya etiketi. Fiyat yayınlanmadığı
için görünen tek rakam yüzdelik indirimdir. Kampanya yoksa aynı
yükseklikte açıklama satırı basılır, kartlar birbirini tutsun. */
.pkgcard__camp{
display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
margin:26px 0 22px;padding-bottom:22px;border-bottom:1px solid var(--line);min-height:76px;
}
.pkgcard--hi .pkgcard__camp{border-color:var(--light-line)}
.pkgcard__camp b{
font-family:var(--d);font-weight:700;font-size:clamp(1.75rem,2.9vw,2.35rem);
letter-spacing:-.03em;line-height:1;color:var(--accent-d);
}
.pkgcard--hi .pkgcard__camp b{color:var(--on-dark)}
.pkgcard__camp>span{
display:flex;flex-direction:column;gap:4px;
font-family:var(--d);font-weight:600;font-size:.86rem;letter-spacing:.04em;
}
.pkgcard__camp em{font-style:normal;font-family:var(--s);font-weight:400;font-size:.73rem;color:var(--mute)}
.pkgcard--hi .pkgcard__camp em{color:rgba(var(--paper-rgb),.6)}
/* Kampanyasız kart: rakam yok, yalnızca açıklama */
.pkgcard__camp--bos>span{font-weight:500;font-size:.82rem;color:var(--mute);letter-spacing:.02em}
.pkgcard--hi .pkgcard__camp--bos>span{color:rgba(var(--paper-rgb),.66)}
.pkgcard__list{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-direction:column;gap:11px;flex:1}
.pkgcard__list li{position:relative;padding-left:22px;font-size:.89rem;color:var(--ink-2)}
.pkgcard--hi .pkgcard__list li{color:rgba(var(--paper-rgb),.86)}
.pkgcard__list li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:5px;border:solid var(--accent);border-width:0 0 1.5px 1.5px;transform:rotate(-45deg)}
.pkgcard--hi .pkgcard__list li::before{border-color:var(--peach)}
.pkgcard--hi .btn--ink{--bg:var(--paper);--fg:var(--ink);--bd:var(--paper);--hb:var(--accent-d);--hf:#fff}
.pkgcard__note{display:block;margin-top:14px;font-size:.71rem;letter-spacing:.06em;color:var(--mute);text-align:center}
.pkgcard--hi .pkgcard__note{color:rgba(var(--paper-rgb),.55)}
.pkg__legal{margin:38px 0 0;max-width:760px;font-size:.78rem;line-height:1.75;color:var(--mute)}
/* ---------- 11. compare ---------- */
.cmp{padding-block:clamp(80px,10vw,140px)}
.cmp__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,6vw,90px);align-items:center}
.cmp__body p{color:var(--ink-2);max-width:480px}
.cmp__body .h2{margin-bottom:1.5rem}
.cmp__facts{list-style:none;margin:2rem 0;padding:0;border-top:1px solid var(--line)}
.cmp__facts li{display:flex;gap:20px;padding:13px 0;border-bottom:1px solid var(--line);font-size:.89rem}
.cmp__facts b{flex:0 0 110px;font-weight:600;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding-top:3px}
.cmp__facts span{color:var(--ink-2)}
.cmp__box{position:relative;aspect-ratio:4/5;overflow:hidden;cursor:ew-resize;user-select:none;touch-action:pan-y}
.cmp__ph{position:absolute;inset:0}
.cmp__ph--before img{filter:saturate(.72) contrast(.94) brightness(.98)}
.cmp__ph--top{clip-path:inset(0 0 0 50%)}
.cmp__tag{position:absolute;bottom:18px;z-index:4;background:rgba(var(--ink-rgb),.72);color:#fff;font-family:var(--d);font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:7px 13px;backdrop-filter:blur(3px)}
.cmp__tag--l{left:18px}
.cmp__tag--r{right:18px}
.cmp__handle{position:absolute;top:0;bottom:0;left:50%;z-index:5;width:2px;transform:translateX(-1px)}
.cmp__handle i{position:absolute;inset:0;background:#fff}
.cmp__handle b{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;
background:#fff;color:var(--ink);display:grid;place-items:center;box-shadow:0 6px 20px rgba(var(--ink-rgb),.28);
}
.cmp__handle svg{width:26px;height:11px;stroke-width:1.5}
.cmp__act{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
/* ---------- öncesi / sonrası sayfası ---------- */
.bag{padding-block:clamp(44px,5vw,76px) clamp(60px,7vw,100px)}
/* İki sütunda kartlar 660x825px'e çıkıyordu; iki çalışma ekranı
dolduruyor, sayfa katalog gibi taranamıyordu. auto-fill ile geniş
ekranda üç, tablette iki, telefonda tek sütuna iniyor. */
.bag__grid{
display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));
gap:clamp(20px,2.4vw,34px);
}
/* İki sütuna düşen orta bantta ızgara sınırlanır. auto-fill artan
genişliği sütunlara dağıttığı için kartlar burada üç sütunlu
düzendekinden BÜYÜK çıkıyordu (1100px'te 482x642'ye karşı 383x510);
kap daraltılınca ölçü bütün genişliklerde birbirini tutuyor. */
@media (min-width:761px) and (max-width:1180px){
.bag__grid{max-width:820px;margin-inline:auto}
}
.bag__i{display:flex;flex-direction:column}
.bag__box{
position:relative;aspect-ratio:3/4;overflow:hidden;
cursor:ew-resize;user-select:none;touch-action:pan-y;background:var(--soft);
}
.bag__ph{position:absolute;inset:0;margin:0}
.bag__ph img{width:100%;height:100%;object-fit:cover}
/* Öncesi karesi hafif soluk: iki fotoğraf arasındaki fark, kaydırma
sırasında gözle daha kolay ayrılsın. */
.bag__ph:not(.bag__ph--top) img{filter:saturate(.72) contrast(.94) brightness(.98)}
.bag__ph--top{clip-path:inset(0 0 0 50%)}
.bag__handle{position:absolute;top:0;bottom:0;left:50%;z-index:5;width:2px;transform:translateX(-1px)}
.bag__handle i{position:absolute;inset:0;background:#fff}
/* Kart küçüldüğü için tutamak da küçüldü; 46px kutuyu boğuyordu. */
.bag__handle b{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
background:#fff;color:var(--ink);box-shadow:0 6px 22px -8px rgba(var(--ink-rgb),.6);
}
.bag__handle svg{width:21px;height:9px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* Öncesi/Sonrası etiketleri de bir tık küçülür */
.bag__box .cmp__tag{bottom:12px;font-size:.55rem;padding:5px 10px}
.bag__box .cmp__tag--l{left:12px}
.bag__box .cmp__tag--r{right:12px}
.bag__handle:focus-visible{outline:0}
.bag__handle:focus-visible b{box-shadow:0 0 0 3px var(--accent)}
.bag__x{padding-top:14px}
.bag__t{margin:0 0 6px;font-family:var(--d);font-weight:700;font-size:1.02rem;letter-spacing:-.02em;line-height:1.35}
.bag__d{margin:0;font-size:.87rem;line-height:1.65;color:var(--ink-2)}
.bag__facts{list-style:none;margin:12px 0 0;padding:12px 0 0;border-top:1px solid var(--line)}
.bag__facts li{display:flex;gap:12px;padding:5px 0;font-size:.82rem}
.bag__facts b{flex:0 0 80px;font-weight:600;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding-top:3px}
.bag__facts span{color:var(--ink-2)}
.bag__note{
margin:clamp(34px,4vw,56px) 0 0;padding-top:20px;border-top:1px solid var(--line);
font-size:.84rem;line-height:1.7;color:var(--mute);max-width:70ch;
}
/* ---------- 12. team ---------- */
.team{padding-block:clamp(70px,9vw,120px);background:var(--sage)}
.team__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)}
.tm figure{aspect-ratio:3/4;margin-bottom:16px}
.tm figure img{filter:saturate(.62);transition:filter .7s var(--ease),transform 1.1s var(--ease)}
.tm:hover figure img{filter:saturate(1);transform:scale(1.04)}
.tm h3{margin:0;font-family:var(--d);font-weight:600;font-size:1.02rem;letter-spacing:-.01em}
.tm__a{color:inherit;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;text-decoration-thickness:1px;transition:text-decoration-color .3s var(--ease),color .3s var(--ease)}
.tm__a:hover,.tm__a:focus-visible{color:var(--accent-d);text-decoration-color:currentColor}
.tm span{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-d);margin:5px 0 8px}
.tm p{margin:0;font-size:.85rem;color:var(--mute)}
/* ---------- 13. quotes ---------- */
.say{padding-block:clamp(80px,10vw,140px);background:var(--blush)}
.say__in{text-align:center;position:relative}
.say__stage{position:relative;min-height:250px;max-width:900px;margin-inline:auto}
.say__q{position:absolute;inset:0;margin:0;opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .8s var(--ease);pointer-events:none}
.say__q.is-active{opacity:1;transform:none;pointer-events:auto}
.say__q p{font-family:var(--d);font-weight:500;font-size:clamp(1.05rem,2vw,1.6rem);letter-spacing:-.015em;line-height:1.52;margin:0 0 28px}
.say__q footer b{display:block;font-weight:600;font-size:.88rem;letter-spacing:.06em}
.say__q footer span{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-d);margin-top:5px}
.say__ui{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:26px;flex-wrap:wrap}
.say__ui button{width:46px;height:46px;border:1px solid var(--line);display:grid;place-items:center;transition:background .4s,color .4s,border-color .4s}
.say__ui button svg{width:20px;height:10px}
.say__ui button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.say__dots{display:flex;gap:8px}
.say__dots button{width:7px;height:7px;border-radius:50%;border:0;background:rgba(var(--ink-rgb),.2);padding:0;transition:width .35s var(--ease),background .35s}
.say__dots button.is-on{background:var(--accent-d);width:20px;border-radius:999px}
.say__rate{flex-basis:100%;font-size:.71rem;letter-spacing:.14em;color:var(--mute);margin-top:8px}
/* Google puanı özeti (uydurma yorum yerine gerçek puan) */
.gscore{max-width:520px;margin-inline:auto;text-align:center}
.gscore__n{display:block;font-family:var(--d);font-weight:700;font-size:clamp(3rem,7vw,4.6rem);letter-spacing:-.04em;line-height:1}
.gscore__stars{display:inline-flex;gap:5px;margin:14px 0 10px}
.gscore__stars i{width:17px;height:17px;background:var(--peach);
clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.gscore__t{display:block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.gscore__d{margin:18px auto 26px;max-width:420px;color:var(--ink-2)}
/* ---------- Google'dan çekilen yorum kartları ---------- */
.gsay{
display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
gap:clamp(16px,2vw,26px);margin-top:clamp(38px,4.4vw,60px);text-align:left;
}
.gsay__i{
margin:0;display:flex;flex-direction:column;gap:14px;
padding:clamp(20px,2.2vw,28px);background:var(--paper);border:1px solid var(--line);
}
.gsay__st{color:var(--peach);font-size:.92rem;letter-spacing:.14em;line-height:1}
.gsay__i blockquote{
margin:0;flex:1;font-size:.92rem;line-height:1.72;color:var(--ink-2);
}
.gsay__i figcaption{
display:flex;align-items:center;gap:11px;
padding-top:14px;border-top:1px solid var(--line-2);
}
.gsay__i figcaption img,.gsay__av{
width:36px;height:36px;flex:none;border-radius:50%;object-fit:cover;
}
.gsay__av{
display:grid;place-items:center;background:var(--accent-d);color:#fff;
font-family:var(--d);font-weight:700;font-size:.86rem;
}
.gsay__i figcaption>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.gsay__i figcaption b{font-size:.86rem;font-weight:600;color:var(--ink)}
.gsay__i figcaption span span{font-size:.74rem;color:var(--mute)}
.gsay__kaynak{
margin:clamp(20px,2.4vw,30px) 0 0;font-size:.74rem;letter-spacing:.06em;color:var(--mute);
}
/* ---------- 14. booking ---------- */
.bk{padding-block:clamp(80px,10vw,140px)}
.bk__grid{display:grid;grid-template-columns:1fr 1.06fr;gap:clamp(40px,6vw,90px);align-items:stretch}
.bk__ph{position:relative;min-height:520px}
.bk__ph figcaption{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:30px;color:#fff;background:linear-gradient(to top,rgba(var(--ov-rgb),.9),transparent)}
.bk__ph figcaption .lbl{margin-bottom:8px}
.bk__ph figcaption p{margin:0;font-size:.86rem;line-height:1.62;color:rgba(255,255,255,.86)}
.bk__body .h2{margin-bottom:1.2rem}
.bk__body>p{color:var(--ink-2);max-width:440px}
.bk__form{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;margin-top:2rem}
/* Tam genişlik istenen öğeler iki sütunu da kaplar. width:100% tek
başına yetmiyor: ızgarada öğe yine tek sütuna oturuyor, gönder
düğmesi 581px'lik formda 281px kalıyordu. */
.bk__form .btn--full,.bk__form .formerr,.bk__form .formok{grid-column:1/-1}
/* Form alan ızgarası.
TEMEL KURAL EKSİKTİ: yalnızca dar ekran medya sorgusunda
"grid-template-columns:1fr" vardı, `display:grid` hiç tanımlanmamıştı.
Bu yüzden kapsayıcı düz bir blok kalıyor, çocuklardaki
grid-column / .fld--half çalışmıyor ve alanlar arasında HİÇ boşluk
olmuyordu (ölçtüm: 0px). */
.fldgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.7vw,20px)}
/* Izgaradan sonra gelen onay satırı ve düğme için nefes payı */
.fldgrid + *{margin-top:clamp(20px,2.2vw,26px)}
.chk + button,.chk + .btn{margin-top:16px}
.fld{grid-column:1/-1;position:relative}
.fld--half{grid-column:span 1}
.fld label{display:block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:7px}
.fld input,.fld select,.fld textarea{
width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;padding:9px 0;
font-size:.97rem;font-weight:400;transition:border-color .4s;resize:none;
}
.fld select{appearance:none;cursor:pointer;
background-image:var(--arrow);
background-repeat:no-repeat;background-position:right 2px center;background-size:10px}
.fld input::placeholder,.fld textarea::placeholder{color:var(--mute)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--ink)}
.fld.is-bad input{border-color:#C0483C}
.chk{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;font-size:.81rem;color:var(--mute);cursor:pointer;line-height:1.55}
.chk input{position:absolute;opacity:0;width:0;height:0}
.chk i{flex:0 0 17px;width:17px;height:17px;border:1px solid var(--line);margin-top:3px;position:relative;transition:background .3s,border-color .3s}
.chk i::after{content:"";position:absolute;left:5px;top:1.5px;width:5px;height:9px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg) scale(0);transition:transform .3s var(--ease)}
.chk input:checked+i{background:var(--ink);border-color:var(--ink)}
.chk input:checked+i::after{transform:rotate(45deg) scale(1)}
.chk.is-bad i{border-color:#C0483C}
.chk a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.bk__ok{grid-column:1/-1;margin:0;font-size:.85rem;color:var(--accent-d);text-align:center}
/* ---------- 15. journal ---------- */
.jr{padding-block:clamp(70px,9vw,120px);background:var(--soft)}
/* auto-FILL (auto-fit değil): boş sütunlar korunur. auto-fit'te tek
yazı kalınca kart bütün satırı kaplayıp görsel devasa oluyordu. */
.jr__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:clamp(20px,2.6vw,40px)}
/* ---- blog listesi başlığı ve kategori süzgeci ---- */
.jrhead{
display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap;
margin-bottom:clamp(26px,3vw,42px);
}
.jrhead__t{margin:0;font-family:var(--d);font-weight:700;font-size:clamp(1.1rem,1.7vw,1.4rem);letter-spacing:-.02em}
.jrhead__alt{
display:inline-block;margin-left:16px;font-family:var(--s);font-size:.78rem;font-weight:500;
letter-spacing:.02em;color:var(--accent-d);border-bottom:1px solid currentColor;padding-bottom:1px;
}
.blognav{display:flex;gap:8px;flex-wrap:wrap}
.blognav a{
display:inline-flex;align-items:center;gap:7px;padding:8px 15px;
border:1px solid var(--line);background:var(--paper);
font-size:.78rem;color:var(--ink-2);transition:background .3s var(--ease),color .3s,border-color .3s;
}
.blognav a i{font-style:normal;font-size:.68rem;color:var(--mute);font-variant-numeric:tabular-nums}
.blognav a:hover{border-color:var(--accent);color:var(--accent-d)}
.blognav a.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.blognav a.is-on i{color:rgba(255,255,255,.6)}
.jr__bos{margin:0;padding:40px 0;color:var(--mute)}
.jr__bos a{color:var(--accent-d);border-bottom:1px solid currentColor}
/* ---- sayfalama ----
View::pager() hem panelde hem sitede kullanılıyor; panelin kuralları
admin.css'te olduğu için site tarafında ayrıca tanımlanmalı, aksi
hâlde bağlantılar biçimsiz düz metin olarak çıkıyordu.
Kategori süzgeciyle (.blognav) aynı dili konuşur. */
.pager{
display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;
margin-top:clamp(34px,4vw,56px);
}
.pager__i{
display:inline-flex;align-items:center;justify-content:center;
min-width:42px;height:42px;padding:0 12px;
border:1px solid var(--line);background:var(--paper);
font-family:var(--s);font-size:.82rem;color:var(--ink-2);
font-variant-numeric:tabular-nums;
transition:background .3s var(--ease),color .3s,border-color .3s;
}
.pager__i:hover{border-color:var(--accent);color:var(--accent-d)}
.pager__i.is-on{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:600}
.pager__nav{font-size:1.05rem;line-height:1}
.pager__gap{padding:0 2px;color:var(--mute);user-select:none}
/* ---- öne çıkan yazı ---- */
.feat{padding-block:clamp(44px,5vw,72px) 0;background:var(--soft)}
.feat__c{
display:grid;grid-template-columns:1.05fr 1fr;align-items:stretch;
background:var(--paper);border:1px solid var(--line);color:inherit;overflow:hidden;
transition:border-color .4s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease);
}
.feat__c:hover{border-color:var(--accent);box-shadow:0 30px 60px -44px rgba(var(--ink-rgb),.55);transform:translateY(-3px)}
/* Görsel mutlak konumlanır: aksi hâlde figürün yüksekliği fotoğrafın
doğal boyutundan gelir ve kart aşırı uzar. Böylece yüksekliği
aspect-ratio ile satır belirler. */
.feat__ph{position:relative;margin:0;aspect-ratio:4/3;min-height:clamp(240px,26vw,340px);overflow:hidden}
.feat__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.feat__c:hover .feat__ph img{transform:scale(1.045)}
.feat__x{
display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
padding:clamp(26px,3.4vw,50px);
}
.feat__tag{
display:inline-block;padding:5px 13px;margin-bottom:16px;
background:var(--accent);color:#fff;
font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
}
.feat__m{
display:block;margin-bottom:12px;font-size:.7rem;letter-spacing:.13em;
text-transform:uppercase;color:var(--accent-d);
}
.feat__m i{font-style:normal;opacity:.45;margin:0 3px}
.feat__t{
margin:0 0 14px;font-family:var(--d);font-weight:700;
font-size:clamp(1.25rem,2.4vw,1.9rem);letter-spacing:-.025em;line-height:1.22;
transition:color .35s;
}
.feat__c:hover .feat__t{color:var(--accent-d)}
.feat__d{margin:0 0 22px;font-size:.95rem;line-height:1.75;color:var(--mute);max-width:52ch}
.feat__go{
display:inline-flex;align-items:center;gap:12px;
font-family:var(--d);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:6px;transition:border-color .35s,color .35s;
}
.feat__go svg{width:22px;height:11px;transition:transform .4s var(--ease)}
.feat__c:hover .feat__go{color:var(--accent-d);border-color:var(--accent)}
.feat__c:hover .feat__go svg{transform:translateX(6px)}
/* ---- yazı kartı ---- */
.post{background:var(--paper);border:1px solid var(--line);transition:border-color .4s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease)}
.post:hover{border-color:var(--accent);box-shadow:0 26px 52px -42px rgba(var(--ink-rgb),.5);transform:translateY(-3px)}
.post>a{display:flex;flex-direction:column;height:100%;padding:0 0 22px}
.post figure{position:relative;aspect-ratio:3/2;margin:0 0 18px;overflow:hidden}
.post figure img{transition:transform 1.1s var(--ease)}
.post:hover figure img{transform:scale(1.05)}
.post__k{
position:absolute;left:0;bottom:0;z-index:2;padding:6px 13px;
background:var(--paper);color:var(--accent-d);
font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
}
.post__m{
display:block;padding:0 22px;font-size:.68rem;letter-spacing:.12em;
text-transform:uppercase;color:var(--mute);margin-bottom:10px;
}
.post__m i{font-style:normal;opacity:.5;margin:0 2px}
.post h3{
margin:0 0 10px;padding:0 22px;font-family:var(--d);font-weight:600;
font-size:clamp(1rem,1.3vw,1.16rem);letter-spacing:-.015em;line-height:1.4;transition:color .3s;
}
.post:hover h3{color:var(--accent-d)}
.post p{margin:0 0 18px;padding:0 22px;font-size:.88rem;line-height:1.7;color:var(--mute)}
.post__go{
margin-top:auto;padding:0 22px;display:inline-flex;align-items:center;gap:9px;
font-family:var(--d);font-size:.66rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
color:var(--accent-d);
}
.post__go svg{width:18px;height:9px;transition:transform .4s var(--ease)}
.post:hover .post__go svg{transform:translateX(5px)}
/* ---------- instagram ---------- */
.ig{padding-block:clamp(50px,6vw,80px)}
.ig__head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.ig__head .lbl{margin:0}
.ig__row{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;padding-inline:6px}
.ig__c{aspect-ratio:1/1}
.ig__c img{transition:transform .9s var(--ease),opacity .5s}
.ig__c:hover img{transform:scale(1.06);opacity:.86}
.ig__act{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
/* ---------- sosyal medyada biz (instagram akışı) ----------
Galeri şeridinden (.ig) ayrı bir bileşen: buradaki kareler
Instagram'dan otomatik gelir, üzerine açıklama ve beğeni sayısı
biner. Zemin --soft: iki bölüm üst üste gelince ayrıştığı belli
olsun diye. */
.soc{padding-block:clamp(48px,6vw,84px);background:var(--soft)}
.soc__hd{display:flex;align-items:center;gap:clamp(14px,2vw,22px);flex-wrap:wrap}
.soc__at{
font-family:var(--d);font-size:.82rem;font-weight:600;letter-spacing:.04em;
color:var(--accent-d);border-bottom:1px solid transparent;padding-bottom:2px;
transition:border-color .3s;
}
.soc__at:hover{border-color:var(--accent)}
/* Kolon sayısı gönderi sayısına göre sunucudan gelir (--soc-kol):
altı gönderi dört kolonda ikinci sırayı yarım bırakıyordu. Dar
ekran kuralları bu değeri sonraki media query'lerde eziyor. */
.soc__grid{
display:grid;grid-template-columns:repeat(var(--soc-kol,4),1fr);
gap:clamp(10px,1.2vw,16px);margin-top:clamp(24px,3vw,36px);
}
.soc__i{position:relative;display:block;overflow:hidden;background:var(--paper)}
.soc__ph{aspect-ratio:1/1;margin:0}
.soc__ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.soc__i:hover .soc__ph img{transform:scale(1.06)}
/* Perde: açıklama okunabilsin diye alttan yukarı koyulaşır. */
.soc__ov{
position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
justify-content:flex-end;gap:8px;padding:14px;
background:linear-gradient(to top,rgba(var(--ov-rgb),.82),rgba(var(--ov-rgb),.12) 62%,transparent);
opacity:0;transition:opacity .4s var(--ease);
}
.soc__i:hover .soc__ov,.soc__i:focus-visible .soc__ov{opacity:1}
.soc__cap{
font-family:var(--s);font-size:.8rem;line-height:1.55;color:#fff;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.soc__st{display:flex;align-items:center;gap:14px}
.soc__st b{
display:inline-flex;align-items:center;gap:5px;
font-family:var(--d);font-size:.72rem;font-weight:600;color:#fff;
}
.soc__st svg{width:14px;height:14px;fill:currentColor;opacity:.9}
.soc__ic{
position:absolute;right:10px;top:10px;z-index:3;
display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
background:rgba(var(--paper-rgb),.9);color:var(--ink);
transition:opacity .35s var(--ease);
}
.soc__ic svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.soc__i:hover .soc__ic{opacity:0}
.soc__i:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.soc__note{
margin:clamp(16px,2vw,22px) 0 0;font-size:.78rem;color:var(--mute);
}
.soc__note a{color:var(--accent-d);border-bottom:1px solid var(--line)}
/* Anahtar girilmeden önceki hâl: yalnızca takip çağrısı. */
.soc__bos{
margin-top:clamp(22px,3vw,32px);padding:clamp(22px,3vw,34px);
background:var(--paper);border:1px solid var(--line);
display:flex;align-items:center;justify-content:space-between;
gap:clamp(16px,2.4vw,30px);flex-wrap:wrap;
}
.soc__bos p{margin:0;max-width:52ch;font-size:.94rem;line-height:1.7;color:var(--ink-2)}
/* ---------- paket detayı: devralınan kapsam ----------
Üst basamaktan gelen maddeler pakete özel olanlardan ayrılsın diye
soluk ve girintili; ziyaretçi neyin bu pakete özel olduğunu görsün. */
.pkgd__devir{
margin-top:18px;padding-top:16px;border-top:1px dashed var(--line);
}
.pkgd__devir-b{
display:block;margin-bottom:10px;font-size:.78rem;letter-spacing:.02em;color:var(--mute);
}
.pkgd__devir-b b{color:var(--accent-d);font-weight:600}
.pkgd__list--devir li{color:var(--mute);font-size:.9rem}
/* ---------- semt sayfası: yola dair somut bilgi ----------
Semt sayfasını diğerlerinden ayıran veri burada duruyor; şablondan
gelen ortak bölümlerden görsel olarak da ayrışsın diye kutulu. */
.bolge{padding-block:clamp(38px,4.5vw,64px);background:var(--soft)}
.bolge__grid{
list-style:none;margin:clamp(22px,2.6vw,32px) 0 0;padding:0;
display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:clamp(14px,1.8vw,22px);
}
.bolge__i{
background:var(--paper);border:1px solid var(--line);padding:18px 20px;
display:flex;flex-direction:column;gap:8px;
}
.bolge__i b{
font-size:.64rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
color:var(--accent-d);
}
.bolge__i span{font-size:.92rem;line-height:1.72;color:var(--ink-2)}
/* ---------- hizmet sayfası: sorumlu uzman (E-E-A-T) ----------
Sağlık/estetik içeriğinde "uygulamayı kim yapıyor" sorusunun adıyla
cevaplanması hem ziyaretçi güveni hem YMYL sıralama sinyali. */
.eeat{padding-block:clamp(34px,4vw,56px);background:var(--soft)}
.eeat__in{position:relative;display:flex;align-items:center;gap:clamp(18px,2.6vw,34px)}
.eeat__ph{flex:none;width:clamp(84px,9vw,116px);aspect-ratio:1/1;margin:0;border-radius:50%;overflow:hidden}
.eeat__ph img{width:100%;height:100%;object-fit:cover}
.eeat__x{min-width:0}
.eeat__x .lbl{margin-bottom:8px}
.eeat__n{margin:0;font-family:var(--d);font-weight:600;font-size:clamp(1.06rem,1.5vw,1.28rem);color:var(--ink)}
.eeat__r{display:block;margin-top:4px;font-size:.82rem;color:var(--accent-d)}
.eeat__d{margin:10px 0 12px;font-size:.88rem;line-height:1.7;color:var(--ink-2);max-width:62ch}
.eeat__t{
position:absolute;top:0;right:0;font-size:.7rem;letter-spacing:.06em;color:var(--mute);
}
/* ---------- hizmet sayfası: sıkça sorulanlar ---------- */
.svcfaq{padding-block:clamp(40px,5vw,72px)}
.svcfaq__list{margin-top:clamp(22px,2.6vw,32px);border-top:1px solid var(--line)}
.svcfaq__i{border-bottom:1px solid var(--line)}
.svcfaq__i summary{
list-style:none;cursor:pointer;padding:17px 34px 17px 0;position:relative;
font-family:var(--d);font-weight:600;font-size:clamp(.94rem,1.15vw,1.04rem);
line-height:1.5;color:var(--ink);transition:color .3s;
}
.svcfaq__i summary::-webkit-details-marker{display:none}
.svcfaq__i summary:hover{color:var(--accent-d)}
/* Artı/eksi işareti — iki çizgi, açıkken biri döner */
.svcfaq__i summary::before,
.svcfaq__i summary::after{
content:"";position:absolute;right:6px;top:50%;width:13px;height:1.5px;
background:var(--accent);transition:transform .3s var(--ease);
}
.svcfaq__i summary::after{transform:rotate(90deg)}
.svcfaq__i[open] summary::after{transform:rotate(0)}
.svcfaq__a{padding:0 34px 20px 0;font-size:.92rem;line-height:1.8;color:var(--ink-2)}
.svcfaq__a p{margin:0 0 10px}
.svcfaq__a p:last-child{margin-bottom:0}
.svcfaq__a a{color:var(--accent-d);border-bottom:1px solid var(--line)}
.svcfaq__more{margin:clamp(20px,2.4vw,28px) 0 0;font-size:.84rem;color:var(--mute)}
.svcfaq__more a{color:var(--accent-d);border-bottom:1px solid var(--line)}
/* ---------- başlıktaki telefon paneli ----------
Masaüstünde tel: bağlantısı işe yaramadığı için düğme numarayı
panelde gösteriyor (bkz. app.js → telefonPaneli). Dokunmatikte
panel hiç açılmaz, bağlantı doğrudan aramayı başlatır. */
.telwrap{position:relative;display:inline-flex}
.telpop[hidden]{display:none}
.telpop{
position:absolute;top:calc(100% + 10px);right:0;z-index:60;
/* 268px'te "Numarayı kopyala" düğmesi kırpılıyordu (ölçtük);
iki düğme + boşluk 238px yer istiyor, yatay dolgu 36px. */
width:min(296px,calc(100vw - 32px));padding:16px 18px 14px;
background:var(--paper);border:1px solid var(--line);
box-shadow:0 22px 56px -28px rgba(var(--ink-rgb),.55);
display:flex;flex-direction:column;gap:6px;text-align:left;
}
/* Kutunun üstünde düğmeye bakan küçük ok */
.telpop::before{
content:"";position:absolute;top:-6px;right:12px;width:11px;height:11px;
background:var(--paper);border-left:1px solid var(--line);border-top:1px solid var(--line);
transform:rotate(45deg);
}
.telpop__l{
font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
color:var(--accent-d);
}
.telpop__n{
font-family:var(--d);font-size:1.16rem;font-weight:600;letter-spacing:.01em;
color:var(--ink);line-height:1.2;
}
.telpop__n:hover{color:var(--accent-d)}
.telpop__h{font-size:.74rem;line-height:1.6;color:var(--mute)}
.telpop__act{display:flex;gap:8px;margin-top:8px}
.telpop__act .btn{flex:1;height:34px;padding:0 10px;font-size:.6rem;white-space:nowrap}
.telpop__r{
margin-top:10px;padding-top:10px;border-top:1px solid var(--line-2);
font-size:.76rem;color:var(--accent-d);
}
.telpop__r:hover{text-decoration:underline}
/* ---------- derleme kartı (.post--dis) ----------
Blog ızgarasında kendi yazılarımızla AYNI biçimde durur — ızgara
ritmi bozulmasın diye — ama kaynak rozeti, soluk çerçevesi ve dış
bağlantı simgesiyle ayrışır. Ziyaretçi hangisinin bizim olduğunu
karta bakar bakmaz anlamalı. */
.post--dis{border-style:dashed;border-color:var(--line-2);background:transparent}
.post--dis:hover{border-style:solid;border-color:var(--accent)}
.post__k--dis{
background:var(--ink);color:var(--paper);
letter-spacing:.14em;
}
.post--dis p{font-size:.84rem}
.post__go--dis{color:var(--mute)}
.post__go--dis svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.post--dis:hover .post__go--dis{color:var(--accent-d)}
.post--dis:hover .post__go--dis svg{transform:none}
/* Izgaranın üstündeki açıklama ve altındaki kaynak notu */
.jr__not{
margin:0 0 clamp(20px,2.4vw,28px);padding:12px 16px;
background:var(--soft);border-left:3px solid var(--accent);
font-size:.84rem;line-height:1.7;color:var(--ink-2);
}
.jr__not i{font-style:italic}
.jr__not a{color:var(--accent-d);border-bottom:1px solid var(--line)}
.jr__kaynak{
margin:clamp(26px,3vw,36px) 0 0;padding-top:18px;border-top:1px solid var(--line);
font-size:.78rem;line-height:1.7;color:var(--mute);
}
.jr__kaynak i{font-style:italic}
/* ---------- galeri sayfası ---------- */
.gal{padding-block:clamp(44px,5vw,76px) clamp(60px,7vw,100px)}
.gal__grid{
display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
gap:clamp(12px,1.6vw,22px);
}
/* Kareler hem (bağlantılı) hem