/* ==========================================================================
   As Kapı Sistemleri
   Tema: koyu kömür zemin, graphite yüzeyler, bronz aksan.
   Aksan rengi logodaki bronz tondan (#AD8D63) alındı.
   ========================================================================== */

:root {
    /* Yüzeyler */
    --zemin:       #151111;   /* sayfa zemini */
    --yuzey:       #221d1c;   /* kart, şerit, alt bilgi */
    --yuzey-2:     #2b2523;   /* girintili alan, form alanı */

    /* Metin */
    --metin:       #f5f5f5;
    --metin-orta:  #b8b3b1;
    --metin-soluk: #8d8785;

    /* Aksan */
    --bronz:       #ad8d63;
    --bronz-acik:  #c6a67d;
    --bronz-koyu:  #8d7150;

    /* Çizgiler */
    --kenar:       rgb(255 255 255 / 11%);
    --kenar-ince:  rgb(255 255 255 / 6%);
    --kenar-bronz: rgb(173 141 99 / 28%);

    --uyari:       #e0674f;

    /* Tipografi */
    --f-govde:  "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --f-baslik: "Outfit", ui-sans-serif, system-ui, sans-serif;

    /* Ölçek */
    --k1: .25rem; --k2: .5rem;  --k3: .75rem; --k4: 1rem;
    --k5: 1.5rem; --k6: 2rem;   --k7: 3rem;   --k8: 4rem;
    --k9: 6rem;   --k10: 8rem;

    --r:    .625rem;
    --r-sm: .375rem;
    --en:   min(1280px, 100% - 3rem);
    --gecis: 300ms cubic-bezier(.4, 0, .2, 1);
}

/* --- Sıfırlama ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--zemin);
    color: var(--metin);
    font-family: var(--f-govde);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 var(--k4); }

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--f-baslik);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
}

:focus-visible { outline: 2px solid var(--bronz); outline-offset: 3px; }
::selection { background: rgb(173 141 99 / 30%); color: #fff; }

/* --- Tipografi rolleri ----------------------------------------------- */
/* Türkçe büyük harflerde İ'nin noktası ve Ş/Ç kuyrukları satır kutusunu
   aşıyor; bu yüzden satır yüksekliği örnek tasarımdaki 0.9'dan biraz açık. */
.b-dev {
    font-family: var(--f-baslik);
    font-size: clamp(2.75rem, 7.5vw, 6rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.045em;
    text-transform: uppercase;
}

.b-buyuk {
    font-family: var(--f-baslik);
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.03em;
}

.b-orta {
    font-family: var(--f-baslik);
    font-size: clamp(1.5rem, 2.4vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -.02em;
}

.b-kucuk {
    font-family: var(--f-baslik);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

/* Başlık içindeki bronz satır */
.vurgu { color: var(--bronz); }

/* Bölüm üstündeki küçük etiket */
.eyebrow {
    display: block;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--bronz);
}

.ust-etiket {
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--metin-soluk);
}

/* Yuvarlak köşeli rozet */
.rozet {
    display: inline-block;
    padding: .35rem .85rem;
    border: 1px solid var(--kenar-bronz);
    border-radius: 999px;
    background: rgb(173 141 99 / 10%);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--bronz);
}

.alinti {
    font-size: 1.0625rem;
    font-weight: 300;
    font-style: italic;
    line-height: 1.7;
    color: var(--metin-orta);
}

.giris-metni {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--metin-orta);
    max-width: 62ch;
}

.solgun { color: var(--metin-soluk); }

/* --- Yerleşim -------------------------------------------------------- */
.kap { width: var(--en); margin-inline: auto; }

.bolum { padding-block: clamp(var(--k8), 7vw, var(--k9)); }
.bolum--dar { padding-block: clamp(var(--k7), 5vw, var(--k8)); }
.bolum--yuzey { background: var(--yuzey); }

/* Bölüm başlığı: solda eyebrow + başlık, sağda bağlantı */
.bolum-basi {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--k4);
    margin-bottom: var(--k8);
}
.bolum-basi__ana { max-width: 46rem; }
.bolum-basi .eyebrow { margin-bottom: var(--k3); }

/* --- Düğmeler -------------------------------------------------------- */
.dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1rem 2rem;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: var(--metin);
    color: var(--zemin);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--gecis), color var(--gecis), border-color var(--gecis);
}
.dugme:hover { background: var(--bronz); color: var(--zemin); }

/* Bronz çerçeveli, içi boş düğme */
.dugme--cizgi {
    background: transparent;
    border-color: var(--bronz);
    color: var(--bronz);
}
.dugme--cizgi:hover { background: var(--bronz); color: var(--zemin); }

.dugme--dolu {
    background: var(--bronz);
    color: var(--zemin);
}
.dugme--dolu:hover { background: var(--bronz-acik); }

.dugme--kucuk { padding: .6rem 1.15rem; font-size: .6875rem; }

/* Küçük telefonlarda uzun etiketli düğmeler (örn. "Teknik bilgi ve
   standartlar") tek satıra sığmayıp kutularını sağa taşırıyordu. */
@media (max-width: 400px) {
    .dugme { white-space: normal; text-align: center; padding-inline: var(--k5); }
}

/* Altı bronz çizgili metin bağlantısı */
.baglanti {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding-bottom: .25rem;
    border-bottom: 1px solid var(--bronz);
    color: var(--bronz);
    font-size: .875rem;
    text-decoration: none;
    transition: opacity var(--gecis);
}
.baglanti:hover { opacity: .75; }
.baglanti__ok { transition: transform var(--gecis); }
.baglanti:hover .baglanti__ok { transform: translateX(3px); }

/* ==========================================================================
   Üst bar
   ========================================================================== */
.ust {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--kenar);
    background: rgb(21 17 17 / 82%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.ust__ic {
    width: var(--en);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--k4);
    min-height: 84px;
}

.marka { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
/* Yatay logo geniş olduğu için dar ekranda alçalır; aksi hâlde menü
   düğmesi sağ kenardan taşıyor. */
.marka img { height: 29px; width: auto; }
@media (min-width: 420px) { .marka img { height: 34px; } }
@media (min-width: 640px) { .marka img { height: 44px; } }

.gezinti { display: none; }
@media (min-width: 1040px) {
    .gezinti { display: flex; align-items: center; gap: var(--k6); }
}

.gezinti__baglanti {
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--metin);
    opacity: .72;
    transition: color var(--gecis), opacity var(--gecis);
}
.gezinti__baglanti:hover { color: var(--bronz); opacity: 1; }
.gezinti__baglanti[aria-current="page"] { color: var(--bronz); opacity: 1; }

.ust__sag { display: flex; align-items: center; gap: var(--k3); }
/* 400px altında logo + teklif düğmesi + menü düğmesi yan yana sığmıyor ve
   üst bar sağa taşıyordu. Düğme mobil menünün içine taşındı. */
@media (max-width: 400px) { .ust__sag .dugme { display: none; } }

.ust__tel {
    display: none;
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-decoration: none;
    color: var(--metin-orta);
    white-space: nowrap;
}
@media (min-width: 1280px) { .ust__tel { display: block; } }
.ust__tel:hover { color: var(--bronz); }

.menu-dugme {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    border: 1px solid var(--kenar);
    border-radius: var(--r-sm);
    background: transparent;
    cursor: pointer;
}
@media (min-width: 1040px) { .menu-dugme { display: none; } }

.menu-dugme span {
    display: block;
    height: 1.5px;
    background: var(--metin);
    transition: transform var(--gecis), opacity var(--gecis);
}
.menu-dugme[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-dugme[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-dugme[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobil-menu {
    display: none;
    border-top: 1px solid var(--kenar);
    background: var(--yuzey);
}
.mobil-menu[data-acik="1"] { display: block; }
@media (min-width: 1040px) { .mobil-menu { display: none !important; } }

.mobil-menu__liste { width: var(--en); margin-inline: auto; padding-block: var(--k4) var(--k6); }

.mobil-menu__baglanti {
    display: block;
    padding-block: var(--k3);
    border-bottom: 1px solid var(--kenar-ince);
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
}
.mobil-menu__baglanti:hover { color: var(--bronz); }
.mobil-menu__baglanti--vurgu { border-bottom: 0; color: var(--bronz); font-weight: 700; }

/* ==========================================================================
   Açılış
   ========================================================================== */
.acilis {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: clamp(540px, 76vh, 840px);
    padding-block: clamp(var(--k7), 6vw, var(--k9));
}

/* Açılış görseli: sağ yarıda, bütün hâlde durur. */
.acilis__foto {
    position: absolute;
    inset-block: 0;
    right: 0;
    width: 48%;
    z-index: 0;
    display: grid;
    place-items: center;
    padding: var(--k6) clamp(var(--k4), 4vw, var(--k8)) var(--k6) 0;
    pointer-events: none;
}
/* Kapının arkasındaki yumuşak ışık, onu koyu zeminden ayırır. */
.acilis__foto::before {
    content: "";
    position: absolute;
    inset: 8% 0;
    background: radial-gradient(closest-side, rgb(173 141 99 / 16%), transparent 70%);
}
.acilis__foto img {
    position: relative;
    max-height: 100%;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 34px 46px rgb(0 0 0 / 62%));
}

/* Fotoğrafın üstünden geçen ince bronz ışık, metin tarafını da bağlar. */
.acilis::after {
    content: "";
    position: absolute;
    inset-block: 0;
    right: 0;
    width: 45%;
    z-index: 0;
    background: linear-gradient(to left, rgb(173 141 99 / 9%), transparent);
    pointer-events: none;
}

.acilis__ic {
    position: relative;
    z-index: 1;
    width: var(--en);
    margin-inline: auto;
}
@media (min-width: 960px) {
    /* Metin sol yarıda kalır, fotoğrafın maskeli kısmına taşmaz. */
    .acilis__metin { max-width: 34rem; }
}

/* Dar ekranda görsel metnin arkasına geçer ve soluklaşır. */
@media (max-width: 959px) {
    .acilis { min-height: clamp(520px, 76vh, 700px); }
    .acilis__foto {
        width: 100%;
        opacity: .26;
        padding: var(--k7) var(--k5);
    }
    .acilis::after { width: 100%; }
}

.acilis__metin { display: grid; gap: var(--k5); justify-items: start; }

/* Yan yana duran düğme grubu — açılışta ve iç sayfalarda ortak. */
.acilis__eylem,
.eylem-satiri { display: flex; flex-wrap: wrap; gap: var(--k3); }

/* Dar ekranda yan yana sığmayan düğmeler eşit genişlikte alt alta gelir. */
@media (max-width: 560px) {
    .acilis__eylem,
    .eylem-satiri { width: 100%; }
    .acilis__eylem .dugme,
    .eylem-satiri .dugme { flex: 1 1 100%; }
}

/* ==========================================================================
   Kategori kutuları — açılışın hemen altındaki hızlı erişim şeridi
   ========================================================================== */
/* Dar ekranda açılışın hemen altında kategori listesi göstermiyoruz;
   aynı seriler zaten aşağıdaki bölümde yer alıyor. */
.kategori-serit { display: none; }

@media (min-width: 900px) {
    .kategori-serit {
        display: block;
        border-block: 1px solid var(--kenar-ince);
        background: var(--yuzey);
        padding-block: var(--k6);
    }
}

.kategori-liste {
    display: grid;
    gap: var(--k4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.kategori-kutu {
    display: flex;
    flex-direction: column;
    gap: var(--k2);
    padding: var(--k5);
    border: 1px solid var(--kenar);
    border-radius: var(--r);
    background: var(--zemin);
    text-decoration: none;
    transition: border-color var(--gecis), transform var(--gecis);
}
.kategori-kutu:hover {
    border-color: var(--bronz);
    transform: translateY(-3px);
}

.kategori-kutu__ad { margin: 0; }

.kategori-kutu__alt {
    margin-top: auto;
    padding-top: var(--k3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--k3);
    font-size: .8125rem;
    color: var(--metin-soluk);
}
.kategori-kutu:hover .kategori-kutu__alt { color: var(--bronz); }
.kategori-kutu:hover .baglanti__ok { transform: translateX(3px); }

/* ==========================================================================
   Kart ızgaraları
   ========================================================================== */
/* Üç sütun: seriler ve öne çıkanlar altışar olduğu için satırlar tam dolar. */
.kart-liste {
    display: grid;
    gap: var(--k6);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}

/* Uzun katalog listeleri için daha sık ızgara. */
.kart-liste--sik {
    gap: var(--k5);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}

/* Ekran dışındaki kartlar çizilmez; elli kartlık katalogda kaydırma
   akıcılığını belirgin biçimde artırıyor. Yer tutucu yükseklik verildiği
   için kaydırma çubuğu sıçramaz. */
.kart-liste--sik > .kart {
    content-visibility: auto;
    contain-intrinsic-size: auto 420px;
}

/* Kartlar ızgarada eşit yükseklikte durur; alt satır hep aynı hizada biter. */
.kart {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
}

/* Kapı görselleri dar ve dikey; kırpma kanadın bir kısmını yiyordu.
   Bu yüzden hepsi kutuya sığdırılarak (contain) gösteriliyor. */
.kart__gorsel {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--r);
    background: var(--yuzey);
    margin-bottom: var(--k4);
}
/* Görsel mutlak konumda: aspect-ratio ile gelen yükseklik yüzde olarak
   çözümlenmediği için object-fit devreye girmiyor, kapılar kırpılıyordu.
   inset ile kesin bir kutu verilince her oranda doğru sığıyor. */
/* width/height açıkça verilmeli: img yerine geçen bir eleman olduğu için
   `auto` bırakılırsa inset'ten değil kendi doğal boyutundan ölçülüyor ve
   küçük görseller kutuya ortalanmadan üstte kalıyordu. Nefes payını
   padding veriyor; object-fit padding'in içindeki alana göre çalışır. */
.kart__gorsel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: var(--k3);
    object-fit: contain;
    transition: transform 700ms cubic-bezier(.4, 0, .2, 1);
}
/* Saydam perspektif görsellere biraz daha nefes payı. */
.kart__gorsel--sigdir img { padding: var(--k5); }
.kart:hover .kart__gorsel img { transform: scale(1.04); }

.kart__yok {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: var(--k4);
    text-align: center;
    font-size: .6875rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--metin-soluk);
}

.kart__rozet {
    position: absolute;
    top: var(--k3);
    left: var(--k3);
    padding: .25rem .6rem;
    border-radius: var(--r-sm);
    background: rgb(21 17 17 / 78%);
    backdrop-filter: blur(6px);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--bronz);
}

.kart__ad { margin-bottom: .35rem; }

.kart__alt {
    margin-top: auto;
    padding-top: var(--k2);
    font-size: .6875rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--metin-soluk);
    /* Kullanım listesi uzun olabiliyor: tek satırda kalır, taşan kısım kırpılır. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Yangın grubunun kod rozeti ayrı renkte */
.kart--sinyal .kart__rozet { color: var(--uyari); }

/* Seri kartı: görselin altında özet ve kullanım bilgisi */
.seri-kart__ozet {
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--metin-orta);
    margin-bottom: var(--k3);
}

/* --- Süzgeç ---------------------------------------------------------- */
.suzgec { display: flex; flex-wrap: wrap; gap: var(--k2); margin-bottom: var(--k7); }

.suzgec__oge {
    padding: .55rem 1.05rem;
    border: 1px solid var(--kenar);
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--metin-orta);
    transition: border-color var(--gecis), color var(--gecis), background var(--gecis);
}
.suzgec__oge:hover { border-color: var(--bronz); color: var(--bronz); }
.suzgec__oge[aria-current="true"] {
    background: var(--bronz);
    border-color: var(--bronz);
    color: var(--zemin);
    font-weight: 700;
}
.suzgec__adet { opacity: .6; margin-left: .3rem; }

/* ==========================================================================
   Ürün detayı
   ========================================================================== */
.detay { display: grid; gap: var(--k7); align-items: start; }
@media (min-width: 940px) { .detay { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--k8); } }

/* Sahne kutu kadar yer kaplar ki çerçeve tam onu sarsın. */
.detay__sahne {
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
}
/* Çerçeve kutuyu her yönden eşit sarar. Örnek tasarımdaki kaydırılmış
   çerçeve, kutunun bir kenardan taşıyor izlenimi veriyordu. */
.detay__sahne::before {
    content: "";
    position: absolute;
    inset: -1.15rem;
    border: 1px solid var(--kenar-bronz);
    border-radius: calc(var(--r) + .4rem);
    pointer-events: none;
}
/* Yükseklik sabit, genişlik ürünün kendi oranından gelir: görsel kutuya
   tam oturur, yanlarda geniş boşluk kalmaz. Oran urun.php'den geliyor. */
.detay__cerceve {
    position: relative;
    height: min(70vh, 660px);
    aspect-ratio: var(--oran, .75);
    width: auto;
    max-width: 100%;
    overflow: hidden;
    border-radius: var(--r);
    background: var(--yuzey);
    box-shadow: 0 30px 60px rgb(0 0 0 / 45%);
}
/* Dört kenardan inset verildiği için kutu kesin; object-fit görseli bu
   kutunun tam ortasına yerleştirir. width/height/margin karışımı
   görselin hafifçe yana kaymasına yol açıyordu. */
.detay__cerceve img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: clamp(var(--k4), 3vw, var(--k6));
    object-fit: contain;
}

.detay__basi { padding-bottom: var(--k5); margin-bottom: var(--k5); border-bottom: 1px solid var(--kenar); }

.veri { display: grid; margin-block: var(--k6); border-top: 1px solid var(--kenar); }
.veri__satir {
    display: grid;
    grid-template-columns: 1fr;
    gap: .2rem;
    padding-block: var(--k3);
    border-bottom: 1px solid var(--kenar-ince);
}
@media (min-width: 560px) {
    .veri__satir { grid-template-columns: 11rem 1fr; gap: var(--k4); align-items: baseline; }
}
.veri__etiket {
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--metin-soluk);
}
.veri__deger { font-size: .9375rem; color: var(--metin); }

/* Küçük görsel şeridi */
.serit { display: grid; gap: var(--k4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }

/* ==========================================================================
   Süreç adımları
   ========================================================================== */
.surec { display: grid; gap: var(--k5); }
@media (min-width: 700px)  { .surec { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .surec { grid-template-columns: repeat(4, 1fr); } }

.surec__adim {
    padding: var(--k5);
    border: 1px solid var(--kenar-ince);
    border-radius: var(--r);
    background: var(--yuzey);
    display: flex;
    flex-direction: column;
    gap: var(--k3);
}
.bolum--yuzey .surec__adim { background: var(--zemin); }

.surec__no {
    font-family: var(--f-baslik);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    color: var(--bronz);
}
.surec__metin { font-size: .9375rem; line-height: 1.6; color: var(--metin-orta); margin: 0; }

/* ==========================================================================
   Metin blokları
   ========================================================================== */
.yazi { max-width: 68ch; }
.yazi h3 { font-size: 1.3rem; margin-block: var(--k6) var(--k3); }
.yazi h3:first-child { margin-top: 0; }
.yazi p { color: var(--metin-orta); }
.yazi a { color: var(--bronz); text-underline-offset: 3px; }
.yazi ul { display: grid; gap: var(--k3); margin-block: var(--k4); }
.yazi li { position: relative; padding-left: var(--k5); color: var(--metin-orta); }
.yazi li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .78em;
    width: 12px;
    height: 1px;
    background: var(--bronz);
}
.yazi strong { color: var(--metin); font-weight: 600; }

.ikili { display: grid; gap: var(--k5); align-items: start; }
.ikili > * { min-width: 0; }
@media (min-width: 900px) { .ikili { grid-template-columns: 14rem 1fr; gap: var(--k8); } }

/* Standart kartları */
/* Altı standart üç sütunda iki tam satır oluşturur. */
.standart { display: grid; gap: var(--k4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.standart__oge {
    padding: var(--k5);
    border: 1px solid var(--kenar-ince);
    border-left: 3px solid var(--bronz);
    border-radius: var(--r);
    background: var(--yuzey);
}
.bolum--yuzey .standart__oge { background: var(--zemin); }

/* Standardın konusunu anlatan temsilî simge */
.standart__simge {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: var(--k4);
    border: 1px solid var(--kenar-bronz);
    border-radius: var(--r-sm);
    background: rgb(173 141 99 / 10%);
    color: var(--bronz);
}
.standart__ikon { display: block; }

.standart__kod {
    display: block;
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--bronz);
    margin-bottom: .25rem;
}
.standart__ad { display: block; font-weight: 600; margin-bottom: .5rem; }
.standart__metin { font-size: .875rem; line-height: 1.6; color: var(--metin-soluk); margin: 0; }

.standart__uyari {
    margin: var(--k4) 0 0;
    font-size: .8125rem;
    color: var(--metin-soluk);
}

/* --- Sık sorulanlar --------------------------------------------------- */
.sss { display: grid; gap: var(--k3); max-width: 60rem; }

.sss__oge {
    border: 1px solid var(--kenar-ince);
    border-radius: var(--r);
    background: var(--yuzey);
    padding: var(--k4) var(--k5);
    transition: border-color var(--gecis);
}
.bolum--yuzey .sss__oge { background: var(--zemin); }
.sss__oge[open] { border-color: var(--kenar-bronz); }

.sss__soru {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--k4);
    cursor: pointer;
    list-style: none;
    font-family: var(--f-baslik);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
}
.sss__soru::-webkit-details-marker { display: none; }
.sss__soru::after {
    content: "+";
    flex-shrink: 0;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--bronz);
    transition: transform var(--gecis);
}
.sss__oge[open] .sss__soru::after { content: "−"; }
.sss__soru:hover { color: var(--bronz); }

.sss__cevap {
    margin: var(--k3) 0 0;
    padding-right: var(--k6);
    font-size: .9375rem;
    line-height: 1.7;
    color: var(--metin-orta);
}

/* Bilgi kutusu */
.not {
    padding: var(--k5);
    border: 1px solid var(--kenar-ince);
    border-left: 4px solid var(--bronz);
    border-radius: var(--r);
    background: var(--yuzey);
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--metin-orta);
}
.bolum--yuzey .not { background: var(--zemin); }
.not p { margin: 0; }
.not a { color: var(--bronz); }
.not strong { color: var(--metin); }

/* ==========================================================================
   Teklif bölümü ve form
   ========================================================================== */
.teklif-kutu {
    position: relative;
    overflow: hidden;
    border-radius: var(--r);
    background: var(--yuzey);
    padding: clamp(var(--k6), 5vw, var(--k9));
}
/* Sağ üstteki dönük kare */
.teklif-kutu::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 16rem;
    height: 16rem;
    transform: translate(50%, -50%) rotate(45deg);
    border: 2px solid var(--kenar-ince);
    pointer-events: none;
}

.teklif-kutu__ic {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--k7);
    align-items: center;
}
/* Izgara öğesinin varsayılan min-width'i "auto"dur: içindeki en dar hâle
   sığmayan bir öğe (gönder düğmesi) sütunu genişletip form kutusunu
   kutunun dışına taşırıyordu. Sıfırlanınca öğe sütuna uyar. */
.teklif-kutu__ic > * { min-width: 0; }
@media (min-width: 1000px) { .teklif-kutu__ic { grid-template-columns: 1fr 1fr; } }

.form-kutu {
    min-width: 0;
    border-left: 8px solid var(--bronz);
    border-radius: var(--r-sm);
    background: var(--zemin);
    padding: clamp(var(--k5), 3vw, var(--k7));
}

.form { display: grid; gap: var(--k5); min-width: 0; }
@media (min-width: 700px) { .form--ikili { grid-template-columns: repeat(2, 1fr); } }

.form > *, .form--ikili > * { min-width: 0; }

.alan { display: grid; gap: .5rem; min-width: 0; }
.alan--tam { grid-column: 1 / -1; }

.alan__etiket {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--metin-orta);
}
.alan__zorunlu { color: var(--bronz); }

/* Alt çizgili alanlar — örnek tasarımdaki gibi */
.alan input,
.alan select,
.alan textarea {
    width: 100%;
    padding: .7rem 0;
    border: 0;
    border-bottom: 1px solid var(--kenar);
    background: transparent;
    color: var(--metin);
    font-size: 1rem;
    border-radius: 0;
    transition: border-color var(--gecis);
}
.alan select {
    padding-right: 1.5rem;
    /* Koyu zeminde açılır listenin kendi rengi okunur kalsın */
    color-scheme: dark;
}
.alan textarea { resize: vertical; min-height: 120px; }
.alan input::placeholder, .alan textarea::placeholder { color: var(--metin-soluk); }

.alan input:focus,
.alan select:focus,
.alan textarea:focus { outline: none; border-bottom-color: var(--bronz); }

.alan--hatali input,
.alan--hatali select,
.alan--hatali textarea { border-bottom-color: var(--uyari); }
.alan__hata { font-size: .8125rem; color: var(--uyari); }

/* Uzun etiketli gönder düğmesi dar ekranda tek satıra sığmıyor; kutuyu
   taşırmak yerine satır atlasın. */
.form .dugme[type="submit"] {
    width: 100%;
    white-space: normal;
    text-align: center;
    padding-inline: var(--k4);
}

/* Form altındaki küçük not. Kart alt satırından farklı olarak cümledir:
   kırpılmaz, dar ekranda alt satıra iner. */
.form__not {
    margin: 0;
    font-size: .6875rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    line-height: 1.7;
    color: var(--metin-soluk);
}
.form__not a { color: var(--bronz); }

/* Bal küpü */
.tuzak {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.uyari-kutu {
    padding: var(--k4);
    border: 1px solid;
    border-radius: var(--r-sm);
    margin-bottom: var(--k5);
    font-size: .9375rem;
}
.uyari-kutu--olumlu  { border-color: rgb(122 168 128 / 45%); background: rgb(122 168 128 / 12%); color: #a8cfae; }
.uyari-kutu--olumsuz { border-color: rgb(224 103 79 / 45%); background: rgb(224 103 79 / 12%); color: #f0a493; }

/* İletişim kartları */
.iletisim-liste { display: grid; gap: var(--k4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.iletisim__oge {
    padding: var(--k5);
    border: 1px solid var(--kenar-ince);
    border-radius: var(--r);
    background: var(--yuzey);
    display: grid;
    gap: .4rem;
    align-content: start;
}
.bolum--yuzey .iletisim__oge { background: var(--zemin); }
.iletisim__deger {
    font-family: var(--f-baslik);
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.4;
}
a.iletisim__deger:hover { color: var(--bronz); }

/* ==========================================================================
   Alt bilgi
   ========================================================================== */
.alt {
    border-top: 1px solid var(--kenar);
    background: var(--yuzey);
    padding-block: var(--k9) var(--k6);
}

.alt__ust {
    display: grid;
    gap: var(--k7);
    margin-bottom: var(--k9);
}
@media (min-width: 900px) { .alt__ust { grid-template-columns: 2fr 1fr 1fr; } }

.alt__marka img { height: 46px; width: auto; margin-bottom: var(--k5); }
.alt__ozet { font-size: .9375rem; font-weight: 300; line-height: 1.75; color: var(--metin-orta); max-width: 40ch; }

.alt__baslik {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bronz);
    margin-bottom: var(--k5);
}

.alt__liste { display: grid; gap: var(--k3); }
.alt__liste a { font-size: .9375rem; color: var(--metin-orta); text-decoration: none; transition: color var(--gecis); }
.alt__liste a:hover { color: var(--bronz); }
.alt__liste li { font-size: .9375rem; color: var(--metin-orta); }

/* Alt bilgideki standart şeridi */
.alt__standart {
    padding-block: var(--k6);
    border-top: 1px solid var(--kenar-ince);
}

.alt__standart-basi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--k3);
    margin-bottom: var(--k5);
}

.alt__standart-liste {
    display: grid;
    gap: var(--k3);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.alt__standart-oge {
    display: flex;
    align-items: center;
    gap: var(--k3);
    padding: var(--k3);
    border: 1px solid var(--kenar-ince);
    border-radius: var(--r-sm);
    background: var(--zemin);
    color: var(--bronz);
}
.alt__standart-oge span { display: grid; gap: .1rem; min-width: 0; }
.alt__standart-oge strong {
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--bronz);
}
.alt__standart-oge em {
    font-style: normal;
    font-size: .6875rem;
    line-height: 1.35;
    color: var(--metin-soluk);
}

.alt__standart-not {
    margin: var(--k4) 0 0;
    font-size: .75rem;
    color: var(--metin-soluk);
}

.alt__son {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--k3);
    padding-top: var(--k5);
    border-top: 1px solid var(--kenar-ince);
    font-size: .625rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--metin-soluk);
}

/* ==========================================================================
   Hareket ve erişilebilirlik
   ========================================================================== */
.js [data-goster] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.4, 0, .2, 1);
}
.js [data-goster].gorunur { opacity: 1; transform: none; }

.atla {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: var(--k3) var(--k4);
    background: var(--bronz);
    color: var(--zemin);
    font-size: .8125rem;
    font-weight: 600;
    text-decoration: none;
}
.atla:focus { left: var(--k4); top: var(--k4); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
    .js [data-goster] { opacity: 1; transform: none; }
}

@media print {
    .ust, .alt, .menu-dugme { display: none; }
    body { background: #fff; color: #000; }
}