/* ==========================================================================
   Ana site stilleri (ust menu, mobil cekmece, ana sayfa hero)
   /link sayfasi bilerek ayri tutulur: link.css kendi kendine yeter.
   Mobil once yazilmistir; ust menu 64em (1024px) uzerinde acilir.
   ========================================================================== */

:root {
    --ink:         #1a1815;
    --ink-soft:    #6b645c;
    --ink-faint:   #8c857b;
    --cream:       #fdfbf6;
    --page:        #faf8f3;
    --gold:        #a2854f;   /* acik zeminde ince altin */
    --gold-solid:  #b89a63;   /* dolu altin dugme */
    --gold-line:   #c2a468;   /* ince altin cerceve */
    --hair:        rgba(26, 24, 21, .10);

    /* Magaza bolumu ve alt bilgi ayni zemini paylasir: sayfa sonunda
       alt alta geldikleri icin tek parca okunmali. Tek degiskene bagli. */
    --dark:        #000;

    --drawer-bg:   #2b2620;
    --drawer-text: #f4f0e6;
    --drawer-gold: #c7b184;

    --serif: "Prata", "Times New Roman", Georgia, serif;
    --sans:  "Jost", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

    --page-max: 87.5rem;   /* 1400px */
    --gutter: clamp(1.25rem, 4vw, 3rem);
    --rule: #e2ddd2;       /* bolumler arasi ince cizgi */

    /* Ust menunun yaklasik yuksekligi. Hero'nun ekranin kalanini tam
       doldurabilmesi icin gerekli; menu dolgusu degisirse burasi da guncellenmeli. */
    --header-h: 4.55rem;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Menuden bolume gecis yumusak olsun; hareketi azaltilmis sistemlerde kapali */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* Yalnizca ekran okuyuculara gorunen baslik */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

body {
    margin: 0;
    /* Kisa sayfalarda (yer tutucu sayfalar gibi) alt bilgi ekranin ortasinda
       asili kalmasin, her zaman en alta otursun. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--sans);
    color: var(--ink);
    background-color: var(--page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img { max-width: 100%; }

/* Govde flex sutun oldugu icin icerik bosluk kadar buyusun */
main { flex: 1 0 auto; }

/* Cekmece acikken arka plan kaymasin */
body.is-locked { overflow: hidden; }

/* Ortak icerik sutunu: tum bolumler ayni kenar boslugunu paylasir */
.wrap {
    width: 100%;
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: .65rem 1rem;
    background: var(--cream);
    color: var(--ink);
    border-radius: 4px;
}

.skip:focus { left: .75rem; top: .75rem; }

:where(a, button):focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* --- Dugmeler -------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: .9rem 1.9rem;
    border: 1px solid transparent;
    font-family: var(--sans);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .16em;
    /* letter-spacing son harften sonra da bosluk birakir; ortalamayi duzelt */
    text-indent: .16em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.btn--dark {
    background: var(--ink);
    color: var(--cream);
}

.btn--dark:hover { background: #322d26; }

/* --- Ust menu -------------------------------------------------------------- */

.site-header {
    position: relative;
    z-index: 20;
    background: var(--cream);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding-block: clamp(.9rem, 2vw, 1.4rem);
}

.brand {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    flex: 0 1 auto;
    min-width: 0;
    color: var(--ink);
    text-decoration: none;
}

.brand__name {
    font-family: var(--serif);
    font-size: clamp(1.05rem, 2.3vw, 1.45rem);
    letter-spacing: .18em;
    line-height: 1;
    white-space: nowrap;
}

.brand__tagline {
    font-size: clamp(.5rem, 1.1vw, .62rem);
    letter-spacing: .34em;
    line-height: 1;
    color: var(--gold);
    text-transform: uppercase;
    white-space: nowrap;
}

/* Ust menu yalnizca genis ekranda; altinda cekmece kullanilir */
.mainnav { display: none; }

.mainnav__list {
    display: flex;
    gap: clamp(1rem, 2.5vw, 2.4rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.mainnav__link {
    font-size: clamp(.74rem, 1vw, .86rem);
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    transition: color .18s ease;
}

.mainnav__link:hover { color: var(--gold); }

.site-header__actions {
    display: flex;
    align-items: center;
    gap: clamp(.5rem, 1.5vw, 1.4rem);
    flex: 0 0 auto;
}

.lang {
    display: flex;
    align-items: center;
    gap: .15rem;
    font-size: .74rem;
    letter-spacing: .12em;
}

.lang a,
.lang span {
    padding: .3rem .35rem;
    color: var(--ink-faint);
    text-decoration: none;
}

.lang a:hover { color: var(--ink); }

.lang [aria-current="true"] {
    color: var(--ink);
    font-weight: 500;
}

.lang__sep { color: var(--hair); }

/* Iletisim dugmesi ust menuyle birlikte acilir */
.site-header__contact { display: none; }

.burger {
    display: grid;
    place-content: center;
    gap: .42rem;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.burger__bar {
    display: block;
    width: 1.65rem;
    height: 1.5px;
    background: var(--ink);
}

/* --- Mobil cekmece --------------------------------------------------------- */

.drawer {
    position: fixed;
    inset: 0;
    z-index: 60;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--drawer-bg);
    color: var(--drawer-text);
    animation: drawer-in .22s ease both;
}

@keyframes drawer-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.drawer__inner {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding-top: calc(env(safe-area-inset-top) + clamp(.9rem, 2vw, 1.4rem));
    padding-bottom: calc(env(safe-area-inset-bottom) + 1.75rem);
}

.drawer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.drawer__brand {
    font-family: var(--serif);
    font-size: clamp(1.05rem, 2.3vw, 1.45rem);
    letter-spacing: .18em;
    line-height: 1;
}

.drawer__close {
    display: grid;
    place-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-right: -.6rem;   /* optik hizalama: ikon kenara yaslansin */
    padding: 0;
    background: none;
    border: 0;
    color: var(--drawer-text);
    cursor: pointer;
}

.drawer__close svg {
    width: 1.4rem;
    height: 1.4rem;
}

.drawer__nav {
    flex: 1 1 auto;
    margin-top: clamp(1.75rem, 6vw, 2.75rem);
}

.drawer__list {
    display: grid;
    gap: clamp(.25rem, 1.2vw, .5rem);
    margin: 0;
    padding: 0;
    list-style: none;
    justify-items: start;
}

.drawer__link {
    display: inline-block;
    font-family: var(--serif);
    font-size: clamp(1.7rem, 7.5vw, 2.3rem);
    line-height: 1.34;
    color: var(--drawer-text);
    text-decoration: none;
}

.drawer__link--accent { color: var(--drawer-gold); }

.drawer__foot {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 2rem;
    margin-top: 2.5rem;
    font-size: .72rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(244, 240, 230, .72);
}

.drawer__phone {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

/* --- Ana sayfa hero -------------------------------------------------------- */

.hero {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: center;
    min-height: max(28rem, calc(100vh - var(--header-h)));
}

@supports (height: 100svh) {
    /* svh: tarayici cubugu gizlenip acilirken yukseklik ziplamaz */
    .hero { min-height: max(28rem, calc(100svh - var(--header-h))); }
}

.hero__img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Dar ekranda yatay fotografin ortasi bos kaliyor; kirpmayi
       mucevherlerin bulundugu sag-orta bolgeye kaydir. */
    object-position: 64% center;
}

.hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Mobilde metin ortada durdugu icin perde her yere esit yayilir */
    background: linear-gradient(rgba(28, 22, 14, .56), rgba(28, 22, 14, .66));
}

.hero__inner {
    padding-block: clamp(3rem, 11vw, 6rem);
    text-align: center;
    color: #fff;
}

.hero__title {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.85rem, 7.4vw, 3.35rem);
    line-height: 1.2;
    text-wrap: balance;
}

.hero__text {
    max-width: 34rem;
    margin: clamp(1rem, 3.5vw, 1.5rem) auto 0;
    font-weight: 300;
    font-size: clamp(.95rem, 3.6vw, 1.06rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, .88);
}

.hero__actions {
    display: grid;
    gap: .75rem;
    margin-top: clamp(1.75rem, 6vw, 2.5rem);
}

/* Mobilde: dolu altin birincil + krem ikincil dugme, tam genislik */
.hero__cta {
    background: var(--gold-solid);
    color: #fff;
    border-radius: 5px;
}

.hero__cta:hover { background: #ab8d58; }

.hero__contact {
    background: var(--cream);
    color: var(--ink);
    border-radius: 5px;
}

.hero__contact:hover { background: #fff; }

/* --- Genis ekran (1024px ve uzeri) ----------------------------------------- */

@media (min-width: 64em) {

    :root { --header-h: 5.8rem; }

    .mainnav { display: block; }

    .site-header__contact { display: inline-flex; }

    .burger { display: none; }

    /* Cekmece yalnizca mobil icindir; genis ekranda acik kalmasin */
    .drawer { display: none !important; }

    .hero {
        min-height: min(78vh, 46rem);
    }

    .hero__scrim {
        /* Masaustunde metin solda: perde soldan saga acilir, taslar ve
           mucevherler sag tarafta gorunur kalir. */
        background: linear-gradient(95deg,
            rgba(28, 22, 14, .86) 0%,
            rgba(28, 22, 14, .64) 30%,
            rgba(28, 22, 14, .22) 60%,
            rgba(28, 22, 14, 0) 86%);
    }

    .hero__img { object-position: center; }

    .hero__inner { text-align: left; }

    /* Tasarimdaki iki satirlik kirilim: "...nesillere" / "aktarilan parcalar" */
    .hero__title {
        max-width: 41rem;
        font-size: clamp(2.1rem, 3.1vw, 2.85rem);
    }

    .hero__text {
        max-width: 33rem;
        margin-inline: 0;
    }

    .hero__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    /* Masaustunde birincil dugme ince cerceveli, iletisim ust menude */
    .hero__cta {
        background: transparent;
        border-color: rgba(255, 255, 255, .65);
        color: #fff;
        padding-inline: 2.4rem;
        border-radius: 0;
    }

    .hero__cta:hover {
        background: rgba(255, 255, 255, .12);
        border-color: #fff;
    }

    .hero__contact { display: none; }
}

/* --- Hareket azaltma tercihi ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* ==========================================================================
   Kategori vitrinleri (ana sayfa)
   Mobil: ortalanmis baslik + yatay kaydirilan urun seridi
   Masaustu: metin blogu ile 3'lu urun izgarasi donusumlu yer degistirir
   ========================================================================== */

.catsec {
    /* Menuden gelindiginde baslik ekranin en tepesine yapismasin */
    scroll-margin-top: 1.5rem;
}

.catsec__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-block: clamp(2.75rem, 8vw, 4.5rem);
}

/* Mobilde kutu bir kap degil: cocuklari dogrudan dis izgaraya katilsin ki
   order ile baslik -> urunler -> dugme sirasina gecebilsinler. */
.catsec__box { display: contents; }

.catsec__intro    { order: 1; }
.catsec__products { order: 2; }
.catsec__more     { order: 3; }

/* Bolumler arasi ince ayirac (ilk bolumden sonra) */
.catsec + .catsec .catsec__grid {
    border-top: 1px solid var(--rule);
}

.catsec__intro { text-align: center; }

.catsec__title {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.85rem, 6.5vw, 2.6rem);
    line-height: 1.2;
}

.catsec__desc {
    margin: clamp(.75rem, 2.5vw, 1.1rem) auto 0;
    max-width: 30rem;
    font-size: clamp(.95rem, 3.4vw, 1rem);
    line-height: 1.7;
    color: var(--ink-soft);
    text-wrap: balance;
}

/* --- Urun seridi (mobil: yatay kaydirma) ----------------------------------- */

.catsec__products {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(68%, 20rem);
    gap: clamp(.75rem, 3vw, 1.25rem);
    margin: clamp(1.5rem, 5vw, 2rem) calc(-1 * var(--gutter)) 0;
    padding-inline: var(--gutter);
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    /* Kaydirma cubugu tasarimi bozmasin */
    scrollbar-width: none;
}

.catsec__products::-webkit-scrollbar { display: none; }

.pcard { scroll-snap-align: start; }

.pcard__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* Kart icerigi span; blok davranisi acikca verilmeli */
.pcard__media {
    display: block;
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    /* Gorsel inene kadar bosluk beyaz parlamasin */
    background: #ece7dd;
}

.pcard__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pcard__img {
    transition: transform .35s ease;
}

.pcard__link:hover .pcard__img { transform: scale(1.03); }

.pcard__name {
    display: block;
    margin: .9rem 0 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1rem, 3.8vw, 1.18rem);
    line-height: 1.35;
}

.pcard__spec {
    display: block;
    margin: .45rem 0 0;
    font-size: .72rem;
    letter-spacing: .11em;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* --- "Devami" dugmesi ------------------------------------------------------ */

.catsec__more {
    margin-top: clamp(1.5rem, 5vw, 2rem);
    text-align: center;
}

.btn--gold {
    background: var(--gold-solid);
    color: #fff;
    border-radius: 5px;
}

.btn--gold:hover { background: #ab8d58; }

/* Mobilde tam genislik, tasarimdaki gibi */
.catsec__more .btn { width: 100%; }

/* --- Masaustu: capraz duzen ------------------------------------------------ */

@media (min-width: 64em) {

    .catsec__grid {
        /* Dis izgara ile urun izgarasinin araligi ayni olmali: ancak o zaman
           cerceveli kutu urun kareleriyle birebir ayni genislige oturur ve
           satir "4 fotograf" gibi okunur. */
        --cat-gap: clamp(1rem, 1.8vw, 1.5rem);

        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--cat-gap);
        align-items: start;
    }

    /* Kutu artik gercek bir kap: ince altin cerceveli, urun goreseliyle ayni
       olcude kare. Icerik dikeyde ve yatayda ortalanir. */
    .catsec__box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        grid-column: 1;
        grid-row: 1;
        aspect-ratio: 1;

        /* Cerceve artik cizgi degil, gercek bir altin zincir gorseli.
           Gorsel seffaf kenar payi kirpilarak hazirlandi; kare oldugu ve kutu
           da kare oldugu icin %100/%100 germe zinciri bozmaz.
           Dolgu, metnin zincire degmemesi icin cizgi cerceveye gore artirildi. */
        padding: clamp(1.25rem, 2.4vw, 3.1rem);
        background-image: url("../images/chain.webp");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .catsec__title { font-size: clamp(1.25rem, 2.2vw, 2.1rem); }

    .catsec__desc {
        margin-top: clamp(.55rem, 1.1vw, 1rem);
        font-size: clamp(.78rem, 1vw, .95rem);
        line-height: 1.6;
    }

    .catsec__more {
        margin-top: clamp(.85rem, 1.8vw, 1.6rem);
    }

    .catsec__more .btn {
        width: auto;
        min-height: 2.75rem;
        padding: .8rem 1.7rem;
        font-size: .72rem;
    }

    .catsec__products {
        grid-column: 2 / -1;
        grid-row: 1;
        grid-auto-flow: row;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--cat-gap);
        margin: 0;
        padding-inline: 0;
        overflow: visible;
        scroll-snap-type: none;
        align-content: start;
    }

    /* Cift sirali bolumlerde kutu sagda, urunler solda */
    .catsec--reverse .catsec__box { grid-column: 4; }

    .catsec--reverse .catsec__products { grid-column: 1 / 4; }
}

/* ==========================================================================
   Urun detay sayfasi
   Mobil: galeri ustte, bilgiler altta. Masaustu: iki sutun yan yana.
   ========================================================================== */

.product__grid {
    padding-block: clamp(2rem, 6vw, 4rem);
}

/* --- Galeri ---------------------------------------------------------------- */

/* Cerceve her zaman kare. Galerideki fotograflar da kare uretiliyor, ama
   oran sabit tutuldugu icin kare olmayan bir fotograf eklense bile sayfa
   duzeni kaymaz - kucuk gorsel degistirildiginde yukseklik ayni kalir. */
.gallery__main {
    aspect-ratio: 1;
    overflow: hidden;
    background: #ece7dd;
}

.gallery__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(.5rem, 1.5vw, .75rem);
    margin: clamp(.5rem, 1.5vw, .75rem) 0 0;
    padding: 0;
    list-style: none;
}

.gallery__thumb {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    overflow: hidden;
    background: #ece7dd;
    border: 0;
    cursor: pointer;
}

.gallery__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.gallery__thumb:hover img { transform: scale(1.04); }

/* Ana gorselde hangi karenin acik oldugu belli olsun */
.gallery__thumb.is-active {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* --- Bilgi sutunu ---------------------------------------------------------- */

.product__info {
    margin-top: clamp(1.75rem, 6vw, 2.5rem);
}

.product__category {
    display: inline-block;
    font-size: .74rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
}

.product__category:hover { color: var(--ink); }

.product__title {
    margin: .8rem 0 0;
    font-family: var(--serif);
    font-weight: 400;
    /* Mobilde tasarimdakinden daha olculu; genis ekranda tam boy */
    font-size: clamp(1.85rem, 9.2vw, 3.1rem);
    line-height: 1.15;
}

.product__text {
    max-width: 38rem;
    margin: clamp(1rem, 3.5vw, 1.5rem) 0 0;
    font-size: clamp(.95rem, 3.4vw, 1.05rem);
    line-height: 1.8;
    color: var(--ink-soft);
}

/* --- Kunye ----------------------------------------------------------------- */

.specs {
    margin: clamp(1.75rem, 6vw, 2.75rem) 0 0;
    border-bottom: 1px solid var(--rule);
}

.specs__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.5rem;
    padding: .95rem 0;
    border-top: 1px solid var(--rule);
}

.specs__label {
    flex: 0 0 auto;
    font-size: clamp(.9rem, 3.3vw, .95rem);
    color: var(--ink-soft);
}

.specs__value {
    margin: 0;
    min-width: 0;
    font-size: clamp(.9rem, 3.3vw, .95rem);
    text-align: right;
    overflow-wrap: break-word;
}

/* --- Magazada gorun kutusu ------------------------------------------------- */

.instore {
    margin: clamp(1.75rem, 6vw, 2.5rem) 0 0;
    padding: clamp(1.4rem, 4.5vw, 2rem);
    /* Zemin rengi yerine ince cerceve; cizgi rengi ust taraftaki
       kunye tablosuyla ayni, iki blok birbirine baglanir. */
    border: 1px solid var(--rule);
    /* Mobilde kutunun tum icerigi ortali; masaustunde sola doner (asagida) */
    text-align: center;
}

.instore__title {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.2rem, 4.4vw, 1.4rem);
    line-height: 1.3;
}

.instore__text {
    margin: .8rem 0 0;
    font-size: clamp(.9rem, 3.3vw, .95rem);
    line-height: 1.7;
    color: var(--ink-soft);
}

/* Mobilde dugmeler alt alta ve ortali. Tek sutunlu grid sutunu en genis
   dugmeye (telefon numarasi) gore acar, iki dugme de o genislige esnir. */
.instore__actions {
    display: grid;
    justify-content: center;
    gap: .75rem;
    margin-top: clamp(1.25rem, 4vw, 1.5rem);
}

@media (min-width: 64em) {
    .instore { text-align: left; }

    .instore__actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

/* Etiket bir telefon numarasi: harf araligi rakamlari dagitmasin */
.instore__call {
    letter-spacing: .08em;
    text-indent: .08em;
}

.instore__address {
    margin: clamp(1rem, 3.5vw, 1.25rem) 0 0;
    font-size: clamp(.86rem, 3.1vw, .9rem);
    line-height: 1.6;
    color: var(--ink-soft);
}

.btn--outline {
    background: transparent;
    border-color: #d6cfc2;
    color: var(--ink);
}

.btn--outline:hover {
    background: #fff;
    border-color: var(--ink-faint);
}

/* --- Benzer parcalar ------------------------------------------------------- */

.similar {
    padding-block: clamp(2.5rem, 8vw, 4.5rem);
    border-top: 1px solid var(--rule);
}

.similar__title {
    margin: 0 0 clamp(1.5rem, 4vw, 2rem);
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.85rem, 6.5vw, 2.6rem);
    line-height: 1.2;
}

.similar__list {
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 40em) {
    .similar__list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64em) {
    .similar__list { grid-template-columns: repeat(4, 1fr); }

    .product__grid {
        display: grid;
        /* Galeri sutunu bilerek dar: kare ana gorsel + kucuk kareler, esit
           genislikte olsaydi sol sutun sag sutundan belirgin uzun kalirdi.
           minmax(0, ...) uzun degerlerin sutunu itmesini engeller. */
        grid-template-columns: minmax(0, .78fr) minmax(0, 1fr);
        gap: clamp(2rem, 5vw, 4.5rem);
        align-items: start;
    }

    .product__info { margin-top: 0; }
}

/* ==========================================================================
   Uclu vitrin panosu (kategorilerin altinda)
   Tam genislik; mobilde alt alta, masaustunde yan yana.
   ========================================================================== */

.showcase__list {
    display: grid;
    /* Paneller arasinda ince beyaz ayirac; sayfa zemini aradan gorunur */
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.showcase__item {
    position: relative;
    /* Tasarimdaki dikey oran */
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #17130f;
}

.showcase__link {
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    text-decoration: none;
}

.showcase__media {
    display: block;
    width: 100%;
    height: 100%;
}

.showcase__el {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

/* Metnin okunmasi icin alttan yukari koyulasan perde */
.showcase__caption {
    position: absolute;
    inset: auto 0 0 0;
    display: block;
    padding: clamp(1.25rem, 3vw, 2.25rem);
    background: linear-gradient(to top,
        rgba(12, 9, 6, .78) 0%,
        rgba(12, 9, 6, .42) 45%,
        rgba(12, 9, 6, 0) 100%);
}

.showcase__title {
    display: block;
    font-family: var(--serif);
    font-size: clamp(1.25rem, 4.6vw, 1.7rem);
    line-height: 1.25;
}

.showcase__text {
    display: block;
    margin-top: .45rem;
    font-size: clamp(.85rem, 3.2vw, .95rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
}

/* --- Genis ekran ----------------------------------------------------------- */

@media (min-width: 64em) {
    .showcase__list { grid-template-columns: repeat(3, 1fr); }
}

/* Metin yalnizca fare olan cihazlarda gizlenir. Dokunmatik tablette hover
   diye bir sey yok; orada gizleseydik metne hic ulasilamazdi. */
@media (min-width: 64em) and (hover: hover) {
    .showcase__caption {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity .3s ease, transform .3s ease;
    }

    .showcase__link:hover .showcase__caption,
    .showcase__link:focus-visible .showcase__caption {
        opacity: 1;
        transform: none;
    }

    .showcase__link:hover .showcase__el { transform: scale(1.04); }
}

/* ==========================================================================
   Magaza bolumu + harita
   ========================================================================== */

.store {
    background: var(--dark);
    color: #f6f1e6;
}

.store__inner {
    padding-block: clamp(3.5rem, 10vw, 6rem);
    text-align: center;
}

.store__title {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(2rem, 7.5vw, 3.1rem);
    line-height: 1.2;
    text-wrap: balance;
}

.store__text {
    max-width: 46rem;
    margin: clamp(1.25rem, 4vw, 1.9rem) auto 0;
    font-weight: 300;
    font-size: clamp(.95rem, 3.4vw, 1.05rem);
    line-height: 1.9;
    color: rgba(246, 241, 230, .74);
}

/* Bolumun en vurgulu ogesi: buyuk, acik renkli ve dokunulabilir */
.store__phone {
    display: block;
    width: fit-content;
    margin-inline: auto;
    margin-top: clamp(1.75rem, 5vw, 2.5rem);
    font-family: var(--serif);
    font-size: clamp(1.55rem, 6vw, 2.15rem);
    line-height: 1.2;
    letter-spacing: .01em;
    color: #f6f1e6;
    text-decoration: none;
    white-space: nowrap;
}

.store__phone:hover { color: #fff; }

.store__cta {
    display: block;
    width: fit-content;
    margin-inline: auto;
    margin-top: clamp(1.1rem, 3.5vw, 1.6rem);
    padding-bottom: .6rem;
    border-bottom: 1px solid rgba(194, 164, 104, .55);
    font-size: clamp(.72rem, 2.9vw, .8rem);
    font-weight: 500;
    letter-spacing: .22em;
    /* letter-spacing son harften sonra da bosluk birakir; ortalamayi duzelt */
    text-indent: .22em;
    text-transform: uppercase;
    color: var(--gold-line);
    text-decoration: none;
    transition: border-color .18s ease, color .18s ease;
}

.store__cta:hover {
    color: #dcc38a;
    border-bottom-color: #dcc38a;
}

.store__address {
    margin: clamp(1.5rem, 4.5vw, 2.25rem) 0 0;
    font-size: clamp(.85rem, 3.2vw, .95rem);
    line-height: 1.6;
    color: rgba(246, 241, 230, .58);
}

/* --- Harita ---------------------------------------------------------------- */

.storemap {
    /* Harita yuklenene kadar bolum bos bir bosluk gibi gorunmesin */
    background: #e8e4dc;
    line-height: 0;
}

.storemap__frame {
    display: block;
    width: 100%;
    height: clamp(20rem, 45vh, 32rem);
    border: 0;
}

/* ==========================================================================
   Alt bilgi (her sayfada)
   Zemin rengi magaza bolumuyle ayni; ikisi alt alta geldiginde tek parca okunur.
   ========================================================================== */

.sitefoot {
    background: var(--dark);
    color: rgba(246, 241, 230, .72);
    font-size: clamp(.85rem, 3.2vw, .92rem);
    line-height: 1.7;
}

/* Dar ekranda metin kenara yapismasin; 1024px ustunde site genelindeki
   kenar boslugunun aynisina doner, boylece bolumler hizali kalir. */
.sitefoot .wrap { padding-inline: clamp(2rem, 8vw, 3rem); }

.sitefoot__grid {
    display: grid;
    gap: clamp(2rem, 7vw, 3rem);
    padding-top: clamp(2.75rem, 9vw, 4rem);
}

.sitefoot__name {
    display: block;
    font-family: var(--serif);
    font-size: clamp(1.15rem, 4.5vw, 1.45rem);
    letter-spacing: .18em;
    line-height: 1;
    color: #f6f1e6;
}

.sitefoot__tagline {
    display: block;
    margin-top: .55rem;
    font-size: clamp(.52rem, 2.2vw, .62rem);
    letter-spacing: .34em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--gold-line);
}

.sitefoot__note {
    max-width: 24rem;
    margin: clamp(1rem, 4vw, 1.4rem) 0 0;
}

/* --- Orta sutun: baglantilar -------------------------------------------- */

.sitefoot__list {
    display: grid;
    align-content: start;
    gap: .55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sitefoot__link {
    color: inherit;
    text-decoration: none;
    transition: color .18s ease;
}

.sitefoot__link:hover { color: #f6f1e6; }

/* --- Sag sutun: iletisim -------------------------------------------------- */

.sitefoot__contact {
    display: grid;
    align-content: start;
    gap: .55rem;
    font-style: normal;   /* address etiketi varsayilan olarak egik yazar */
    justify-items: start;
}

.sitefoot__row { display: block; }

.sitefoot__insta {
    color: var(--gold-line);
    text-decoration: none;
    transition: color .18s ease;
}

.sitefoot__insta:hover { color: #dcc38a; }

/* --- Alt serit ------------------------------------------------------------ */

/* Mobilde metinler solda, gelistirici logosu onlarin saginda dikeyde ortali. */
.sitefoot__bottom {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .5rem clamp(1rem, 4vw, 1.75rem);
    margin-top: clamp(2.25rem, 8vw, 3.25rem);
    padding-block: clamp(1.5rem, 5vw, 2rem);
    border-top: 1px solid rgba(246, 241, 230, .13);
    font-size: clamp(.78rem, 3vw, .84rem);
    color: rgba(246, 241, 230, .5);
}

/* Telif ve satis notu tek blok: boylece logo ikisinin birden yaninda durur */
.sitefoot__legal {
    display: grid;
    gap: .5rem;
}

.sitefoot__bottom p { margin: 0; }

/* Logo beyaz + sari; koyu zeminde bagirmasin diye hafif kisiliyor.
   Olcu yukseklikten degil GENISLIKTEN verilmeli: width:auto birakilirsa
   grid'in "auto" sutunu SVG'nin intrinsik 296px genisligine gore hesaplanir,
   sutun sisip logoyu ekran disina iter ve mobilde gorunmez olur. */
.sitefoot__by {
    display: block;
    width: clamp(8.75rem, 16vw, 10.5rem);
    height: auto;
    opacity: .8;
}

/* --- Genis ekran ----------------------------------------------------------- */

@media (min-width: 64em) {
    .sitefoot__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(2rem, 4vw, 4rem);
    }

    /* Sutunlar esit olsa da yan sutunlarin metin genislikleri farkli oldugu
       icin menu sola yakin duruyordu. Blogu kendi sutununda ortalayinca
       sayfanin tam ortasina oturur ve iki yandaki bosluk dengelenir. */
    .sitefoot__nav {
        display: flex;
        justify-content: center;
    }

    /* Masaustunde tek satir: telif solda, logo ortada, satis notu sagda.
       .sitefoot__legal "contents" olunca iki <p> dogrudan bu grid'e katilir.
       Yan sutunlar esit (1fr) oldugundan logo sayfanin tam ortasinda kalir. */
    .sitefoot__bottom {
        grid-template-columns: 1fr auto 1fr;
        font-size: 1.05rem; /* mobil ust siniri .84rem'in 1.25 kati */
    }

    .sitefoot__legal { display: contents; }

    .sitefoot__legal p:first-child { grid-area: 1 / 1; }
    .sitefoot__legal p:last-child  { grid-area: 1 / 3; text-align: right; }

    .sitefoot__by {
        grid-area: 1 / 2;
        width: clamp(11rem, 14vw, 13rem);
    }
}

/* ==========================================================================
   Koleksiyon sayfasi
   Mobilde 2'li, tablette 3'lu, masaustunde 4'lu izgara.
   ========================================================================== */

.collection__head {
    padding-block: clamp(2.5rem, 8vw, 4.5rem) 0;
}

.collection__title {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(2.1rem, 7.5vw, 3.6rem);
    line-height: 1.1;
}

.collection__intro {
    max-width: 38rem;
    margin: clamp(.9rem, 3vw, 1.2rem) 0 0;
    font-size: clamp(.9rem, 3.3vw, .97rem);
    line-height: 1.7;
    color: var(--ink-soft);
}

/* --- Filtreler ------------------------------------------------------------- */

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: clamp(1.75rem, 6vw, 2.5rem);
}

.filters__chip {
    display: inline-flex;
    align-items: center;
    /* Dokunma hedefi rahat olsun */
    min-height: 2.75rem;
    padding: .6rem 1.15rem;
    border: 1px solid var(--rule);
    font-size: clamp(.68rem, 2.6vw, .73rem);
    font-weight: 500;
    letter-spacing: .16em;
    /* letter-spacing son harften sonra da bosluk birakir */
    text-indent: .16em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.filters__chip:hover {
    border-color: var(--ink-faint);
}

.filters__chip[aria-current="page"] {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--cream);
}

/* --- Urun izgarasi --------------------------------------------------------- */

.collection__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 4vw, 1.75rem) clamp(.85rem, 3vw, 1.5rem);
    margin: clamp(2rem, 7vw, 3rem) 0 clamp(3rem, 10vw, 5rem);
    padding: 0;
    list-style: none;
}

.collection__empty {
    margin: clamp(2.5rem, 8vw, 4rem) 0 clamp(4rem, 12vw, 6rem);
    font-size: 1rem;
    color: var(--ink-soft);
}

@media (min-width: 48em) {
    .collection__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 64em) {
    .collection__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Hazir olmayan kategoriler: menude baslik olarak durur, baglanti yok ---- */

.mainnav__link--pasif,
.drawer__link--pasif,
.sitefoot__link--pasif {
    cursor: default;
}

.mainnav__link--pasif { color: var(--ink-faint); }

.drawer__link--pasif { color: rgba(244, 240, 230, .38); }

/* Zemin siyaha dondugu icin .38 saydamlik okunamayacak kadar sondu.
   .5 hem okunur (4.8:1) hem aktif baglantilardan (9.4:1) belirgin soluk. */
.sitefoot__link--pasif { color: rgba(246, 241, 230, .5); }