/* =====================================================================
   SEMA KONAK GÜZELLİK MERKEZİ — ön yüz
   01.09.2026 — tasarım yenilendi (Alper: "daha modern daha güzel").

   Palet logodan ölçüldü: baskın #d0b060, ikincil #d0a050.
   Altın açık zeminde beyaz yazıyla okunmadığı için (kontrast ~2:1)
   metin ve butonlarda KOYU türevleri kullanılıyor; altın vurgu rolünde.
   ===================================================================== */

:root {
    --altin:        #c9a24d;   /* logodan, vurgu */
    --altin-koyu:   #8d6c28;   /* ÖLÇÜLDÜ: beyazda 4.87:1, kremde 4.56:1.
                                  Önce #a17d33 idi ama beyazda 3.82 çıkıyordu;
                                  kart başlıkları büyük olduğu için sorun değildi,
                                  gövde içindeki küçük linkler eşiği geçmiyordu. */
    --altin-acik:   #f0e3c6;
    --krem:         #faf6ef;
    --krem-koyu:    #f3ead9;
    --koyu:         #24211c;   /* ana metin, footer zemini */
    --metin:        #38332c;
    --metin-soluk:  #6d675c;   /* beyazda 5.61:1, kremde 5.25:1 — önceki
                                  #7a7368 krem zeminde 4.39 ile eşiğin altındaydı */
    --cizgi:        #ebe3d4;
    --golge:        0 4px 20px rgba(36, 33, 28, .06);
    --golge-buyuk:  0 22px 60px rgba(36, 33, 28, .14);
    --r:            18px;
    --r-kucuk:      12px;
    --kap:          1240px;
    --font:         'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-baslik:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    font-size: 16.5px; line-height: 1.75; color: var(--metin);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    /* overflow-x:hidden tarayıcıda dikey kaydırma çubuğu da doğuruyor;
       clip aynı işi yan etkisiz yapıyor. */
    overflow-x: clip;
}

/* height:auto ŞART. Görsellere CLS için width/height ÖZNİTELİĞİ veriyoruz;
   tarayıcı bunu sunum ipucu olarak `height:1000px` gibi uyguluyor ve CSS
   `aspect-ratio` kuralını geçersiz kılıyor — hakkımızda görselleri 4:5
   yerine 580x1000 çıkıyordu. Kendi yüksekliğini belirleyen kurallar
   (hero, kartlar, logo) zaten height veriyor, onlar etkilenmiyor. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--altin-koyu); text-decoration: none; transition: color .2s; }
a:hover { color: var(--koyu); }

h1, h2, h3, h4 {
    font-family: var(--font-baslik); font-weight: 600;
    line-height: 1.12; letter-spacing: -.01em; color: var(--koyu);
}
h1 { font-size: clamp(34px, 5.2vw, 62px); }
h2 { font-size: clamp(28px, 3.8vw, 46px); }
h3 { font-size: clamp(20px, 2.2vw, 27px); }

.kap { max-width: var(--kap); margin: 0 auto; padding: 0 22px; }

/* Üst etiket — bölüm başlıklarının üstündeki ince altın satır */
.etiket {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 11.5px; font-weight: 600; letter-spacing: 2.6px;
    text-transform: uppercase; color: var(--altin-koyu);
}
.etiket::before { content: ''; width: 26px; height: 1px; background: var(--altin); }
.etiket.ortali::after { content: ''; width: 26px; height: 1px; background: var(--altin); }

/* ============================================================== BUTON */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 14px 30px; border-radius: 100px; border: 1px solid transparent;
    font-family: inherit; font-size: 14.5px; font-weight: 600; letter-spacing: .3px;
    cursor: pointer; transition: .25s cubic-bezier(.2,.7,.3,1); white-space: nowrap;
}
.btn-ana { background: var(--koyu); color: #fff; }
.btn-ana:hover { background: var(--altin-koyu); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(141,108,40,.28); }
.btn-cizgi { border-color: var(--cizgi); color: var(--koyu); background: #fff; }
.btn-cizgi:hover { border-color: var(--altin); color: var(--altin-koyu); transform: translateY(-2px); }
.btn-altin { background: var(--altin); color: var(--koyu); }
.btn-altin:hover { background: #fff; color: var(--koyu); transform: translateY(-2px); }
.btn-lg { padding: 16px 36px; font-size: 15.5px; }
.btn-blok { width: 100%; }

/* ============================================================ DUYURU */
.duyuru {
    background: var(--koyu); color: var(--altin-acik);
    font-size: 13px; text-align: center; padding: 10px 0; letter-spacing: .3px;
}
.duyuru i { color: var(--altin); margin-right: 6px; }

/* ============================================================ BAŞLIK */
.baslik {
    background: rgba(255,255,255,.92); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--cizgi); position: sticky; top: 0; z-index: 60;
}
.baslik-ic { display: flex; align-items: center; gap: 24px; padding: 10px 22px; }
/* Logo DAİRESEL bir amblem; içindeki el yazısı ve "GÜZELLİK & BAKIM"
 satırı küçültülünce okunmuyordu (64px'te alt satır 3.7px kalıyor).
 Başlığa sığdırmak için küçültmek yerine LEVHAYA alındı: kare beyaz bir
 kutu başlığın ALTINA taşıyor, logo 106px'e çıkıyor ama .logo yer tutucusu
 kısa kaldığı için BAŞLIK YÜKSEKLİĞİ ARTMIYOR (levha absolute). */
.logo { position: relative; flex: 0 0 auto; width: 172px; height: 56px; }
.logo-levha {
    /* top, .baslik-ic'in 10px üst dolgusunu geri alıyor: levha başlığın
       tam üst kenarından başlıyor ve onunla BİRLEŞİK görünüyor. Dört
       kenarı çerçeveli ayrı bir kutu olduğunda başlığın içinde yüzen bir
       etiket gibi duruyor, hero'nun üstünde sert bir kesim yapıyordu. */
    position: absolute; left: 0; top: -10px; width: 172px; height: 180px;
    display: flex; align-items: center; justify-content: center;
    background: #fff;
    /* Kenarlık YOK: ince bir çizgi bile beyaz alanın nerede bittiğini
       keskinleştiriyor, levha hero'nun üstüne yapıştırılmış gibi duruyordu.
       Sınırı yalnız kavis ve yumuşak gölge veriyor. */
    border: 0;
    border-radius: 0 0 46px 46px;
    box-shadow: 0 26px 44px -24px rgba(24,18,8,.5);
    transition: width .25s, height .25s;
}
.logo img { height: 134px; width: auto; transition: height .25s; }

.menu { margin-left: auto; }
.menu ul { list-style: none; display: flex; align-items: center; gap: 2px; }
.menu > ul > li > a {
    position: relative; display: block; padding: 10px 15px;
    font-size: 14.5px; font-weight: 500; color: var(--metin); letter-spacing: .3px;
}
/* Alt çizgi vurgusu — zemin rengi yerine ince altın çizgi, daha sakin */
.menu > ul > li > a::after {
    content: ''; position: absolute; left: 15px; right: 15px; bottom: 4px;
    height: 1px; background: var(--altin); transform: scaleX(0);
    transform-origin: left; transition: transform .28s cubic-bezier(.2,.7,.3,1);
}
.menu > ul > li > a:hover::after, .menu > ul > li > a.aktif::after { transform: scaleX(1); }
.menu > ul > li > a:hover, .menu > ul > li > a.aktif { color: var(--altin-koyu); }
.menu .fa-chevron-down { font-size: 8px; margin-left: 4px; opacity: .5; }

.var-alt { position: relative; }
.alt-menu {
    position: absolute; top: calc(100% + 6px); left: 0; min-width: 252px;
    background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r-kucuk);
    box-shadow: var(--golge-buyuk); padding: 9px;
    display: block; opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: .25s cubic-bezier(.2,.7,.3,1); z-index: 70;
}
.var-alt:hover > .alt-menu, .var-alt:focus-within > .alt-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.alt-menu li { list-style: none; }
.alt-menu a { display: block; padding: 10px 14px; border-radius: 9px; font-size: 14px; color: var(--metin); }
.alt-menu a:hover { background: var(--krem); color: var(--altin-koyu); padding-left: 18px; }
/* Alt menü YAN YANA diziliyordu: `.menu ul { display:flex }` iç ul'e de
   uyguluyor ve `.alt-menu` (0,1,0) o kuraldan (0,1,1) daha az spesifik
   olduğu için hizalamayı geri alamıyordu. Sekiz hizmet 680px genişliğe
   yayılıp iki satıra kırılıyordu. Yalnızca dizilim ezilliyor; açılma
   (hover/focus) kuralları daha spesifik kaldığı için etkilenmiyor. */
.menu ul.alt-menu { flex-direction: column; align-items: stretch; gap: 0; }

/* Alt menü açma düğmesi JS ile her zaman ekleniyor ama yalnız telefonda
   gerekiyor (masaüstünde menü hover ile açılıyor). Varsayılan gizli. */
.alt-ac { display: none; }

.baslik-sag { display: flex; align-items: center; gap: 14px; }
.bas-tel { display: flex; align-items: center; gap: 11px; color: var(--metin); }
.bas-tel i {
    width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    background: var(--krem); color: var(--altin-koyu); font-size: 14px;
    transition: background .25s, color .25s;
}
.bas-tel:hover i { background: var(--altin); color: #fff; }
.bas-tel small { display: block; font-size: 10.5px; color: var(--metin-soluk); line-height: 1.2; letter-spacing: .6px; text-transform: uppercase; }
.bas-tel strong { display: block; font-size: 15px; font-weight: 600; color: var(--koyu); }
.mobil-btn {
    display: none; width: 44px; height: 44px; border: 1px solid var(--cizgi);
    background: #fff; border-radius: var(--r-kucuk); font-size: 17px; color: var(--koyu); cursor: pointer;
}

/* ============================================================== HERO */
.hero { position: relative; overflow: hidden; background: var(--koyu); }
/* Hero'nun üst kenarında beyaza doğru çok hafif bir sönüm. Logo levhası
   tek başına koyu görselin üstünde duran beyaz bir kutu gibi sırıtıyordu;
   üst kenar genel olarak aydınlanınca levha başlığın devamı gibi okunuyor.
   Yalnız üst 170px; hero metni aşağıda olduğu için okunurluğu etkilemiyor. */
.hero::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 200px; z-index: 3;
    background: linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,0));
    pointer-events: none;
}
/* Alt kenarda koyu sönüm: kumanda şeridi her fotoğrafta okunur kalsın ve
   hero bir sonraki bölüme sert bir kesikle değil, koyulaşarak bağlansın. */
.hero::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; z-index: 2;
    background: linear-gradient(transparent, rgba(28,25,21,.46));
    pointer-events: none;
}
.hero-ray { display: flex; transition: transform .9s cubic-bezier(.62,.02,.2,1); }
.hero-slayt { min-width: 100%; position: relative; aspect-ratio: 1600 / 720; overflow: hidden; }
/* Ken Burns: aktif fotoğraf çok yavaş yaklaşıyor. Duran bir fotoğraf
   yerine yaşayan bir sahne hissi veriyor; `aktif` sınıfı her geçişte
   yeniden eklendiği için animasyon da baştan başlıyor. */
.hero-slayt img {
    width: 100%; height: 100%; object-fit: cover;
    transform: scale(1.06); transition: transform 1.2s ease;
}
.js .hero-slayt.aktif img { animation: heroYaklas 7.5s ease-out forwards; }
@keyframes heroYaklas { from { transform: scale(1.005); } to { transform: scale(1.075); } }
.hero-metin {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
    padding: 0 max(26px, calc((100% - var(--kap)) / 2 + 22px));
    /* Soldan koyu perde: fotoğrafın açık bölgelerinde beyaz yazı kayboluyordu.
       Perde sağa doğru şeffaflaşıyor ki fotoğrafın konusu kapanmasın. */
    background: linear-gradient(100deg, rgba(28,25,21,.86) 0%, rgba(28,25,21,.58) 46%, rgba(28,25,21,.04) 84%);
    color: #fff;
}
/* Fotoğrafın açık bölgelerinde beyaz başlığın kenarı eriyordu; çok hafif
   bir gölge harfleri her fotoğrafta ayakta tutuyor. */
.hero-metin h1, .hero-metin h2 {
    color: #fff; max-width: 680px; line-height: 1.06;
    text-shadow: 0 2px 22px rgba(12,9,6,.42);
}
.hero-metin p { max-width: 520px; margin: 20px 0 32px; color: #ece7dd; font-size: 17px; }
.hero-ust {
    display: inline-flex; align-items: center; gap: 11px; margin-bottom: 18px;
    font-size: 11.5px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--altin);
}
.hero-ust::before { content: ''; width: 34px; height: 1px; background: var(--altin); }
.hero-btn { display: flex; gap: 13px; flex-wrap: wrap; }

/* Slayt içeriği yalnız aktif slaytta yükselerek gelsin */
.js .hero-metin > * { opacity: 0; transform: translateY(22px); }
.js .hero-slayt.aktif .hero-metin > * { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.hero-slayt.aktif .hero-metin > *:nth-child(2) { transition-delay: .10s; }
.hero-slayt.aktif .hero-metin > *:nth-child(3) { transition-delay: .18s; }
.hero-slayt.aktif .hero-metin > *:nth-child(4) { transition-delay: .26s; }

/* Kumanda: göstergeler solda, sayaç ve oklar sağda; ikisi de içerik
   sütunuyla hizalı tek bir şerit. */
.hero-kumanda {
    position: absolute; bottom: 30px; z-index: 4;
    left: max(26px, calc((100% - var(--kap)) / 2 + 22px));
    right: max(26px, calc((100% - var(--kap)) / 2 + 22px));
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.hero-nokta { display: flex; gap: 10px; }
.hero-nokta button {
    position: relative; width: 46px; height: 3px; border-radius: 2px; border: 0;
    cursor: pointer; background: rgba(255,255,255,.3); padding: 0;
    transition: background .3s;
}
.hero-nokta button:hover { background: rgba(255,255,255,.55); }
/* Aktif göstergedeki altın dolum, slaytın kalan süresini gösteriyor —
   ziyaretçi geçişin ne zaman olacağını görüyor. Süre JS'teki 6sn ile
   aynı; birini değiştirirken diğerini de değiştirin. */
.hero-nokta button::after {
    content: ""; position: absolute; inset: 0; border-radius: 2px;
    background: var(--altin); transform: scaleX(0); transform-origin: left;
}
.js .hero-nokta button.aktif::after { animation: heroDolum 6s linear forwards; }
@keyframes heroDolum { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero-nokta button.aktif { background: rgba(255,255,255,.42); }

.hero-sag { display: flex; align-items: center; gap: 12px; }
.hero-sayac {
    font-size: 13px; letter-spacing: 1.5px; color: rgba(255,255,255,.65);
    font-variant-numeric: tabular-nums; margin-right: 4px;
}
.hero-sayac b { color: #fff; font-weight: 600; font-size: 15px; }
.hero-sayac i { font-style: normal; margin: 0 5px; color: rgba(255,255,255,.4); }
.hero-ok {
    width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
    border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08);
    backdrop-filter: blur(6px); color: #fff; font-size: 13px;
    display: grid; place-items: center; transition: .25s;
}
.hero-ok:hover { background: #fff; color: var(--koyu); border-color: #fff; }

/* ============================================================== BÖLÜM */
.bolum { padding: 92px 0; }
.bolum-krem { background: var(--krem); }
.bolum-koyu { background: var(--koyu); color: #ded8cc; }
.bolum-koyu h2, .bolum-koyu h3 { color: #fff; }
.bolum-bas { max-width: 660px; margin-bottom: 52px; }
.bolum-bas.ortali { margin-left: auto; margin-right: auto; text-align: center; }
.bolum-bas h2 { margin-top: 14px; }
.bolum-bas p { color: var(--metin-soluk); margin-top: 16px; font-size: 16.5px; }

/* ============================================================ GÜVEN */
.guven { background: var(--krem); border-bottom: 1px solid var(--cizgi); }
.guven-ic { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.guven-o {
    display: flex; align-items: center; gap: 15px; padding: 30px 26px;
    border-right: 1px solid var(--cizgi); transition: background .25s;
}
.guven-o:last-child { border-right: 0; }
.guven-o:hover { background: #fff; }
.guven-o i {
    width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center;
    background: #fff; color: var(--altin-koyu); font-size: 17px;
    border: 1px solid var(--cizgi); transition: .25s;
}
.guven-o:hover i { background: var(--altin); color: #fff; border-color: var(--altin); }
.guven-o strong { display: block; font-size: 14.5px; font-weight: 600; color: var(--koyu); }
.guven-o span { font-size: 13px; color: var(--metin-soluk); line-height: 1.5; }

/* ============================================================ HİZMET
   Fotoğrafın üstüne binen koyu geçişli kart — güzellik sektöründe
   fotoğrafı öne çıkarmak metinden daha çok iş görüyor. */
.hizmet-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.hizmet-kart {
    position: relative; display: block; border-radius: var(--r); overflow: hidden;
    aspect-ratio: 3/4; background: var(--krem); isolation: isolate;
}
.hizmet-kart img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform .8s cubic-bezier(.2,.7,.3,1); z-index: 0;
}
.hizmet-kart::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(28,25,21,0) 34%, rgba(28,25,21,.52) 62%, rgba(28,25,21,.92) 100%);
    transition: opacity .35s;
}
.hizmet-kart:hover img { transform: scale(1.08); }
.hizmet-ic {
    position: absolute; inset: auto 0 0 0; z-index: 2; padding: 24px 22px;
    color: #fff; transition: transform .4s cubic-bezier(.2,.7,.3,1);
}
.hizmet-no {
    font-family: var(--font-baslik); font-size: 13px; letter-spacing: 2px;
    color: var(--altin); display: block; margin-bottom: 6px;
}
.hizmet-ic h3 { color: #fff; font-size: 24px; margin-bottom: 8px; }
.hizmet-ic p {
    font-size: 13.5px; color: #ddd7cb; line-height: 1.6;
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height .45s cubic-bezier(.2,.7,.3,1), opacity .35s, margin .45s;
}
.hizmet-kart:hover .hizmet-ic p { max-height: 90px; opacity: 1; margin-bottom: 12px; }
.hizmet-devam {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 600; letter-spacing: 1.4px;
    text-transform: uppercase; color: var(--altin);
}
.hizmet-devam i { font-size: 10px; transition: transform .3s; }
.hizmet-kart:hover .hizmet-devam i { transform: translateX(5px); }

/* ============================================================ HAKKINDA */
.hakkinda { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.hakkinda-gorsel { position: relative; }
.hakkinda-gorsel img { border-radius: var(--r); aspect-ratio: 4/5; object-fit: cover; }
/* İkinci küçük görsel — tek fotoğraf yerine katmanlı düzen */
/* object-fit olmadan görsel kutuya oturmuyor, dikey uzuyordu. */
.hakkinda-gorsel .kucuk {
    position: absolute; right: -34px; bottom: -34px; width: 46%;
    border: 8px solid #fff; border-radius: var(--r); box-shadow: var(--golge-buyuk);
    aspect-ratio: 1/1; object-fit: cover;
}
.hakkinda-madde { list-style: none; margin: 22px 0 28px; }
.hakkinda-madde li {
    display: flex; gap: 13px; align-items: flex-start; margin-bottom: 13px;
    font-size: 15.5px; color: var(--metin-soluk);
}
.hakkinda-madde i { color: var(--altin-koyu); margin-top: 6px; font-size: 13px; }
.hakkinda-madde strong { color: var(--koyu); font-weight: 600; }

/* ============================================================== SAYI */
.sayi-serit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center; }
.sayi-o strong {
    display: block; font-family: var(--font-baslik); font-size: clamp(34px, 4.4vw, 52px);
    color: var(--altin); line-height: 1;
}
.sayi-o span { display: block; margin-top: 10px; font-size: 14.5px; color: #cdc6b9; letter-spacing: .4px; }

/* ============================================================ İÇERİK */
.icerik-duzen { display: grid; grid-template-columns: 1fr 330px; gap: 52px; align-items: start; }
.makale { font-size: 16.5px; }
.makale > img { border-radius: var(--r); margin-bottom: 26px; }
.makale h2 { margin: 36px 0 14px; }
.makale h3 { margin: 30px 0 12px; font-size: 22px; }
.makale p { margin-bottom: 16px; }
.makale ul, .makale ol { margin: 0 0 18px 20px; }
.makale li { margin-bottom: 8px; }
.makale strong { color: var(--koyu); font-weight: 600; }

.yan { background: var(--krem); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 26px; position: sticky; top: 104px; }
.yan + .yan { margin-top: 20px; }
.yan h3 { font-size: 19px; margin-bottom: 16px; }
.yan-liste { list-style: none; }
.yan-liste li + li { border-top: 1px solid var(--cizgi); }
.yan-liste a { display: block; padding: 11px 0; font-size: 14.5px; color: var(--metin); transition: padding .25s, color .25s; }
.yan-liste a:hover, .yan-liste li.aktif a { color: var(--altin-koyu); font-weight: 600; padding-left: 6px; }

/* =============================================================== SSS */
.sss-liste { max-width: 860px; margin: 0 auto; }
.sss-o { background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r-kucuk); margin-bottom: 11px; overflow: hidden; transition: border-color .25s, box-shadow .25s; }
.sss-o:hover { border-color: var(--altin-acik); }
.sss-o[open] { border-color: var(--altin-acik); box-shadow: var(--golge); }
.sss-o summary {
    padding: 19px 24px; cursor: pointer; font-weight: 600; font-size: 16px; color: var(--koyu);
    display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none;
}
.sss-o summary::-webkit-details-marker { display: none; }
.sss-o summary::after {
    content: '\f067'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 11px;
    color: var(--altin-koyu); flex: none; width: 26px; height: 26px; border-radius: 50%;
    background: var(--krem); display: grid; place-items: center; transition: transform .3s, background .25s;
}
.sss-o[open] summary::after { content: '\f068'; background: var(--altin); color: #fff; }
.sss-cevap { padding: 0 24px 20px; color: var(--metin-soluk); font-size: 15px; }

/* ============================================================ GALERİ */
.galeri-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.galeri-o { aspect-ratio: 1/1; border-radius: var(--r-kucuk); overflow: hidden; background: var(--krem); position: relative; }
.galeri-o img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.3,1); }
.galeri-o::after {
    content: ''; position: absolute; inset: 0; background: rgba(36,33,28,.28);
    opacity: 0; transition: opacity .3s;
}
.galeri-o:hover img { transform: scale(1.08); }
.galeri-o:hover::after { opacity: 1; }

/* ============================================================== BLOG */
.blog-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.blog-kart { background: #fff; border-radius: var(--r); overflow: hidden; transition: transform .3s cubic-bezier(.2,.7,.3,1); }
.blog-kart:hover { transform: translateY(-6px); }
.blog-gorsel { display: block; aspect-ratio: 3/2; overflow: hidden; border-radius: var(--r); background: var(--krem); }
.blog-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.3,1); }
.blog-kart:hover .blog-gorsel img { transform: scale(1.06); }
.blog-govde { padding: 20px 2px 0; }
.blog-govde h3 { font-size: 22px; margin-bottom: 9px; }
.blog-govde h3 a { color: var(--koyu); }
.blog-govde h3 a:hover { color: var(--altin-koyu); }
.blog-govde p { font-size: 14.5px; color: var(--metin-soluk); }

/* ================================================================ CTA */
.cta { background: var(--koyu); color: #fff; padding: 74px 0; position: relative; overflow: hidden; }
/* Köşede yumuşak altın parıltı — düz koyu bloğu kırıyor */
.cta::before {
    content: ''; position: absolute; right: -140px; top: -140px; width: 460px; height: 460px;
    border-radius: 50%; background: radial-gradient(circle, rgba(201,162,77,.20) 0%, rgba(201,162,77,0) 70%);
}
.cta-ic { display: flex; align-items: center; justify-content: space-between; gap: 34px; flex-wrap: wrap; position: relative; }
.cta h2 { color: #fff; }
.cta p { color: #d3ccbf; margin-top: 12px; max-width: 580px; }
.cta-btn { display: flex; gap: 13px; flex-wrap: wrap; }
.cta .btn-ana { background: var(--altin); color: var(--koyu); }
.cta .btn-ana:hover { background: #fff; color: var(--koyu); }
.cta .btn-cizgi { background: transparent; border-color: rgba(255,255,255,.3); color: #fff; }
.cta .btn-cizgi:hover { border-color: var(--altin); color: var(--altin); }

/* ============================================================= FOOTER */
.footer { background: var(--koyu); color: #c6bfb2; padding: 68px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.3fr; gap: 40px; padding-bottom: 44px; }
.footer-logo { height: 104px; width: auto; margin-bottom: 18px; }
.footer p { font-size: 14.5px; line-height: 1.8; }
.footer h4 { color: #fff; font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; margin-bottom: 18px; }
.footer ul { list-style: none; }
.footer ul li { margin-bottom: 10px; font-size: 14.5px; }
.footer a { color: #c6bfb2; }
.footer a:hover { color: var(--altin); }
.footer-iletisim li { display: flex; gap: 11px; align-items: flex-start; line-height: 1.65; }
.footer-iletisim i { color: var(--altin); width: 15px; margin-top: 5px; flex: none; }
.footer-sosyal { display: flex; gap: 11px; margin-top: 20px; }
.footer-sosyal a {
    width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255,255,255,.07); color: #fff; font-size: 15px; transition: .25s;
}
.footer-sosyal a:hover { background: var(--altin); color: var(--koyu); transform: translateY(-3px); }
.footer-bolge { border-top: 1px solid rgba(255,255,255,.09); padding: 20px 22px; font-size: 13px; color: #9d9689; line-height: 1.85; }
.footer-bolge strong { color: #c6bfb2; }
.footer-alt { border-top: 1px solid rgba(255,255,255,.09); padding: 17px 0; font-size: 13px; }
.footer-alt .kap { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* ======================================================= WHATSAPP BTN */
.wp-buton {
    position: fixed; right: 20px; bottom: 20px; z-index: 80;
    width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
    background: #25d366; color: #fff; font-size: 27px;
    box-shadow: 0 8px 26px rgba(37, 211, 102, .4); transition: transform .25s;
}
.wp-buton:hover { transform: scale(1.08); color: #fff; }

/* ============================================================ SAYFA BAŞ */
.sayfa-bas { background: var(--krem); border-bottom: 1px solid var(--cizgi); padding: 116px 0 52px; }
.sayfa-bas h1 { margin: 10px 0 8px; }
.sayfa-bas > .kap > p { color: var(--metin-soluk); max-width: 660px; }
.yol-izi { font-size: 13px; color: var(--metin-soluk); letter-spacing: .3px; }
.yol-izi a { color: var(--metin-soluk); }
.yol-izi a:hover { color: var(--altin-koyu); }

/* ============================================================== FORM */
.form-alan { margin-bottom: 16px; }
.form-alan label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; letter-spacing: .3px; }
.form-alan input, .form-alan select, .form-alan textarea {
    width: 100%; padding: 13px 15px; border: 1px solid var(--cizgi); border-radius: var(--r-kucuk);
    font-family: inherit; font-size: 15px; background: #fff; transition: border-color .2s, box-shadow .2s;
}
.form-alan textarea { min-height: 130px; resize: vertical; }
.form-alan input:focus, .form-alan select:focus, .form-alan textarea:focus {
    outline: none; border-color: var(--altin); box-shadow: 0 0 0 4px rgba(201, 162, 77, .14);
}
.form-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.not { padding: 14px 17px; border-radius: var(--r-kucuk); font-size: 14.5px; margin-bottom: 18px; }
.not-ok { background: #e8f5ec; color: #1c6b39; border: 1px solid #bfe3cc; }
.not-hata { background: #fdeaea; color: #96262a; border: 1px solid #f5c6c8; }

/* İletişim bilgi listesi */
.ilt-liste { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.ilt-liste li { display: flex; gap: 15px; align-items: flex-start; }
.ilt-liste i {
    width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center;
    background: var(--krem); color: var(--altin-koyu); font-size: 15px; border: 1px solid var(--cizgi);
}
.ilt-liste strong { display: block; font-size: 14px; color: var(--koyu); margin-bottom: 2px; }
.ilt-liste span.deger { color: var(--metin-soluk); font-size: 15px; }

/* ====================================================== BELİRME (scroll) */
/* Gizleme YALNIZCA JS varken: betik çalışmazsa (ya da hata verirse)
   içerik olduğu gibi görünür kalır. `js` sınıfını head'deki tek
   satırlık betik ekliyor. */
.js .gorun { opacity: 0; transform: translateY(26px); }
.js .gorun.acik { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
/* Hareket azaltma tercihi olan kullanıcıda animasyon YOK — vestibüler
   rahatsızlığı olanlar için erişilebilirlik gereği. */
@media (prefers-reduced-motion: reduce) {
    /* `.js` kapsamı burada da gerekli: gizleme kuralı `.js .gorun` olduğu
       için onu geçersiz kılan kuralın da en az o kadar özgül olması lazım,
       yoksa hareket azaltma tercihi olan kullanıcıda içerik gizli kalıyor. */
    .js .gorun, .js .gorun.acik { opacity: 1; transform: none; transition: none; }
    .js .hero-metin > *, .js .hero-slayt.aktif .hero-metin > * { opacity: 1; transform: none; transition: none; }
    /* Yaklaşan fotoğraf ve dolum çubuğu hareket hassasiyeti olanlarda kapalı */
    .js .hero-slayt.aktif img { animation: none; transform: scale(1.02); }
    .js .hero-nokta button.aktif::after { animation: none; transform: scaleX(1); }
    .hero-ray { transition: none; }
    html { scroll-behavior: auto; }
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================== MOBİL */
@media (max-width: 1180px) {
    .hizmet-izgara { grid-template-columns: repeat(3, 1fr); }
    .bolum { padding: 74px 0; }
}

@media (max-width: 980px) {
    .baslik-ic { flex-wrap: wrap; gap: 12px; }
    .mobil-btn { display: block; }
    .bas-tel { display: none; }
    .menu { display: none; order: 3; flex-basis: 100%; margin-left: 0; }
    .menu.acik { display: block; padding-bottom: 10px; }
    .menu > ul { flex-direction: column; align-items: stretch; gap: 0; }
    .menu > ul > li { border-bottom: 1px solid var(--cizgi); position: relative; }
    .menu > ul > li > a { padding: 15px 4px; }
    .menu > ul > li > a::after { display: none; }
    .menu .fa-chevron-down { display: none; }
    /* Alt menü telefonda hover'la açılamaz; düğmeyle açılıyor. */
    .menu ul.alt-menu {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border: 0; border-radius: 0; padding: 0 0 8px 12px;
        max-height: 0; overflow: hidden; transition: max-height .3s ease;
        /* `.menu ul { display:flex }` alt menüye de geliyor; mobilde yalnız
           `.menu > ul` sütuna çevriliyordu, alt menü yan yana dizilip
           ekrandan taşıyordu. */
        flex-direction: column; align-items: stretch; gap: 0; min-width: 0;
    }
    .var-alt:hover > .alt-menu, .var-alt:focus-within > .alt-menu { max-height: 0; }
    .var-alt.alt-acik > .alt-menu { max-height: 900px; }
    .alt-ac {
        display: block; position: absolute; right: 0; top: 6px; width: 46px; height: 44px;
        border: 0; background: none; color: var(--metin-soluk); font-size: 13px; cursor: pointer;
    }
    .var-alt.alt-acik .alt-ac i { transform: rotate(180deg); }
    .alt-ac i { transition: transform .25s; display: block; }

    .icerik-duzen { grid-template-columns: 1fr; gap: 36px; }
    .yan { position: static; }
    .hakkinda { grid-template-columns: 1fr; gap: 46px; }
    .hakkinda-gorsel .kucuk { right: -14px; bottom: -20px; width: 40%; }
    .hizmet-izgara, .blog-izgara { grid-template-columns: repeat(2, 1fr); }
    .galeri-izgara { grid-template-columns: repeat(3, 1fr); }
    .guven-ic { grid-template-columns: repeat(2, 1fr); }
    .guven-o:nth-child(2n) { border-right: 0; }
    .guven-o:nth-child(-n+2) { border-bottom: 1px solid var(--cizgi); }
    /* 4/5 iken levha, hero metninin ilk satırını 12px örtüyordu
       (ölçüldü: levha altı 179px, etiket 166px). Metin alta yaslı
       olduğu için hero'yu bir tık uzatmak üstte yer açıyor; logoyu
       küçültseydik amblemin alt satırı yine okunmaz olacaktı. */
    .hero-slayt { aspect-ratio: 3 / 4; }
    .hero-metin { background: linear-gradient(180deg, rgba(28,25,21,.55) 0%, rgba(28,25,21,.72) 55%, rgba(28,25,21,.92) 100%); justify-content: flex-end; padding-bottom: 66px; }
    /* Telefonda ok yerine parmakla kaydırma var; sayaç da yer kaplamasın. */
    .hero-ok, .hero-sayac { display: none; }
    .hero-kumanda { bottom: 22px; justify-content: center; }
    .cta-ic { flex-direction: column; align-items: flex-start; }
    .sayi-serit { gap: 26px; }
}

@media (max-width: 620px) {
    .bolum { padding: 54px 0; }
    .bolum-bas { margin-bottom: 34px; }
    .hizmet-izgara, .blog-izgara { grid-template-columns: 1fr; }
    .hizmet-kart { aspect-ratio: 4/3; }
    /* Telefonda hover yok; açıklama hep görünsün */
    .hizmet-ic p { max-height: 90px; opacity: 1; margin-bottom: 12px; }
    .galeri-izgara { grid-template-columns: repeat(2, 1fr); }
    .guven-ic { grid-template-columns: 1fr; }
    .guven-o { border-right: 0; border-bottom: 1px solid var(--cizgi); padding: 22px; }
    .guven-o:last-child { border-bottom: 0; }
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
    .form-satir { grid-template-columns: 1fr; }
    .baslik-sag .btn-ana { display: none; }
    .sayfa-bas { padding: 84px 0 40px; }
    .logo { width: 128px; height: 48px; }
    .logo-levha { width: 128px; height: 136px; border-radius: 0 0 36px 36px; }
    .logo img { height: 100px; }
    /* Levha başlığın ~42px altına taşıyor; menü açıldığında ilk satır
       levhanın altında kalmasın diye menü aşağıdan başlıyor. */
    .menu.acik { padding-top: 70px; }
    .hero-metin p { font-size: 15.5px; margin: 16px 0 24px; }
    .sayi-serit { grid-template-columns: 1fr; gap: 22px; }
    .footer-alt .kap { flex-direction: column; gap: 6px; }
    .hakkinda-gorsel .kucuk { display: none; }
}

/* ── Danışan yorumları (panel > Yorumlar) ───────────────────────────── */
.yorum-izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.yorum-izgara > *{min-width:0}
.yorum-kart{margin:0;padding:30px 28px;background:#fff;border:1px solid var(--cizgi);
  border-radius:var(--r);position:relative}
.yorum-kart > i{color:var(--altin);font-size:22px;opacity:.5}
.yorum-kart blockquote{margin:14px 0 18px;font-size:15.5px;line-height:1.75;color:var(--metin)}
.yorum-kart figcaption{font-weight:600;font-size:14px;color:var(--altin-koyu)}
.yorum-kart figcaption::before{content:"— "}

/* Hakkımızda banner'ı: görsel panelden yükleniyor, dikey bir fotoğraf
   gelirse sayfayı boydan boya kaplamasın diye oran sabit. */
.makale > img.sayfa-banner { aspect-ratio: 16/7; object-fit: cover; }

/* Hero duraklatıldığında (fareyle üstüne gelince veya parmak dokununca)
   hem yaklaşan fotoğraf hem dolum çubuğu bekliyor — sayaç dururken
   çubuğun dolmaya devam etmesi yanıltıcıydı. */
.hero.duraklat .hero-slayt.aktif img,
.hero.duraklat .hero-nokta button.aktif::after { animation-play-state: paused; }

/* Hizmet başlığının altındaki kısa etiket (panel > Hizmetler > Alt Başlık) */
.sayfa-alt {
    margin: 8px 0 0; font-size: 14.5px; letter-spacing: .4px;
    color: var(--altin-koyu); font-weight: 500;
}
/* Hizmet metinlerinin sonundaki "15 yıllık deneyim" notu — gövde metninden
   ayrılsın diye ince altın çizgili, krem zeminli. */
.makale .uzman-not {
    margin: 26px 0 0; padding: 14px 18px; background: var(--krem);
    border-left: 3px solid var(--altin); border-radius: 0 var(--r-kucuk) var(--r-kucuk) 0;
    font-size: 15px; color: var(--metin-soluk);
}

/* Hizmetler listesi kartı — anasayfadaki `.hizmet-kart` overlay tasarımı
   burada metni gizliyordu (aspect-ratio + overflow:hidden + absolute img).
   Bu kartta fotoğraf üstte, ad ve alt başlık altında; hover beklemeden
   okunuyor (dokunmatik cihazda hover zaten yok). */
.hizmet-kart2 {
    display: flex; flex-direction: column; background: #fff;
    border: 1px solid var(--cizgi); border-radius: var(--r); overflow: hidden;
    transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s, border-color .3s;
}
.hizmet-kart2:hover { transform: translateY(-4px); box-shadow: var(--golge-buyuk); border-color: transparent; }
.hizmet-kart2 .hizmet-gorsel { display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--krem); }
.hizmet-kart2 .hizmet-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.hizmet-kart2:hover .hizmet-gorsel img { transform: scale(1.06); }
.hizmet-govde { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 22px 22px 24px; }
.hizmet-govde h3 { font-size: 20px; margin: 0; line-height: 1.25; }
.hizmet-govde h3 a { color: var(--koyu); }
.hizmet-govde h3 a:hover { color: var(--altin-koyu); }
.hizmet-govde p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--metin-soluk); }
.hizmet-govde .hizmet-devam { margin-top: auto; padding-top: 12px; }
/* Lokasyon sayfası listeleri — 18 bölge tek sütunda uzun bir liste
   oluşturuyordu; çok sütuna bölündü. */
.bolge-liste {
    list-style: none; margin: 0 0 22px; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 18px;
}
.bolge-liste > * { min-width: 0; }
.bolge-liste li { margin: 0; }
.bolge-liste a {
    display: block; padding: 7px 0; font-size: 14.5px;
    color: var(--metin); border-bottom: 1px solid var(--cizgi);
}
.bolge-liste a:hover { color: var(--altin-koyu); }
.footer-bolge a { color: inherit; }
.footer-bolge a:hover { color: var(--altin); }
/* ══════════════════════════════════════════ HİZMET VİTRİNİ (açılış)
   Kayan slider yerine sekiz hizmetin tamamı ilk ekranda. Kart = dikey
   fotoğraf + altında altın şeritte hizmet adı. */
.vitrin { padding: 40px 0 64px; background: var(--krem); }
.vitrin-bas { text-align: center; max-width: 760px; margin: 0 auto 34px; }
.vitrin-bas h1 { margin: 14px 0 14px; }
.vitrin-bas p { color: var(--metin-soluk); font-size: 17px; margin-bottom: 26px; }
.vitrin-bas .hero-btn { justify-content: center; }
.vitrin-bas .hero-ust { color: var(--altin-koyu); }
.vitrin-bas .hero-ust::before { background: var(--altin-koyu); }

.vitrin-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.vitrin-izgara > * { min-width: 0; }
.vitrin-kart {
    position: relative; display: block; overflow: hidden;
    border-radius: var(--r); background: var(--koyu); isolation: isolate;
    aspect-ratio: 3/4;
    transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s;
}
.vitrin-kart:hover { transform: translateY(-5px); box-shadow: var(--golge-buyuk); }
.vitrin-kart img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform .7s cubic-bezier(.2,.7,.3,1);
}
.vitrin-kart:hover img { transform: scale(1.07); }
/* Altın şerit: referanstaki gibi kartın altını kaplıyor, üstü şeffafa
   dönerek fotoğrafa bağlanıyor. */
.vitrin-ad {
    position: absolute; inset: auto 0 0 0; z-index: 2; padding: 20px 18px 18px;
    background: linear-gradient(180deg, rgba(201,162,77,0) 0%, rgba(201,162,77,.92) 42%, rgba(160,124,48,.98) 100%);
    color: #fff;
}
.vitrin-ad h2 {
    color: #fff; font-size: 19px; line-height: 1.2; margin: 0;
    text-shadow: 0 1px 10px rgba(60,44,12,.35);
}
.vitrin-ad span {
    display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.4;
    color: rgba(255,255,255,.9);
}

@media (max-width: 1180px) { .vitrin-izgara { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
    /* Telefonda yatay kaydırmalı şerit: sekiz kartı alt alta dizmek ilk
       ekranı boğuyordu. Kaydırma çubuğu gizli, parmakla kayıyor. */
    .vitrin { padding: 26px 0 44px; }
    .vitrin-bas { margin-bottom: 24px; }
    .vitrin-izgara {
        display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
        padding-bottom: 6px; margin: 0 -22px; padding-left: 22px; padding-right: 22px;
        scrollbar-width: none;
    }
    .vitrin-izgara::-webkit-scrollbar { display: none; }
    .vitrin-kart { flex: 0 0 62%; scroll-snap-align: start; }
    .vitrin-kart:hover { transform: none; }
    .vitrin-ad h2 { font-size: 17px; }
}
@media (max-width: 520px) { .vitrin-kart { flex-basis: 76%; } }
/* ── Vitrin rötuşları ───────────────────────────────────────────────
   1) Altın şerit referanstaki gibi belirgin olmalıydı; yumuşak geçişte
      hizmet adı fotoğrafa karışıyordu.
   2) Telefonda logo levhası bölüm başlığının üstüne biniyordu (levha
      başlığın ~62px altına sarkıyor, bölümün üst dolgusu 26px'ti). */
.vitrin-ad {
    padding: 40px 18px 16px;
    background: linear-gradient(180deg,
        rgba(196,155,66,0) 0%, rgba(196,155,66,.55) 18%,
        rgba(190,148,58,.97) 42%, #a8801f 100%);
}
.vitrin-ad h2 { font-size: 20px; text-shadow: 0 1px 6px rgba(70,50,10,.28); }
.vitrin-ad span { color: rgba(255,255,255,.94); }
.vitrin-bas h1 { font-size: clamp(30px, 3.4vw, 46px); }
.vitrin-bas { margin-bottom: 30px; }

@media (max-width: 900px) {
    .vitrin { padding-top: 80px; }          /* logo levhasının sarkma payı */
    .vitrin-bas h1 { font-size: 27px; }
    .vitrin-bas p { font-size: 15.5px; margin-bottom: 20px; }
    .vitrin-bas .hero-btn { gap: 10px; }
    .vitrin-bas .hero-btn .btn { padding: 12px 20px; font-size: 14px; }
    .vitrin-ad { padding: 32px 15px 14px; }
    .vitrin-ad h2 { font-size: 17px; }
}

/* ── Fiyat makalelerindeki tablo / iletişim kutusu ──────────────────
   Rakam panelden girilene kadar tablo yerine iletişim kutusu basılır;
   uydurma fiyat yazmak yerine bu yol seçildi. */
.fiyat-kutu {
    margin: 28px 0; padding: 24px 26px; background: var(--krem);
    border: 1px solid var(--cizgi); border-left: 4px solid var(--altin);
    border-radius: 0 var(--r) var(--r) 0;
}
.fiyat-kutu h3 { margin: 0 0 10px; font-size: 20px; }
.fiyat-kutu p { margin: 0 0 10px; color: var(--metin-soluk); }
.fiyat-kutu-alt { font-weight: 600; }
.fiyat-kutu-alt a { color: var(--altin-koyu); }
.fiyat-tablo-sar { margin: 28px 0; overflow-x: auto; }
.fiyat-tablo { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 380px; }
.fiyat-tablo th {
    text-align: left; padding: 12px 14px; background: var(--koyu); color: #fff;
    font-size: 13px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600;
}
.fiyat-tablo td { padding: 13px 14px; border-bottom: 1px solid var(--cizgi); vertical-align: top; }
.fiyat-tablo tr:nth-child(even) td { background: var(--krem); }
.fiyat-not { display: block; margin-top: 3px; font-size: 13px; color: var(--metin-soluk); }
.fiyat-deger { white-space: nowrap; font-weight: 600; color: var(--altin-koyu); }
.fiyat-uyari { margin-top: 10px; font-size: 13px; color: var(--metin-soluk); }

/* ══════════════════════════════ MOBİL GÜVEN KARTLARI (yenilendi)
   Telefonda dört kart alt alta, aralarında yalnız ince çizgiyle
   duruyordu: krem zemin üstünde krem kutular, kart gibi okunmuyordu.
   Artık 2×2 ızgara ve her biri beyaz, kenarlıklı, gölgeli gerçek bir
   kart. İkon yazının solunda değil ÜSTÜNDE — dar sütunda metne yer
   kalıyor ve başlık tek satıra sığıyor. */
@media (max-width: 900px) {
    .guven { background: var(--krem); border-bottom: 0; padding: 26px 0 30px; }
    .guven-ic {
        grid-template-columns: repeat(2, 1fr); gap: 12px;
    }
    .guven-o {
        flex-direction: column; align-items: flex-start; justify-content: flex-start;
        gap: 12px; padding: 18px 16px 17px;
        background: #fff; border: 1px solid var(--cizgi); border-right: 1px solid var(--cizgi);
        border-radius: var(--r-kucuk);
        box-shadow: 0 2px 10px rgba(32,24,10,.05);
    }
    /* Masaüstündeki ayraç kuralları mobilde kart görünümünü bozuyordu */
    .guven-o:nth-child(2n), .guven-o:nth-child(-n+2), .guven-o:last-child {
        border: 1px solid var(--cizgi);
    }
    .guven-o i {
        width: 42px; height: 42px; font-size: 16px;
        background: var(--altin); color: #fff; border-color: var(--altin);
        box-shadow: 0 3px 10px rgba(201,162,77,.32);
    }
    .guven-o strong { font-size: 14.5px; line-height: 1.3; margin-bottom: 3px; }
    .guven-o span { font-size: 12.5px; line-height: 1.45; }
}
@media (max-width: 380px) {
    /* Çok dar ekranda iki sütun sıkışıyor; tek sütuna düşüyor ama
       kart görünümü korunuyor. */
    .guven-ic { grid-template-columns: 1fr; }
    .guven-o { flex-direction: row; align-items: center; }
}

/* ═════════════════════ KAYDIRINCA KÜÇÜLEN LOGO LEVHASI
   Levha başlığın altına sarkıyor ve sticky olduğu için sayfa
   kaydırıldığında altındaki içeriği örtüyordu (ölçüldü: güven
   şeridinin ilk kartının başlığı levhanın altında kalıyordu).
   Sayfa aşağı kaydırılınca levha küçülüyor, içerik açıkta kalıyor. */
.baslik.kucuk .logo-levha {
    width: 104px; height: 104px; border-radius: 0 0 30px 30px;
    box-shadow: 0 14px 26px -18px rgba(24,18,8,.42);
}
.baslik.kucuk .logo img { height: 82px; }
.baslik.kucuk .logo { width: 104px; }
@media (max-width: 900px) {
    .baslik.kucuk .logo-levha { width: 84px; height: 84px; border-radius: 0 0 22px 22px; }
    .baslik.kucuk .logo img { height: 66px; }
    .baslik.kucuk .logo { width: 84px; }
}
/* Güven kartı rötuşu: alt yazı `p` satır aralığını miras alıp iki satıra
   taşınca kart gereksiz uzuyordu. */
@media (max-width: 900px) {
    .guven-o span { line-height: 1.4; display: block; }
    .guven-o > div { min-width: 0; }
    .guven-o { padding: 16px 14px 15px; gap: 10px; }
    .guven { padding: 24px 0 26px; }
}

/* ══════════════════════════════════════ MOBİL ROTUŞLARI (02.09.2026)
   Ölçümde çıkan üç sorun: footer bağlantılarının dokunma alanı 21px
   (parmakla isabet ettirmek zor), bazı yazılar 10.5–12.5px (telefonda
   okumak yorucu) ve footer'ın 1.366px'e uzaması. */
@media (max-width: 900px) {

    /* — Dokunma hedefleri —
       Google ve WCAG en az 44px öneriyor; liste bağlantıları 21px'ti.
       Yükseklik yerine dolgu veriliyor ki satır aralığı bozulmasın. */
    .footer ul li { margin-bottom: 0; }
    .footer ul li a { display: block; padding: 11px 0; font-size: 15px; }
    .footer-iletisim li { padding: 9px 0; font-size: 15px; }
    .footer-iletisim li a { padding: 0; display: inline; }
    .yan-liste a { display: block; padding: 11px 0; }

    /* — Footer'ı toparla —
       Dört blok alt alta gelince footer sayfanın altıncı ekranına
       taşıyordu; başlıklar ve boşluklar sıkılaştırıldı. */
    .footer-grid { gap: 22px; padding-bottom: 30px; }
    .footer h4 { margin-bottom: 10px; }
    .footer-logo { height: 84px; margin-bottom: 12px; }
    .footer p { font-size: 14.5px; line-height: 1.7; }

    /* Bölge şeridi: 18 bağlantı tek satır akışında dağınık duruyordu */
    .footer-bolge { padding: 18px 22px; line-height: 2.1; font-size: 13.5px; }
    .footer-bolge a { display: inline-block; padding: 2px 0; }

    /* — Küçük yazılar —
       Başlık telefonundaki "Randevu" etiketi 10.5px, hero etiketi
       11.5px, vitrin alt başlıkları 12.5px idi. */
    .bas-tel small { font-size: 12px; }
    .hero-ust, .vitrin-bas .hero-ust { font-size: 12px; letter-spacing: 2.4px; }
    .vitrin-ad span { font-size: 13px; }
    .footer-alt { font-size: 13.5px; }

    /* Blog kartı başlığı: 26px'lik dokunma alanı büyütüldü */
    .blog-govde h3 a { display: block; padding: 3px 0; }
    .blog-govde h3 { font-size: 19px; line-height: 1.3; }
}

/* Footer düzeltmesinin yan etkisi: dokunma alanı büyüyünce footer
   1.366px'ten 1.541px'e çıktı. Uzun listeler iki sütuna alındı —
   hem dokunma alanı korunuyor hem yükseklik geri iniyor. */
@media (max-width: 900px) {
    .footer-grid > div > ul:not(.footer-iletisim) {
        display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px;
    }
    .footer-grid > div > ul:not(.footer-iletisim) > * { min-width: 0; }
    .footer ul li a { padding: 10px 0; }
    /* Güven kartlarındaki alt yazı 12.5px'ti; "belirgin olsun" isteği
       doğrultusunda 13.5px'e çıkarıldı. */
    .guven-o span { font-size: 13.5px; }
    .guven-o strong { font-size: 15px; }
}

@media (max-width: 900px) {
    /* Footer bölüm başlıkları 11.5px'ti; büyük harf + harf aralığıyla
       birlikte telefonda okunması yoruyordu. */
    .footer h4 { font-size: 12.5px; letter-spacing: 1.4px; }
    /* CTA bölümünde butonların altında ~250px boşluk kalıyordu */
    .cta { padding: 48px 0 52px; }
}

/* Hamburger menü telefonda logonun hemen yanına yapışıyordu.
   Sebep: sağa itme görevi `.menu`nun `margin-left:auto` kuralındaydı,
   ama mobilde menü `display:none` ve `margin-left:0` oluyor — böylece
   `.baslik-sag` sola akıyordu. Sağa itmeyi doğrudan ona veriyoruz. */
@media (max-width: 980px) {
    .baslik-sag { margin-left: auto; }
    /* Menü açıldığında (order:3, tam satır) bu kural onu bozmasın */
    .menu.acik { margin-left: 0; }
}