/* ==========================================================================
   lake-home.css — anasayfa vitrini

   TEMEL KURAL: kutu gorseli degil, GORSEL kutuyu belirler.
   Her kiremidin genisligi kendi resminin en-boy oranindan dogar; bu yuzden
   ne kirpma (c_fill) ne de dolgu (c_pad) gerekir — resim kutusuna birebir
   oturur, dort kenarinda bosluk kalmaz ve orijinal kadraji bozulmaz.

   Olculer (uretimden gelen gercek dosyalar):
     kapak      ~600x900    -> 0.667  (sol buyuk kiremit)
     mutfak     3536x2500   -> 1.4144 (sag ust)
     kapi       3536x2500   -> 1.4144 (sag alt sol)
     dolap      3536x2500   -> 1.4144 (sag alt sag)

   DORTLU BLOK ILK EKRANA SIGAR: blok yuksekligi, ekrandan header dusuldukten
   sonra kalan yerdir; satir yukseklikleri de bu yukseklikten TURETILIR.
   Asagidaki katsayilar bu turetmenin cebirsel sonucudur, keyfi degildir:

     r  = 1.4144                       (uygulama gorsellerinin orani)
     h1 = ust satir, h2 = alt satir, g = bosluk, H = blok yuksekligi
     Sag kolonun duzgun bir dikdortgen olmasi icin ust bandin genisligi alt
     ikilinin toplam genisligine ESIT olmali:
         r*h1 = 2*r*h2 + g        ve       h1 + g + h2 = H
     Bu iki denklemden:
         h2 = (H - 1.70694*g) / 3
         h1 = (2H - 1.29306*g) / 3
     Blogun toplam genisligi ise:  W = 1.6096*H + 0.39*g
     (asagidaki genislik siniri bu formulun tersidir)
   ========================================================================== */

.showcase-section {
    /* --- Olcu kaynaklari -------------------------------------------------- */
    --sc-gap: 16px;
    /* Sol kapak ile sag sutun ARASINDAKI bosluk, digerlerinden AYRI tutulur.
       Buyutmek kiremitleri buyutmez — kiremit boyu yukseklikten turer — yalnizca
       blogu o kadar genisletir ve iki tarafi birbirinden ayirir. Bu yuzden tek
       basina "yanlar bos kaldi" sorununu cozmez; oranlari da bozmaz.
       16 -> 48 -> 58 -> 100: sol kapak ile sag kolon arasi belirgin sekilde acildi. */
    --sc-gap-main: 100px;
    --sc-maxw: 1440px;
    --sc-sidepad: 12px;
    /* Bolumun kendi dikey nefesi; yukseklik butcesinden DUSULUR, yani her
       piksel dogrudan gorselden kesilir. Vitrin bir banner oldugu icin burada
       nefes payi degil, sinir kalinligi kadar yer birakiliyor: 40 -> 14. */
    --sc-vpad: 14px;

    /* Header yuksekligi CALISMA ANINDA olculup --lake-header-h'ye yazilir
       (bkz. Pages/Shared/_Header.cshtml icindeki satir ici betik). Menu
       uzunluguna ve ekran genisligine gore degistigi icin CSS'e sabit
       yazilamaz; betik calismadan onceki ilk boyama icin varsayilan verilir. */
    --sc-h-screen: calc(100vh - var(--lake-header-h, 130px) - var(--sc-vpad));
    --sc-h-screen: calc(100svh - var(--lake-header-h, 130px) - var(--sc-vpad));

    /* Cok genis degil de cok BASIK bir pencerede (or. 1280x600) blok yatayda
       tasmasin diye ikinci bir tavan: yukaridaki W formulunun tersi.

       Cikarilan deger --sc-gap-main'dir, --sc-gap degil: blogun TOPLAM
       genisliginde toplanan tek bosluk sol kapak ile sag kolon arasindakidir
       (alt ikilinin arasindaki bosluk zaten h1/h2 turetmesinin icinde).
       Ikisi esitken fark etmiyordu; ara acildiginda esitlik bozuldu ve bu
       satir duzeltilmezse genis-basik ekranda blok yatayda tasardi. */
    --sc-h-width: calc((min(100vw - 2 * var(--sc-sidepad), var(--sc-maxw)) - var(--sc-gap-main)) / 1.62);

    --sc-h: min(var(--sc-h-screen), var(--sc-h-width));

    --sc-top-h: calc((2 * var(--sc-h) - 1.29306 * var(--sc-gap)) / 3);
    --sc-bot-h: calc((var(--sc-h) - 1.70694 * var(--sc-gap)) / 3);

    background: #f7f5f1;
    /* Toplami --sc-vpad ile AYNI olmali; ikisi ayrisirsa blok ya tasar ya da
       altta olu bosluk kalir. */
    padding: 6px 0 8px;
    /* header-s10 kendi -130px alt boslugunu tasiyor; bolum onu geri alir ve
       tam header'in altindan baslar. Bu iki sayi BIRLIKTE degisir. */
    margin-top: 130px;
}

.showcase-fluid {
    width: 100%;
    max-width: var(--sc-maxw);
    padding: 0 var(--sc-sidepad);
    margin: 0 auto;
}

/* Konteyner daraldikca genislik tavani da daralir; --sc-maxw tek kaynak
   oldugu icin yukseklik hesabi kendiliginden uyum saglar. */
@media (max-width: 1499.98px) { .showcase-section { --sc-maxw: 1320px; } }
@media (max-width: 1399.98px) { .showcase-section { --sc-maxw: 1140px; } }
@media (max-width: 1199.98px) { .showcase-section { --sc-maxw: 960px; } }

/* Bloklar arasi zarif bolucu cizgi */
.showcase-divider {
    width: 80px;
    height: 2px;
    background: #d6cfc1;
    margin: 40px auto;
    opacity: .5;
}

/* ==========================================================================
   Masaustu: dortlu blok
   ========================================================================== */
@media (min-width: 992px) {
    .showcase-block {
        height: var(--sc-h);
        display: flex;
        align-items: stretch;
        /* Kiremitler kendi genisliklerini resimden aldigi icin blok tam
           genisligi doldurmaz; ortalanir. */
        justify-content: center;
        gap: var(--sc-gap-main);
        margin: 0 auto;
    }

    .showcase-block + .showcase-block,
    .showcase-divider + .showcase-block { margin-top: 56px; }

    .showcase-col-right {
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--sc-gap);
        min-height: 0;
    }

    .showcase-row {
        display: flex;
        justify-content: center;
        gap: var(--sc-gap);
        min-height: 0;
    }

    .showcase-row-top { height: var(--sc-top-h); }
    .showcase-row-bottom { height: var(--sc-bot-h); }

    /* Kiremit: yukseklik satirdan gelir, GENISLIK resimden. flex-basis auto +
       width auto = icerige gore daralma; boylece resmin saginda/solunda
       bosluk kalmaz. */
    .showcase-block .showcase-tile {
        flex: 0 0 auto;
        height: 100%;
        width: auto;
        max-width: 100%;
    }

    .showcase-block .showcase-img {
        height: 100%;
        width: auto;
        max-width: 100%;
    }
}

/* ==========================================================================
   Tablet ve mobil: dikey akis
   Dar ekranda kadraj oyunu YOK — her gorsel tam genislikte, kendi dogal
   yuksekliginde. Kirpma da bosluk da yapisal olarak imkansiz.
   ========================================================================== */
@media (max-width: 991.98px) {
    .showcase-section {
        padding: 0 0 40px;
        margin-top: 130px;
    }

    .showcase-fluid { padding: 12px 16px 0; }

    .showcase-block,
    .showcase-col-right,
    .showcase-row {
        display: flex;
        flex-direction: column;
        gap: 12px;
        height: auto;
    }

    .showcase-block + .showcase-block { margin-top: 12px; }

    .showcase-divider { display: none; }

    .showcase-block .showcase-tile { width: 100%; height: auto; }
    .showcase-block .showcase-img { width: 100%; height: auto; }
}

/* ==========================================================================
   Kiremit govdesi
   ========================================================================== */
.showcase-tile {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    background: #ececec;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .05);
    transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s ease;
}

.showcase-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .12);
}

/* KAPAK KIREMIDI KOSELI KALIR.
   Kapak bir URUN fotografidir ve urunun kendisi dik kosele bir dikdortgendir;
   kutunun kosesini yuvarlatmak urunun formunu yalanliyor, kapagin kosesi
   kesikmis gibi duruyordu. Sagdaki uc kare ise birer MEKAN fotografi —
   orada yuvarlatma kart etkisi veriyor ve kaliyor. */
.showcase-tile-tall {
    border-radius: 0;
}

/* Gorsel kiremidin TAMAMI. object-fit yalnizca guvenlik agi: kutu ile resim
   orani beklenmedik bicimde ayrisirsa resim bozulmak yerine sigar.
   Hover'da buyutme YOK — buyutme, overflow:hidden ile birlikte resmi kirpar. */
.showcase-img {
    display: block;
    object-fit: contain;
}

/* Urunun gorseli yoksa ya da slot bos ise kutu yine de yer kaplamali;
   oran resimden gelemedigi icin burada acikca verilir. */
.showcase-tile.is-empty,
.showcase-tile.is-blank {
    pointer-events: none;
}

.showcase-tile.is-empty {
    background: repeating-linear-gradient(45deg, #efeae0, #efeae0 12px, #e7e1d5 12px, #e7e1d5 24px);
    border: 1px dashed #d6cfc1;
}

.showcase-tile.is-empty.showcase-tile-tall,
.showcase-tile.is-blank.showcase-tile-tall { aspect-ratio: 2 / 3; }

.showcase-tile.is-empty.showcase-tile-top,
.showcase-tile.is-blank.showcase-tile-top,
.showcase-tile.is-empty.showcase-tile-half,
.showcase-tile.is-blank.showcase-tile-half { aspect-ratio: 3536 / 2500; }

.showcase-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #e9e6e0;
    color: #a89f8f;
}

/* ==========================================================================
   Yazi katmani
   ========================================================================== */
/* Rozet solda, "Incele" sagda — TEK SATIR. Ortu boylece kiremit yuksekliginin
   cok daha azini kapliyor; alcak kiremitlerde (kapi/dolap) gorselin uzerine
   cikmiyor. Ust pay degradenin yumusak baslamasi icin, alt pay yaziyi
   kenardan ayirmak icin. */
.showcase-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 30px 18px 14px;
    color: #fff;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .26) 55%, rgba(0, 0, 0, .62) 100%);
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    text-align: left;
    z-index: 2;
}

/* Sol kume: rozet ve (yalnizca kapakta) urun adi alt alta. */
.showcase-overlay_main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
}

/* Rozet zemini #bab7ad — RAL 7044 (Ipek grisi) ailesinden, kullanicinin
   verdigi tam ton. Acik zemin oldugu icin yazi KOYU olmak zorunda; beyaz
   yazi burada okunmuyordu. Koyu yazi ile kontrast ~9.6:1.
   (Bir ara RAL 6003 zeytin yesili denendi, gri tona geri donuldu.) */
.showcase-overlay .showcase-cat {
    display: inline-block;
    align-self: flex-start;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    background: #bab7ad;
    color: #1d1d1b;
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 600;
}

.showcase-overlay .showcase-name {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

.showcase-overlay .showcase-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: .85rem;
    font-weight: 500;
    opacity: .9;
    /* Sagda sabit durur, sol kume uzasa bile sarmaz. */
    flex: 0 0 auto;
    white-space: nowrap;
}

/* KAPI VE DOLAP KARELERINDE ROZET TAM ORTADA.
   Bu iki fotografta konu genelde iki yanda duruyor (iki kapi kanadi, dolabin
   iki bolumu) ve ortada bos bir duvar/sehpa kaliyor. Sol alttaki rozet tam
   kapinin ustune geliyordu. Uc kolonlu izgarada orta kolon her zaman kutunun
   MERKEZI oldugu icin rozet ortaya oturuyor; "Incele" sagda kaliyor.
   (Flex + space-between ile bu yapilamaz: orta oge yan ogelerin genisligine
   gore kayar, tam merkeze gelmez.) */
.showcase-tile-half .showcase-overlay {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
}

.showcase-tile-half .showcase-overlay_main {
    grid-column: 2;
    align-items: center;
}

.showcase-tile-half .showcase-overlay .showcase-cta {
    grid-column: 3;
    justify-self: end;
}

/* Alt satirdaki kiremitler kisa oldugu icin ortu orada daha da ince olmali;
   yoksa gorselin buyuk bolumunu koyu bir bant kapliyor. Tek satir duzende
   ustteki degrade payi da kisalabiliyor. */
@media (min-width: 992px) {
    .showcase-tile-half .showcase-overlay,
    .showcase-tile-top .showcase-overlay { padding: 22px 16px 12px; }

    .showcase-tile-half .showcase-overlay .showcase-cta { font-size: .8rem; }
}

@media (max-width: 991.98px) {
    .showcase-overlay {
        padding: 22px 14px 12px;
        gap: 10px;
        background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .26) 60%, rgba(0, 0, 0, .6) 100%);
    }

    .showcase-overlay_main { gap: 3px; }
    .showcase-overlay .showcase-cat { font-size: 10px; padding: 3px 9px; }
    .showcase-overlay .showcase-name { font-size: 15px; }
    .showcase-overlay .showcase-cta { font-size: 12px; }
}