/* ===================== RESET ===================== */
/* Kutu modeli ve boşlukları normalize eder */
*,
*::before,
*::after {
    margin: 0; /* dış boşluk */
    padding: 0; /* iç boşluk  */
    box-sizing: border-box; /* stabil width/height */
}

html {
    scroll-behavior: smooth;
}


/* ===================== KONTROL PANELİ ===================== */
/* Tüm kritik görsel/konumsal ayarlar – TEK NOKTA */
:root {
    /* --- Tema --- */
    --bg: #0E476D; /* sayfa/hero arka planı   */
    --glass: rgba(255,255,255,.10); /* cam üst tonu             */
    --line: rgba(255,255,255,.25); /* ince çizgi rengi         */
    --ink: #0B3E55; /* kâğıt üzeri yazı/ok rengi*/
    /* --- Sol açılır paneller --- */
    --toggle-width: clamp(260px,25vw,320px);
    --toggle-height: 64px;
    /* --- Sağdaki kâğıt ve etiket grubu --- */
    --paper-angle: -33deg; /* etiket eğimi */
    --label-top: 15%; /* etiket Y konumu */
    --label-right: 41%; /* etiket sağ boşluğu */
    /* --- Etiket (pill) ölçüleri --- */
    --pill-gap: 20px;
    --pill-font: clamp(14px,1.6vw,18px);
    --pill-py: 20px;
    --pill-px: 60px;
    --chip-slant: 10%;
    /* --- Kâğıt üzeri başlık --- */
    --title-font: clamp(24px,2.8vw,34px);
    --title-align: center; /* start | center | end */
    --title-shift-x: 20px; /* + sağa / – sola      */
    --title-shift-y: 0px; /* + aşağı / – yukarı   */
    --title-offset: 0px; /* ekstra iç boşluk     */
    /* --- El yazısı ok (aktif satır) --- */
    --handW: 34px; /* ok genişliği   */
    --handH: 18px; /* ok yüksekliği  */
    --handLeft: 14px; /* ok soldan      */
    --handGap: 10px; /* ok ↔ yazı boşluk */
    --handTilt: -1deg; /* ok eğimi       */
    /* === OFFER (teklif) kısayolları === */
    --offer-bg: #FEFEFF;
    --offer-wrap-max: 1200px;
    --offer-wrap-gap: clamp(28px,3.2vw,40px); /* Sol–sağ aralık */
    --offer-col-left: .9fr; /* İstersen 1fr 1fr yapabilirsin */
    --offer-col-right: 1.1fr;
    --offer-form-max: 980px;
    --aside-sticky-top: calc(70px + 16px);
    --aside-margin-top: 32px; /* artık kullanılmıyor ama referans için bırakıldı */
    --aside-shift-x: 0px;
    --aside-font: clamp(13px,.9vw,15px);
    --aside-h3: clamp(16px,1.2vw,18px);
    --aside-h4: clamp(14px,1.05vw,16px);
    --aside-li-gap: 6px;
    --aside-line: 1.45;
}

/* ===================== SAYFA / HEADER ===================== */
body {
    font-family: 'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    color: #111;
    overflow-x: hidden;
}

.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    height: 70px;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    z-index: 1000;
}

/* Ortak container (header içinde de kullanılıyor) */
.container {
    width: 100%;
    max-width: 1600px;
    margin-inline: auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Header: logo & menu */
.logo img {
    height: 70px;
    width: auto;
    transition: transform .3s;
}

    .logo img:hover {
        transform: scale(1.05);
    }

.menu a {
    text-decoration: none;
    color: #fff;
    margin-left: 24px;
    font-weight: 500;
    transition: color .2s;
}

    .menu a:hover {
        color: #0E476D;
    }

.logo:link,
.logo:visited,
.logo:hover,
.logo:active {
    color: #fff;
}

/* ===================== HERO ===================== */
.hero {
    position: relative;
    color: #fff;
    background: linear-gradient(to bottom in oklab, #0E476D 0%, #0E476D00 100%);
}

.hero-image {
    display: block;
    width: 100%;
    height: auto;
}

.hero-pin {
    position: absolute;
    left: var(--x,50%);
    top: var(--y,50%);
    transform: translate(-50%,-50%);
    z-index: 2;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,.35);
    pointer-events: none;
}

    .hero-pin a {
        pointer-events: auto;
    }

.brand-script {
    font-family: "Alex Brush",cursive;
    font-size: clamp(72px, 12vw, 160px); /* mobilde küçül, büyük ekranda 160px’e kadar çık */
    line-height: 1;
    letter-spacing: .5px;
    white-space: nowrap;
}

.tagline {
    font-family: "Playfair Display",serif;
    font-style: italic;
    font-weight: 600;
    font-size: clamp(16px,2.2vw,28px);
    letter-spacing: .02em;
    color: rgba(255,255,255,.95);
    text-shadow: 0 2px 6px rgba(0,0,0,.35);
    white-space: nowrap;
    margin-top: 6px;
}

/* Katalog hero alt bölüm  */
.hero > .container {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 32px;
    padding-block: clamp(24px,6vw,64px);
}

/* Üst başlık (orta) */
.hero-title {
    position: absolute;
    top: clamp(8px,2vw,16px);
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-size: clamp(28px,4vw,44px);
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,.28);
    pointer-events: none;
}

/* ===================== SOL SÜTUN: başlık + panel ===================== */
.dk-measure {
    position: relative;
    display: block;
    z-index: 20;
}

.dk-head {
    display: grid;
    grid-template-columns: 1fr 20px;
    align-items: center;
    gap: 12px;
    width: var(--toggle-width);
    height: var(--toggle-height);
    padding: 0 16px 0 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg,var(--glass),rgba(255,255,255,.06));
    color: #fff;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 10px 26px rgba(0,0,0,.20);
    cursor: pointer;
}

    .dk-head:focus {
        outline: 2px solid rgba(255,255,255,.5);
        outline-offset: 2px;
    }

.dk-title {
    font-size: clamp(18px,2vw,22px);
    font-weight: 700;
    letter-spacing: .3px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dk-chev {
    width: 18px;
    height: 18px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    transition: transform .22s,opacity .22s;
    opacity: .9;
}

.dk-head.active .dk-chev {
    transform: rotate(-45deg);
}

.dk-side {
    position: absolute;
    top: -6px;
    left: calc(100% + 16px);
    width: var(--toggle-width);
    max-height: 46vh;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.16);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    color: var(--ink);
    box-shadow: 0 18px 40px rgba(0,0,0,.28);
    transform: translateX(16px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .22s,opacity .22s,visibility .22s;
}

    .dk-side.open {
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .dk-side > header {
        padding: 10px 14px;
        font-weight: 700;
        border-bottom: 1px solid rgba(255,255,255,.3);
        color: #0E476D;
        background: rgba(255,255,255,.18);
    }

.dk-tablewrap {
    max-height: calc(46vh - 44px);
    overflow: auto;
}

.dk-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .dk-table thead th {
        position: static !important;
        background: rgba(255,255,255,.16);
        color: #0E476D;
        text-align: left;
        padding: 10px 12px;
        border-bottom: 1px solid rgba(255,255,255,.22);
    }

    .dk-table td {
        padding: 10px 12px;
        border-bottom: 1px solid rgba(255,255,255,.22);
        color: var(--ink);
    }

    .dk-table tbody tr:hover {
        background: rgba(255,255,255,.12);
    }

.catalog-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
}

    .catalog-stack .dk-measure {
        width: var(--toggle-width);
    }

.cat-panel {
    display: none !important;
}

    .cat-panel.active {
        display: grid !important;
    }

/* ===================== SAĞ SÜTUN: kâğıt + etiketler ===================== */
.hero-right {
    position: relative;
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
}

.paper-wrap {
    position: relative;
    display: inline-block;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,.35));
}

.paper-img {
    position: relative;
    z-index: 1;
    display: block;
    width: clamp(360px,36vw,560px);
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
}

/* Etiket grubu */
.paper-labels {
    position: absolute;
    z-index: 5;
    top: var(--label-top);
    right: var(--label-right);
    display: grid;
    gap: var(--pill-gap);
    transform: rotate(var(--paper-angle));
    transform-origin: center;
    pointer-events: none;
    --handSpace: calc(var(--handLeft) + var(--handW) + var(--handGap));
}

/* Etiket/Buton – panel görünüm */
.pill {
    pointer-events: auto;
    position: relative;
    padding: var(--pill-py) var(--pill-px);
    font-family: Inter,system-ui,-apple-system,Arial,sans-serif;
    font-style: italic;
    font-weight: 600;
    font-size: var(--pill-font);
    line-height: 1;
    color: #0b3e55;
    background: linear-gradient(180deg,#ffffff,#f4f7fa);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    clip-path: polygon(var(--chip-slant) 0,100% 0,calc(100% - var(--chip-slant)) 100%,0 100%);
    box-shadow: 0 14px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(0,0,0,.05);
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, background .15s;
}

    .pill:hover {
        background: #fff;
        box-shadow: 0 16px 34px rgba(0,0,0,.24);
    }

    .pill:active {
        transform: translateY(1px);
    }

    .pill.active {
        box-shadow: 0 18px 38px rgba(0,0,0,.26);
    }

/* ===================== EL-YAZISI MODU ===================== */
.paper-labels.handwritten {
    gap: max(14px, calc(var(--pill-gap)*.75));
}

    .paper-labels.handwritten .pill {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        clip-path: none !important;
        box-shadow: none !important;
        font-family: "Caveat","Patrick Hand",system-ui,sans-serif;
        font-weight: 700;
        font-size: clamp(20px,2.1vw,28px);
        line-height: 1.1;
        color: var(--ink);
        letter-spacing: .2px;
        -webkit-text-stroke: .2px rgba(0,0,0,.10);
        text-shadow: 0 .6px 0 rgba(0,0,0,.05), 0 1.2px 2px rgba(0,0,0,.08);
        mix-blend-mode: multiply;
        transform: none !important;
        cursor: pointer;
        padding: 6px 2px !important;
        pointer-events: auto;
        text-align: left;
        display: inline-block;
        width: max-content;
        padding-left: var(--handSpace) !important;
    }

        .paper-labels.handwritten .pill:hover {
            color: #093246;
            text-shadow: 0 .8px 0 rgba(0,0,0,.08), 0 1.6px 3px rgba(0,0,0,.10);
        }

        .paper-labels.handwritten .pill.active {
            position: relative;
        }

            .paper-labels.handwritten .pill.active::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                bottom: -4px;
                height: 2px;
                background: linear-gradient(90deg, transparent 0 6%, var(--ink) 35% 65%, transparent 94% 100%);
                opacity: .8;
                mix-blend-mode: multiply;
            }

        .paper-labels.handwritten .pill:not(.active)::before {
            content: "";
            position: absolute;
            inset: -6px -8px;
        }

        .paper-labels.handwritten .pill.active::before {
            content: "";
            position: absolute;
            left: var(--handLeft);
            top: 50%;
            width: var(--handW);
            height: var(--handH);
            transform: translateY(-50%) rotate(var(--handTilt));
            pointer-events: none;
            opacity: .96;
            background-color: currentColor;
            -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 18'><path d='M2 9 H22' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/><path d='M22 9 L16 5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/><path d='M22 9 L16 13' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/></svg>") no-repeat center/100% 100%;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 18'><path d='M2 9 H22' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/><path d='M22 9 L16 5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/><path d='M22 9 L16 13' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/></svg>") no-repeat center/100% 100%;
        }

    /* === FIX: başlığı eski el-yazısı stiline döndür + ortala === */
    .paper-labels.handwritten .paper-title {
        font-family: "Caveat","Patrick Hand","Playfair Display",serif;
        font-weight: 700;
        text-transform: uppercase;
        font-size: clamp(24px,2.6vw,34px);
        letter-spacing: .08em;
        color: var(--ink);
        text-shadow: 0 1px 2px rgba(0,0,0,.20);
        justify-self: var(--title-align);
        text-align: center;
        transform: translate(var(--title-shift-x),var(--title-shift-y));
        padding-left: var(--title-offset);
    }

/* Etiketler sola hizalı kalsın ama başlık etkilenmesin */
.paper-labels {
    justify-items: start;
}

/* Zemin geçişi + içerik zeminleri */
html,
body {
    background: #FEFEFF;
}

.after-fefeff {
    background: #FEFEFF;
    min-height: 40vh;
    padding: 24px 0;
}

/* ===================== OFFER (Teklif) Bölümü – TEMİZ ===================== */
.offer-slot.flat {
    background: var(--offer-bg);
    padding: clamp(24px,4vw,48px) 0;
}

/* 1) Grid ve eş yükseklik */
.offer-wrap {
    width: min(var(--offer-wrap-max),94%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: var(--offer-col-left) var(--offer-col-right);
    gap: var(--offer-wrap-gap);
    align-items: stretch; /* <= her iki kolon aynı yükseklik */
}

/* 2) Kartların kendisi (aynı görünüm) */
.offer-aside,
.offer-form {
    margin: 0; /* üst hizayı eşitle */
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.35));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,.10);
    padding: clamp(14px,2.2vw,18px);
}

/* 2a) Aside iç tipografi */
.offer-aside {
    font-size: var(--aside-font);
}

    .offer-aside h3 {
        margin: 0 0 8px;
        font-size: var(--aside-h3);
    }

    .offer-aside h4 {
        margin: 12px 0 6px;
        font-size: var(--aside-h4);
    }

    .offer-aside hr {
        border: none;
        border-top: 1px solid rgba(0,0,0,.08);
        margin: 10px 0;
    }

    .offer-aside .bullet {
        padding-left: 16px;
        margin: 0;
    }

        .offer-aside .bullet li {
            margin: var(--aside-li-gap) 0;
            line-height: var(--aside-line);
        }

/* 3) Form genişliği ve iç boşluklar */
.offer-main {
    order: 2;
    justify-self: end;
}

/* grid sağa otursun */
.offer-form {
    width: min(var(--offer-form-max),100%);
}

.offer-title {
    font-size: clamp(22px,2.6vw,28px);
    margin: 0 0 10px;
}

.offer-form .row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

    .offer-form .row.two {
        flex-direction: row;
        gap: 12px;
    }

        .offer-form .row.two > * {
            flex: 1;
        }

.offer-form label {
    font-weight: 600;
    font-size: 14px;
    color: #0b2230;
}

.offer-form input,
.offer-form textarea {
    width: 100%;
    border: 1px solid #d6d8dd;
    border-radius: 12px;
    padding: 12px 14px;
    font: inherit;
    outline: none;
    background: #f9fafb;
}

.offer-form input {
    height: 52px;
}

/* sabit input yüksekliği */
.offer-form textarea {
    min-height: 140px;
    resize: vertical;
}

    .offer-form input:focus,
    .offer-form textarea:focus {
        border-color: #93c5fd;
        background: #fff;
    }

/* Buton */
/* Formdaki Gönder butonu sola hizalı kalsın */
.btn-primary {
    align-self: flex-start;
}

/* Gönder + footer Teklif Formu için ORTAK stil */
.btn-primary,
.site-footer a.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0E476D;
    color: #fff;
    border: 0;
    border-radius: 12px;
    padding: 12px 18px;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
}

    /* Hover efekti ortak */
    .btn-primary:hover,
    .site-footer a.btn-cta:hover {
        filter: brightness(1.08);
    }

/* Footer butonuna ek boşluk */
.btn-cta {
    margin-top: 12px;
}

/* Uyarılar / doğrulama */
.alert {
    border-radius: 12px;
    padding: 10px 12px;
    margin: 8px 0 14px;
    font-weight: 600;
}

    .alert.ok {
        background: #ecfdf5;
        color: #065f46;
        border: 1px solid #a7f3d0;
    }

    .alert.err {
        background: #fef2f2;
        color: #991b1b;
        border: 1px solid #fecaca;
    }

.val {
    color: #b91c1c;
    font-size: 12px;
}

.val-summary {
    color: #b91c1c;
    margin-bottom: 8px;
}

/* ===================== FOOTER ===================== */
.site-footer {
    background: #FEFEFF;
    border-top: 1px solid rgba(0,0,0,.06);
    margin-top: 48px;
}

.foot-wrap {
    width: min(1200px,94%);
    margin: 0 auto;
    padding: clamp(24px,4vw,40px) 0;
    display: grid;
    grid-template-columns: 1.1fr 1fr .9fr;
    gap: clamp(16px,3vw,36px);
}

.foot-col {
    color: #0b2230;
}

.foot-title {
    font-weight: 800;
    font-size: clamp(16px,1.6vw,18px);
    margin: 0 0 10px;
    color: #0E476D;
}

.foot-list,
.foot-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .foot-list li,
    .foot-links li {
        margin: 8px 0;
    }

.site-footer a {
    color: #0E476D;
    text-decoration: none;
}

    .site-footer a:hover {
        text-decoration: underline;
    }

    /* Footer butonu altı çizilmesin */
    .site-footer a.btn-cta,
    .site-footer a.btn-cta:hover {
        text-decoration: none;
    }

.foot-social {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

    .foot-social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        border: 1px solid rgba(0,0,0,.08);
        background: #fff;
        font-weight: 700;
    }

        .foot-social a:hover {
            filter: brightness(1.05);
        }

.foot-sep {
    border: none;
    border-top: 1px solid rgba(0,0,0,.06);
}

.foot-bottom {
    width: min(1200px,94%);
    margin: 0 auto;
    padding: 12px 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #425466;
    gap: 12px;
    flex-wrap: wrap;
}

.foot-legal {
    display: flex;
    gap: 14px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Yukarı dön butonu */
.to-top {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.1);
    background: #ffffffcc;
    backdrop-filter: blur(4px);
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: .2s;
}

    .to-top.show {
        opacity: 1;
        pointer-events: auto;
    }

/*-----------------------------Hero CTA / UTILS ---------------------------------------*/

.muted {
    color: #6b7280;
    margin: 4px 0 12px;
    font-size: 14px;
}

/* === HERO CTA BUTONLARI === */
/* --- CTA konum --- */
.cta-row {
    display: inline-flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
}

/* spacing */
.cta-row--below {
    --cta-gap: 50px;
    margin-top: var(--cta-gap);
}

/* --- Buton bedenleri --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    border-radius: 22px; /* daha oval */
    text-decoration: none;
    transition: transform .12s, box-shadow .12s, filter .12s, background .12s;
}

    .btn:active {
        transform: translateY(1px);
    }

/* Dolu (primary) – geniş */
.btn-primary-lg {
    background: #0E476D;
    color: #fff;
    padding: 14px 26px; /* daha büyük */
    box-shadow: 0 12px 28px rgba(0,0,0,.22);
    border: 1px solid rgba(255,255,255,.06);
}

    .btn-primary-lg:hover {
        filter: brightness(1.08);
        box-shadow: 0 14px 32px rgba(0,0,0,.26);
    }

/* Şeffaf (ghost) – geniş */
.btn-ghost-lg {
    background: rgba(255,255,255,.12);
    color: #fff;
    padding: 14px 26px; /* daha büyük */
    border: 1px solid rgba(255,255,255,.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 12px 24px rgba(0,0,0,.15) inset, 0 8px 20px rgba(0,0,0,.10);
}

    .btn-ghost-lg:hover {
        background: rgba(255,255,255,.16);
    }

/* genişlik: siyah çizdiğin alan kadar olsun */
.btn-wide {
    min-width: clamp(220px, 28vw, 360px);
    text-align: center;
}

/* Quick chips */
.quickchips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.quickchip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.1);
    background: #ffffff;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

    .quickchip:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }

    .quickchip:active {
        transform: scale(0.96);
    }

/* Mobil kategori barı – varsayılan: gizli */
.mobile-cats {
    display: none;
}

.offer-slot input,
.offer-slot textarea {
    font-weight: 400;
}

/* Footer yazılarını tekrar normal (ince) yap */
.site-footer,
.site-footer p,
.site-footer li,
.site-footer a,
.site-footer span {
    font-weight: 400;
}

.wa-link i.fa-whatsapp {
    margin-right: 6px;
    font-size: 1.1em;
    color: #25D366; /* WhatsApp yeşili */
}

/* WhatsApp satırını hizala */
.wa-link {
    display: inline-flex;
    align-items: center; /* ikon ve yazıyı dikeyde ortala */
    gap: 4px; /* araya ufak boşluk */
}

    .wa-link i.fa-whatsapp {
        font-size: 1.1em;
        margin: 0; /* varsa eski margin'i sıfırla */
    }

.hizli-iletisim li {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hizli-iletisim i {
    width: 18px;
    text-align: center;
}

/* Hızlı İletişim listesi layout */
.contact-list {
    list-style: disc; /* bullet'lar kalsın; istersen none yapabilirsin */
    padding-left: 1.2rem;
    margin: 0;
}

    .contact-list li {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 4px;
    }

/* Ortak ikon stili */
.contact-icon {
    width: 18px; /* hepsi aynı genişlikte */
    text-align: center;
    font-size: 1rem;
}

/******************** İkonlar ************************/
/* Hızlı İletişim listesindeki linkler */
.bullet a {
    text-decoration: none; /* varsayılan: çizgi yok */
}

    /* Üzerine gelince altı çizilsin */
    .bullet a:hover {
        text-decoration: underline;
    }

/* WhatsApp ikonunun rengi ve hizası */
.wa-icon {
    color: #25D366;
    margin-right: 4px; /* yazıyla arası */
    margin-left: 4px; /* noktadan bir tık sağa kaydır */
}

/* Sağ sütundaki (offer-aside) tüm link renklerini sabitle */
.offer-aside a,
.offer-aside a:link,
.offer-aside a:visited,
.offer-aside a:hover,
.offer-aside a:active {
    color: #0E476D; /* hepsi aynı mavi */
}




/* Başta hero'nun ÜSTÜNE otursun */
.site-header {
    position: absolute; /* sticky yerine absolute */
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

    /* Scroll edince artık sabitlenmiş bar gibi davransın */
    .site-header.is-fixed {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    }

    /* Aşağı inerken gizlenmesi için */
    .site-header.is-hidden {
        transform: translateY(-100%);
    }



.offer-actions {
    display: flex;
    justify-content: space-between; /* buton solda, captcha sağda */
    align-items: center;
    margin-top: 12px;
    gap: 16px; /* aralarına biraz boşluk */
}

    .offer-actions .btn-primary {
        height: 60px; /* buton yüksekliği – reCAPTCHA’ya yakın bir değer */
        display: flex;
        align-items: center; /* yazıyı dikey ortala */
        justify-content: center; /* yatay ortala */
        padding-inline: 24px; /* enini senin mevcut buton enine yakın tutar */
        font-size: 16px; /* biraz daha okunaklı dursun */
    }


/* ===================== RESPONSIVE ===================== */

/* 1) Tablet + Mobil (<=900px) */
@media (max-width: 900px) {

    /* Hero layout tek sütun */
    .hero > .container {
        grid-template-columns: 1fr;
        padding-block: 24px 32px;
        gap: 20px;
    }

    /* Sağdaki kâğıt ve üzerindeki kategoriler gizlensin */
    .hero-right,
    .paper-wrap,
    .paper-labels {
        display: none;
    }

    /* Ürün başlığı normal akışta, ortalı */
    .hero-title {
        position: static;
        margin: 16px 16px 6px;
        text-align: center;
        font-size: 20px;
        line-height: 1.25;
        transform: none;
    }

    /* Mobil kategori barı (başlığın hemen altında) */
    .mobile-cats {
        display: flex;
        gap: 8px;
        padding: 0 16px 10px;
        margin: 2px 0 8px;
        overflow-x: auto;
        scrollbar-width: none;
    }

        .mobile-cats::-webkit-scrollbar {
            display: none;
        }

        .mobile-cats .chip {
            flex: 0 0 auto;
            border-radius: 999px;
            padding: 8px 14px;
            font-size: 13px;
            border: 1px solid rgba(255,255,255,.35);
            background: rgba(255,255,255,.14);
            color: #fff;
            font-weight: 600;
            letter-spacing: .02em;
            white-space: nowrap; /* “Amerikan Bristol” kesilmesin */
        }

            .mobile-cats .chip.active {
                background: #ffffff;
                color: #0E476D;
                border-color: transparent;
            }

    /* Ürün panelleri: akordeon (butonun altında açılsın) */
    .catalog-stack .dk-measure,
    .dk-head {
        width: 100%;
    }

    .catalog-stack {
        gap: 18px;
    }

    .dk-side {
        position: static;
        left: auto;
        top: auto;
        width: 100%;
        margin-top: 8px;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        box-shadow: none;
        transform: none;
        transition: max-height .25s ease, opacity .2s ease;
    }

        .dk-side.open {
            max-height: 380px; /* istersen 300–450 arası oynat */
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

    .dk-tablewrap {
        max-height: 340px;
        overflow: auto;
    }

    /* Teklif alanı tek sütun */
    .offer-wrap {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .offer-main {
        order: 1;
        justify-self: stretch;
    }

    .offer-aside {
        order: 2;
    }

    /* Footer 2 sütun */
    .foot-wrap {
        grid-template-columns: 1fr 1fr;
    }
}

/* 2) CTA ve hero yazısı (<=768px) */
@media (max-width: 768px) {

    /* Hero iç boşlukları biraz daha sıkı ve tek sütun */
    .hero > .container {
        grid-template-columns: 1fr;
        padding-top: 8px;
        padding-bottom: 24px;
        gap: 16px;
    }

    /* “Deniz Kağıt” + slogan mobilde gizlensin */
    .brand-script,
    .tagline {
        display: none;
    }

    /* CTA bloğunu sağ üste al */
    .hero-pin {
        --x: 71% !important;
        --y: 44% !important; /* ⬅︎ eskisi 24'tü */
        text-align: right;
    }

    /* Sağdaki hero-right mobilde ortaya gelsin */
    .hero-right {
        justify-content: center;
        margin-top: 16px;
    }

    /* CTA satırını tek satırda, sağa hizalı tut */
    .cta-row {
        display: flex;
        flex-wrap: nowrap; /* butonlar alt alta düşmesin */
        justify-content: flex-end;
        gap: 6px; /* aradaki boşluk biraz küçülsün */
        margin-top: 8px;
    }

    /* Mobilde butonları biraz küçült + satır kırılmasını engelle */
    .btn-primary-lg,
    .btn-ghost-lg {
        padding: 8px 10px; /* yatay padding’i azalttık */
        font-size: 12px; /* yazıyı hafif küçülttük */
        border-radius: 18px;
        white-space: nowrap; /*  <-- “Teklif Ver” asla iki satır olmasın */
    }

    .btn-wide {
        min-width: auto;
        width: auto;
    }
}

/* 3) Küçük telefon (<=600px) */
@media (max-width: 600px) {

    .site-header {
        height: 60px;
    }

        .site-header .container {
            padding-inline: 12px;
        }

    .logo img {
        height: 56px;
    }

    .menu a {
        margin-left: 14px;
        font-size: 14px;
    }

    .offer-slot.flat {
        padding: 24px 0 32px;
    }

    /* Footer tek sütun */
    .foot-wrap {
        grid-template-columns: 1fr;
    }

    .foot-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

/* ===================== TABLET (iPad vb.) KÂĞIT ETİKET AYARI ===================== */
@media (min-width: 901px) and (max-width: 1200px) {

    :root {
        /* Etiket grubunun kâğıt üzerindeki yeri */
        --label-top: 13%; /* biraz yukarı/aşağı için bu değeri oynatabilirsin (18–24 arası dene) */
        --label-right: 31%; /* sağa-sola kaydırmak için (35–42 arası dene) */
        --paper-angle: -34deg; /* eğimi tablet için biraz azalt */
        --pill-gap: 16px; /* etiketler arası boşluk biraz daralsın */
        --pill-px: 48px; /* yatay padding’i tablet için küçült */
        --pill-font: 15px; /* yazı boyutu küçücük dokunuş */
    }

    /* başlık biraz daha merkezde dursun istersen */
    .paper-labels.handwritten .paper-title {
        font-size: 22px;
        transform: translate(0, -4px);
    }
}

/* Mobil (örneğin 768px altı) için */
@media (max-width: 768px) {
    .offer-actions {
        flex-direction: column; /* alt alta gelsin */
        align-items: stretch;
        gap: 12px;
    }

        .offer-actions .btn-primary {
            height: auto; /* buton boyu normal */
            width: 100%; /* istersen full genişlik */
        }

        .offer-actions .g-recaptcha {
            align-self: flex-start; /* soldan hizalansın */
            /* istersen biraz küçült:
        transform: scale(0.9);
        transform-origin: left top;
        */
        }
}