/* =========================================================================
   VİTRİN — ana sayfa tasarım dili
   -------------------------------------------------------------------------
   Referans: "Сервис подбора техники Apple" (smart:pick) landing tasarımı.
   Kurgusu birebir uyarlandı; kırmızı aksan yerine Neo'nun 214° mavisi,
   uydurma sayı/logo/yorum yerine doğrulanabilir Neo verisi kullanıldı.

   KAPSAM: yalnız ana sayfa. Gövdeye .vitrin sınıfı basılır, bütün kurallar
   onun altında yaşar. inc/ust.php'deki tek <link> satırı silinirse sayfa
   stil.css + tema.css görünümüne döner; burada geri alınacak bir şey yok.

   NOT: bu katman düzen kurar, jeton TANIMLAMAZ. Renkler tema.css'ten gelir,
   böylece açık/koyu düğmesi ana sayfada da çalışmaya devam eder.
   ========================================================================= */

.vitrin {
    /* Referansın kart yarıçapı ~24 px; stil.css'te bu ara değer yok. */
    --v-r: 24px;
    --v-kenar: 1px solid rgba(255, 255, 255, .09);
    --v-bosluk: clamp(14px, 1.6vw, 20px);
}
/* Açık temada beyaz üstüne beyaz kenarlık görünmez; çizgi jetonuna dönülüyor. */
:root:not([data-tema="koyu"]) .vitrin { --v-kenar: 1px solid var(--cizgi); }

/* Referansta bölümler arası nefes sabit ve geniş; .bolum'un kendi ritmi
   burada kullanılmıyor çünkü bütün bölümler tek zemin üstünde yüzüyor. */
.vitrin .v-bolum { padding: clamp(34px, 4.4vw, 62px) 0 0; }
.vitrin .v-bolum:last-of-type { padding-bottom: clamp(34px, 4.4vw, 62px); }

/* Bölüm başlığı — referansta kalın, sola dayalı, üstünde etiket yok. */
.vitrin .v-baslik {
    margin: 0 0 clamp(18px, 2.2vw, 28px);
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
}

/* Ortak kart gövdesi — referansın tek reçetesi: hafif zemin, saç teli
   kenarlık, geniş yarıçap. */
.vitrin .v-kart {
    position: relative;
    border: var(--v-kenar);
    border-radius: var(--v-r);
    background: var(--kart-zemin);
    overflow: hidden;
}

/* Fotoğraflı kartlarda görsel zemini kaplar, yazı üstüne biner. */
.vitrin .v-medya {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.vitrin .v-medya img,
.vitrin .v-medya video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Fotoğrafın üstünde metin okunacak: alttan yukarı koyulaşan perde.
   Referansta da fotoğraflar bu şekilde bastırılmış. */
.vitrin .v-perde {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(100deg, rgba(6, 9, 13, .88) 0%, rgba(6, 9, 13, .62) 42%, rgba(6, 9, 13, .18) 100%);
}
/* Cihaz fotoğrafları açık zeminli (beyaz stüdyo). Alttaki perde zayıf
   kalırsa etiket okunmuyor; bu yüzden alt kenar neredeyse tamamen kapanıyor. */
.vitrin .v-perde.alttan {
    background: linear-gradient(0deg, rgba(6, 9, 13, .92) 0%, rgba(6, 9, 13, .55) 38%, rgba(6, 9, 13, .06) 100%);
}
.vitrin .v-ic {
    position: relative;
    z-index: 2;
}

/* Fotoğraf üstündeki metin her iki temada da beyaz kalır — zemin fotoğraf,
   tema değil. */
.vitrin .v-fotolu .v-ic,
.vitrin .v-fotolu .v-ic h2,
.vitrin .v-fotolu .v-ic h3 { color: #fff; }
.vitrin .v-fotolu .v-ic p { color: rgba(255, 255, 255, .74); }


/* == Kahraman ============================================================= */

.vitrin .v-kahraman {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 232px;
    gap: var(--v-bosluk);
    padding-top: clamp(16px, 2vw, 26px);
}

.vitrin .v-kahraman-ana {
    display: flex;
    align-items: center;
    min-height: clamp(340px, 42vw, 520px);
    padding: clamp(28px, 4vw, 62px);
}
.vitrin .v-kahraman-ana .v-ic { max-width: 560px; }

/* Referansın imzası: iri ama İNCE başlık. Kalın yazılırsa tasarım
   tamamen başka bir şeye dönüyor. */
.vitrin .v-kahraman-ana h1,
.vitrin .v-kahraman-ana .v-kahraman-baslik {
    margin: 0;
    font-size: clamp(30px, 4.4vw, 56px);
    font-weight: 300;
    line-height: 1.14;
    letter-spacing: -.028em;
}
.vitrin .v-kahraman-ana .v-alt {
    margin: clamp(16px, 2vw, 24px) 0 0;
    max-width: 380px;
    font-size: 15px;
    line-height: 1.55;
}
.vitrin .v-kahraman-ana .dugme { margin-top: clamp(22px, 2.6vw, 32px); }

/* Sağ sütun: üç dikey cihaz kartı. */
.vitrin .v-yan {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: var(--v-bosluk);
    min-height: clamp(340px, 42vw, 520px);
}
.vitrin .v-yan-kart {
    display: flex;
    align-items: flex-end;
    padding: 16px 18px;
    min-height: 104px;
    text-decoration: none;
    transition: transform var(--hiz), border-color var(--hiz);
}
.vitrin .v-yan-kart:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .2); }
.vitrin .v-yan-kart .v-ic {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -.01em;
}


/* == Sayılar + atölye kartı =============================================== */

.vitrin .v-sayi-duzen {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: var(--v-bosluk);
    align-items: stretch;
}
.vitrin .v-sayi-ag {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--v-bosluk);
}
.vitrin .v-sayi {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: clamp(24px, 3vw, 40px) 14px;
    min-height: 148px;
}
/* Referansta rakam devasa ve İNCE, altındaki açıklama küçük ve sönük. */
.vitrin .v-sayi b {
    display: block;
    font-size: clamp(30px, 3.4vw, 44px);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -.02em;
    /* NOWRAP DEĞİL: Türkçe değerler kısa ("81 il", "6 ay") ama İngilizce
       karşılıkları uzun ("81 provinces"). Tek satıra zorlanınca kart
       kenarından taşıp kırpılıyordu. Sarma serbest bırakıldı; Türkçe
       değerler zaten sığdığı için tek satırda kalmaya devam ediyor. */
    white-space: normal;
    overflow-wrap: break-word;
    text-wrap: balance;
}
.vitrin .v-sayi span {
    margin-top: 12px;
    font-size: 13.5px;
    color: var(--sis-2);
    line-height: 1.4;
}

.vitrin .v-atolye {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(28px, 3.4vw, 46px);
    min-height: 320px;
}
.vitrin .v-atolye h3 {
    margin: 0;
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 700;
    letter-spacing: -.02em;
}
.vitrin .v-atolye p {
    margin: 14px 0 0;
    max-width: 430px;
    font-size: 15px;
    line-height: 1.6;
}
.vitrin .v-atolye .dugme { align-self: flex-start; margin-top: clamp(24px, 3vw, 40px); }


/* == Geniş afiş =========================================================== */

/* Dolgu kartın tamamına değil YALNIZ yazı sütununa veriliyor: referansta
   ürün fotoğrafı kartın kenarına kadar gidiyor, ortada yüzen bir dikdörtgen
   değil. Beyaz stüdyo zeminli fotoğraflarımızda bu fark özellikle önemli. */
.vitrin .v-afis {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: stretch;
    padding: 0;
    min-height: clamp(300px, 32vw, 420px);
}
.vitrin .v-afis-yazi {
    align-self: center;
    padding: clamp(30px, 4vw, 60px);
}
.vitrin .v-afis h2 {
    margin: 0;
    font-size: clamp(28px, 3.6vw, 46px);
    font-weight: 700;
    letter-spacing: -.028em;
    line-height: 1.1;
}
.vitrin .v-afis p {
    margin: 16px 0 0;
    max-width: 330px;
    font-size: 15px;
    line-height: 1.55;
}
.vitrin .v-afis .dugme { margin-top: clamp(22px, 2.6vw, 32px); }
.vitrin .v-afis-gorsel { margin: 0; align-self: stretch; }
.vitrin .v-afis-gorsel picture { display: block; height: 100%; }
.vitrin .v-afis-gorsel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Ayna varyantı: fotoğraf solda. İki afiş üst üste geldiğinde ikisi de aynı
   yönde durursa sayfa tek elden çıkmış bir şablon gibi görünüyor. */
.vitrin .v-afis.ters { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.vitrin .v-afis.ters .v-afis-gorsel { order: -1; }


/* == İkili kartlar ======================================================== */

.vitrin .v-ikili {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--v-bosluk);
}
.vitrin .v-ikili-kart {
    display: flex;
    align-items: flex-end;
    min-height: clamp(220px, 24vw, 320px);
    padding: clamp(22px, 2.6vw, 34px);
    text-decoration: none;
    transition: transform var(--hiz);
}
.vitrin .v-ikili-kart:hover { transform: translateY(-2px); }
.vitrin .v-ikili-kart h3 {
    margin: 0;
    font-size: clamp(20px, 2.4vw, 30px);
    font-weight: 700;
    letter-spacing: -.02em;
}


/* == Cihaz ailesi ızgarası (referansta partner logo duvarı) =============== */

/* Sütun sayısı SABİT: auto-fit kullanıldığında sekiz öge beş sütuna
   yayılıyor ve son satırda iki boş hücre kalıyordu — ızgarada delik gibi
   duruyor. Dört sütun sekiz ögeyi tam iki satıra oturtuyor. */
.vitrin .v-aile {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    border: var(--v-kenar);
    border-radius: var(--v-r);
    background: var(--cizgi);
    overflow: hidden;
}
.vitrin .v-aile a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 104px;
    padding: 18px 14px;
    background: var(--kart-zemin);
    color: var(--murekkep);
    font-size: clamp(16px, 1.7vw, 21px);
    font-weight: 600;
    letter-spacing: -.015em;
    text-align: center;
    text-decoration: none;
    /* Referansta logo duvarı gri ve sönük; üzerine gelince canlanıyor. */
    opacity: .62;
    transition: opacity var(--hiz), background var(--hiz), color var(--hiz);
}
.vitrin .v-aile a:hover,
.vitrin .v-aile a:focus-visible {
    opacity: 1;
    background: var(--yuzey-2);
    color: var(--aksan-600);
}


/* == Talep bandı ========================================================== */

.vitrin .v-talep {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    gap: clamp(20px, 3vw, 40px);
    align-items: start;
    padding: clamp(28px, 3.6vw, 52px);
}
.vitrin .v-talep h2 {
    margin: 0;
    font-size: clamp(24px, 2.8vw, 36px);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.15;
}
.vitrin .v-talep > div > p {
    margin: 16px 0 0;
    max-width: 440px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--sis-2);
}
/* Form kartı zaten kendi kutusunda; vitrin dilinde çerçevesi sadeleşiyor. */
.vitrin .v-talep .form-kart {
    border-radius: var(--r-l);
    box-shadow: none;
}


/* == SSS ==================================================================
   .sss'in kendi kart biçimi zaten var; üstüne bir de .v-kart konursa kart
   içinde kart görünüyor. Burada yalnız genişlik ve hizası vitrin ritmine
   çekiliyor — .sss ortalanmış ve dar, vitrinde ise bölüm başlığıyla aynı
   hizada tam genişlik olmalı. */

.vitrin .v-sss { max-width: none; margin-left: 0; margin-right: 0; }


/* == Büyük e-posta kapanışı =============================================== */

.vitrin .v-kapanis { padding: clamp(40px, 5vw, 76px) clamp(24px, 3.4vw, 52px); }
.vitrin .v-kapanis p.v-slogan {
    margin: 0;
    max-width: 460px;
    font-size: 15px;
    color: var(--sis-2);
}
/* Referansın en güçlü tipografik anı: dev, ince, iki ağırlıklı adres.
   Burada e-posta yerine telefon var — Neo'ya gelen aramaların çoğu telefon. */
.vitrin .v-iri-bag {
    display: inline-block;
    margin: clamp(18px, 2.4vw, 30px) 0 0;
    font-size: clamp(28px, 5.4vw, 62px);
    font-weight: 300;
    letter-spacing: -.03em;
    line-height: 1.05;
    color: var(--murekkep);
    text-decoration: none;
    word-break: break-word;
}
.vitrin .v-iri-bag b { font-weight: 700; }
.vitrin .v-iri-bag:hover { color: var(--aksan-600); }
.vitrin .v-kapanis-alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 26px;
    margin-top: clamp(24px, 3vw, 38px);
    font-size: 13.5px;
    color: var(--sis-2);
}


/* == Sinema bandı =========================================================
   Tam genişlik, arkasında dönen klip olan bant. Klip zaten koyu ve kontrastlı
   olduğu için perde soldan sağa açılıyor: yazı solda okunur kalırken sağdaki
   cihaz görüntüsü kapanmıyor. */

.vitrin .v-sinema {
    display: flex;
    align-items: flex-end;
    min-height: clamp(300px, 34vw, 460px);
    padding: clamp(26px, 3.6vw, 52px);
}
.vitrin .v-sinema .v-ic { max-width: 520px; }
.vitrin .v-sinema h2 {
    margin: 0;
    font-size: clamp(26px, 3.6vw, 46px);
    font-weight: 700;
    letter-spacing: -.028em;
    line-height: 1.1;
}
.vitrin .v-sinema p {
    margin: 14px 0 0;
    max-width: 430px;
    font-size: 15px;
    line-height: 1.55;
}
.vitrin .v-sinema .dugme { margin-top: clamp(20px, 2.4vw, 30px); }


/* == Süreç adımları =======================================================
   Referansın 2x2 rakam kartlarıyla aynı tipografi: iri ve İNCE rakam, altında
   küçük gri açıklama. Buradaki rakam bir istatistik değil sıra numarası. */

.vitrin .v-adim-ag {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--v-bosluk);
}
.vitrin .v-adim { padding: clamp(22px, 2.6vw, 34px); }
.vitrin .v-adim b {
    display: block;
    font-size: clamp(30px, 3.2vw, 42px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--aksan-600);
}
.vitrin .v-adim h3 {
    margin: clamp(16px, 2vw, 24px) 0 0;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.015em;
}
.vitrin .v-adim p {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--sis-2);
}


/* == Atölye ilkesi ========================================================
   Tek cümlelik duruş. Kart dolu değil: referansta da sayfanın ortasında
   nefes alan, yalnızca yazıdan ibaret bir alan var. */

.vitrin .v-ifade { padding: clamp(38px, 5vw, 78px) clamp(24px, 3.4vw, 56px); }
.vitrin .v-ifade p.v-ifade-metin {
    margin: 0;
    max-width: 22ch;
    font-size: clamp(26px, 3.6vw, 46px);
    font-weight: 300;
    line-height: 1.22;
    letter-spacing: -.028em;
}
.vitrin .v-ifade em {
    font-style: normal;
    font-weight: 700;
    color: var(--aksan-600);
}
.vitrin .v-ifade p.v-ifade-alt {
    margin: clamp(20px, 2.6vw, 32px) 0 0;
    max-width: 560px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--sis-2);
}


/* == Arıza sihirbazı ======================================================
   Sihirbazın kendi kutusu var; vitrinde çerçevesi kart diline çekiliyor.

   Sihirbaz kendi başına çalışıyordu ama vitrin genişliğinde okunmuyordu:
   stil.css'teki ızgara auto-fit/198px olduğu için MacBook'un on belirtisi
   dört dar sütuna sıkışıyor, başlıklar iki satıra kırılıyor ve son sıra
   iki kartla yarım kalıyordu. Burada seçenekler iki sütuna sabitlenip
   okunur birer satıra dönüyor, adım başlıkları büyüyor, arama kutusu
   listenin patronu hâline geliyor.

   Bu blok da katmanın parçası: <link> silinirse sihirbaz eski görünümüne
   döner, işleyişine (betik.js'in data-sihirbaz-* kancaları) dokunulmuyor. */

.vitrin .sihirbaz {
    border: var(--v-kenar);
    border-radius: var(--v-r);
    background: var(--kart-zemin);
    box-shadow: none;
}

/* -- Üst şerit --------------------------------------------------------- */
/* Ayrı gri bir başlık çubuğu yerine kartın kendi zemini; ayrımı tek çizgi
   yapıyor. İlerleme çubuğu üç eşit dilime bölündü: kaçıncı adımda olunduğu
   sayıya bakmadan da anlaşılıyor. */
.vitrin .sihirbaz-basi {
    padding: clamp(16px, 1.9vw, 22px) clamp(20px, 2.8vw, 34px);
    background: transparent;
    border-bottom: var(--v-kenar);
}
.vitrin .sihirbaz-basi p {
    font-size: 14.5px;
    color: var(--murekkep);
    letter-spacing: -.01em;
}
.vitrin .sihirbaz-ray { flex: 0 1 220px; gap: 5px; }
.vitrin .sihirbaz-ray i,
.vitrin .sihirbaz-ray i.etkin { flex: 1; width: auto; height: 5px; }

/* -- Adım gövdesi ------------------------------------------------------ */
/* Adım kabının aralığı daraltılıp başlık ile açıklaması tek blok gibi
   bırakılıyor; asıl nefes başlıkla seçenek listesi arasına veriliyor. */
.vitrin .sihirbaz-govde { padding: clamp(22px, 2.8vw, 34px); }
.vitrin .sihirbaz-adim { gap: 9px; }
.vitrin .sihirbaz-adim h3 {
    margin: 0;
    font-size: clamp(20px, 2.1vw, 26px);
    font-weight: 700;
    letter-spacing: -.024em;
    line-height: 1.2;
}
.vitrin .sihirbaz-adim > p { font-size: 15px; max-width: 62ch; }
.vitrin .sihirbaz-adim > .serbest,
.vitrin .sihirbaz-adim > .secenek-ag { margin-top: clamp(10px, 1.4vw, 16px); }

/* -- Seçenekler -------------------------------------------------------- */
.vitrin .sihirbaz .secenek-ag { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* Cihaz ailesi adımı üç fotoğraflı kart; o ızgara olduğu gibi kalıyor. */
.vitrin .sihirbaz .secenek-ag.uclu { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--v-bosluk); }
/* Teslim yolu adımında üç seçenek var: iki sütunda son sıra yarım kalıp
   ızgarada delik bırakıyordu, üçü tek sıraya alındı. */
.vitrin .sihirbaz [data-adim="3"] .secenek-ag { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.vitrin .sihirbaz .secenek { border-radius: 14px; background: var(--yuzey-2); }
.vitrin .sihirbaz .secenek:not(.fotolu) {
    gap: 3px;
    justify-content: center;
    /* Sağdaki ok için yer bırakılıyor. */
    padding: 15px 46px 15px 18px;
    min-height: 74px;
}
.vitrin .sihirbaz .secenek:not(.fotolu) b { font-size: 15.5px; }
.vitrin .sihirbaz .secenek:not(.fotolu) span { font-size: 13.5px; color: var(--sis-2); }

/* Satırın tıklanabilir olduğunu söyleyen ok — süs değil, işaret. Üzerine
   gelince ilerleme yönünü göstermek için bir tık sağa kayıyor. */
.vitrin .sihirbaz .secenek:not(.fotolu)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 18px;
    width: 7px;
    height: 7px;
    border: 2px solid var(--sis-2);
    border-left: 0;
    border-bottom: 0;
    transform: translateY(-50%) rotate(45deg);
    transition: transform var(--hiz), border-color var(--hiz);
}
.vitrin .sihirbaz .secenek:not(.fotolu):hover::after,
.vitrin .sihirbaz .secenek:not(.fotolu)[aria-pressed="true"]::after {
    border-color: var(--aksan-600);
    transform: translate(3px, -50%) rotate(45deg);
}

/* -- Serbest metin girişi ---------------------------------------------- */
/* Kutu listenin üstünde asıl yol olarak duruyor: büyüdü, içine büyeç
   kondu. Çipler ise örnektir; hafif çerçeveli hap biçimine çekilip
   kutunun önüne geçmeleri engelleniyor. */
.vitrin .sihirbaz .serbest { margin: 0; }
.vitrin .sihirbaz .serbest-alan input {
    padding: 14px 16px 14px 46px;
    border-radius: 12px;
    border-color: var(--cizgi);
    background: var(--yuzey-2)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238a919c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.8-3.8'/%3E%3C/svg%3E")
        no-repeat 17px 50%;
}
.vitrin .sihirbaz .serbest-cip { gap: 7px; margin-top: 12px; }
.vitrin .sihirbaz .serbest-cip button {
    padding: 6px 12px;
    border-radius: 100px;
    background: transparent;
    font-size: 12.5px;
}
.vitrin .sihirbaz .serbest-sonuc { margin-top: 12px; color: var(--sis-2); }

/* -- Sonuç ------------------------------------------------------------- */
/* dt yönlendirmenin DEĞERİNİ ("2-4 saat"), dd ise etiketini ("ortalama
   süre") taşıyor. stil.css'te bu ikisinin puntosu ters kalmış: değer küçük
   BÜYÜK HARF, etiket iri ve kalın basılıyordu. Vitrinde düzeltiliyor —
   önce değer, altında soluk etiket. */
.vitrin .sonuc-olcu > div { background: var(--yuzey-2); }
/* atolye.css bu üç değeri mono yazıyor; vitrin dilinde daktilo görünümü
   istenmediği için gövde fontuna dönülüyor (bkz. .vitrin .etiket.sade). */
.vitrin .sonuc-olcu dt {
    font-family: inherit;
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.015em;
    text-transform: none;
    color: var(--murekkep);
}
.vitrin .sonuc-olcu dd {
    font-size: 13px;
    font-weight: 500;
    color: var(--sis-2);
    letter-spacing: 0;
}

/* -- Alt şerit --------------------------------------------------------- */
.vitrin .sihirbaz-alt {
    padding: 14px clamp(20px, 2.8vw, 34px);
    background: transparent;
    border-top: var(--v-kenar);
}


/* == Model rayı ===========================================================
   inc/model-rayi.php kendi <section class="bolum"> kabuğuyla geliyor.
   Vitrinde bölüm ritmi ve zeminler .v-bolum'dan geldiği için o kabuk
   nötrleniyor; ray kartlarının kendi biçimi stil.css'te kalıyor. */

.vitrin .bolum {
    padding: clamp(34px, 4.4vw, 62px) 0 0;
    background: transparent;
}
.vitrin .bolum .bolum-basi { margin-bottom: clamp(18px, 2.2vw, 28px); }

/* Küçük etiketler stil.css'te BÜYÜK HARF + geniş harf aralığıyla yazılıyor.
   Vitrin dilinde bu bloklar teknik bir çizelge etiketi gibi duruyor; referans
   tasarımda böyle bir şey yok. Yalnız bu sayfada normal cümle düzenine
   çekiliyor — diğer sayfalardaki görünüm aynı kalıyor. */
.vitrin .etiket.sade {
    font-family: inherit;
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
}


/* == Bölge ve harita ====================================================== */

.vitrin .v-bolge {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--v-bosluk);
    align-items: stretch;
}
.vitrin .v-bolge-yazi { padding: clamp(26px, 3.2vw, 44px); }
.vitrin .v-bolge-yazi > p {
    margin: 14px 0 0;
    max-width: 440px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--sis-2);
}
.vitrin .v-ilce {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: clamp(20px, 2.6vw, 30px);
}
.vitrin .v-ilce a {
    padding: 11px 14px;
    border: var(--v-kenar);
    border-radius: 12px;
    color: var(--murekkep);
    font-size: 14px;
    text-decoration: none;
    transition: background var(--hiz), color var(--hiz);
}
.vitrin .v-ilce a:hover,
.vitrin .v-ilce a:focus-visible { background: var(--yuzey-2); color: var(--aksan-600); }
.vitrin .v-harita { padding: 0; min-height: 320px; }
.vitrin .v-harita iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 320px;
    border: 0;
}
/* Harita KOYU TEMADA DA açık zeminli bırakılıyor. invert(1) ile koyulaştırmak
   denendi: harita yüklenene kadar kart simsiyah bir delik gibi duruyor, yüklenince
   de Google'ın renkleri bozuluyor. Açık harita, kartın içinde diğer fotoğraf
   kartları gibi bir görsel yüzey olarak okunuyor. */


/* == Yazı kartları ======================================================== */

.vitrin .v-yazi-ag {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--v-bosluk);
}
.vitrin .v-yazi {
    display: flex;
    flex-direction: column;
    padding: clamp(22px, 2.6vw, 32px);
    text-decoration: none;
    color: var(--murekkep);
    transition: transform var(--hiz), border-color var(--hiz);
}
.vitrin .v-yazi:hover { transform: translateY(-2px); }
.vitrin .v-yazi-gorsel {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 14px;
}
.vitrin .v-yazi h3 {
    margin: 12px 0 0;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.015em;
    line-height: 1.3;
}
.vitrin .v-yazi p {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--sis-2);
}
.vitrin .v-yazi-kunye {
    display: flex;
    gap: 14px;
    margin-top: auto;
    padding-top: 18px;
    font-size: 12.5px;
    color: var(--sis-2);
}


/* == Bölüm altı bağlantısı ================================================ */

.vitrin .v-daha { margin: clamp(20px, 2.4vw, 28px) 0 0; text-align: center; }


/* == Dar ekran ============================================================ */

@media (max-width: 1040px) {
    .vitrin .v-adim-ag { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vitrin .v-yazi-ag { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .vitrin .v-kahraman { grid-template-columns: 1fr; }
    /* Üç dikey kart telefonda yatay üçe döner: dikey kalsa sayfa iki katına
       çıkardı ve kahraman ekrandan taşardı. */
    .vitrin .v-yan {
        grid-template-rows: none;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        min-height: 0;
    }
    .vitrin .v-yan-kart { min-height: 92px; padding: 12px 14px; }
    .vitrin .v-yan-kart .v-ic { font-size: 13.5px; }
    .vitrin .v-yan-kart .v-ek { display: none; }

    .vitrin .v-sayi-duzen { grid-template-columns: 1fr; }
    .vitrin .v-afis,
    .vitrin .v-afis.ters { grid-template-columns: 1fr; }
    .vitrin .v-afis-gorsel { order: -1; max-height: 260px; }
    .vitrin .v-talep { grid-template-columns: 1fr; }
    .vitrin .v-aile { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .vitrin .v-bolge { grid-template-columns: 1fr; }
    .vitrin .v-harita { min-height: 260px; }
}

@media (max-width: 620px) {
    .vitrin { --v-r: 18px; }
    .vitrin .v-ikili { grid-template-columns: 1fr; }
    .vitrin .v-sayi-ag { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vitrin .v-sayi { min-height: 124px; padding: 20px 10px; }
    .vitrin .v-aile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vitrin .v-adim-ag { grid-template-columns: 1fr; }
    .vitrin .v-ilce { grid-template-columns: 1fr; }
    .vitrin .v-sinema { min-height: 260px; }

    /* Telefonda belirtiler alt alta tek sütun; cihaz aileleri ikili +
       tek kalır (stil.css'in kendi dar ekran kuralının aynısı, buradaki
       daha yüksek öncelikli kurala karşılık yazılıyor). */
    .vitrin .sihirbaz .secenek-ag,
    .vitrin .sihirbaz [data-adim="3"] .secenek-ag { grid-template-columns: 1fr; }
    .vitrin .sihirbaz .secenek-ag.uclu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vitrin .sihirbaz .secenek:not(.fotolu) { min-height: 0; }
}