/* ==========================================================================
   Kombiseti — Stitch Storefront ortak tasarim katmani (B2C)
   Sadece body.st-storefront tasiyan sayfalarda aktif (sales.home + shop.*).
   Layout'ta mobile.css'ten SONRA yuklenir.
   ========================================================================== */

/* Acik-gri zemin (Stitch). Layout'un navy gradyanini magaza sayfalarinda ezer. */
body.st-storefront { background: #F7F7F8 !important; }
body.st-storefront::before { content: none !important; background: none !important; }

/* Sayfa sarmalayici — sabit header'i klerleyen ust bosluk (breakpoint'ler temayla hizali) */
.st-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 88px 16px 24px;
}

/* Genel buton */
.st-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 14px;
    background: #FFD300;
    color: #20214F;
    font-weight: 800;
    font-size: 0.92rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.st-btn:hover { color: #20214F; transform: translateY(-1px); box-shadow: 0 12px 26px rgba(255, 211, 0, 0.32); }
.st-btn:active { transform: scale(0.97); }
.st-btn--block { width: 100%; }

.st-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 14px;
    background: #fff;
    color: #20214F;
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    border: 1px solid rgba(15, 23, 42, 0.14);
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}
.st-btn-outline:hover { color: #20214F; background: #F7F8FA; border-color: rgba(255, 211, 0, 0.5); }

/* Arama */
.st-search { margin-bottom: 18px; }
.st-search-form { position: relative; display: flex; align-items: center; }
.st-search-form > i {
    position: absolute; left: 16px; color: #8692a2; font-size: 16px; pointer-events: none;
}
.st-search-form input {
    width: 100%; height: 50px; padding: 0 92px 0 44px; border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.10); background: #fff; color: #20214F;
    font-size: 0.95rem; box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}
.st-search-form input:focus {
    outline: none; border-color: rgba(255, 211, 0, 0.55); box-shadow: 0 0 0 3px rgba(255, 211, 0, 0.20);
}
.st-search-form button {
    position: absolute; right: 6px; height: 40px; padding: 0 18px; border: none;
    border-radius: 12px; background: #FFD300; color: #20214F; font-weight: 800; font-size: 0.9rem;
}

/* Bolum basligi */
.st-section { margin-top: 30px; }
.st-section--soft {
    margin-left: -16px; margin-right: -16px; padding: 24px 16px; background: #fff;
    border-top: 1px solid rgba(15, 23, 42, 0.06); border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.st-section-head {
    display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px;
}
.st-section-head h1,
.st-section-head h2 {
    margin: 0; color: #20214F; font-family: "Space Grotesk", "Manrope", sans-serif;
    font-size: 1.18rem; font-weight: 700; letter-spacing: -0.03em;
}
.st-section-head a { color: rgba(32, 33, 79, 0.6); font-size: 0.85rem; font-weight: 700; text-decoration: none; }

/* Hero (ana sayfa) */
.st-hero {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px;
    min-height: 190px; padding: 24px; border-radius: 26px;
    background:
        radial-gradient(circle at 88% 50%, rgba(255, 211, 0, 0.18), transparent 55%),
        linear-gradient(135deg, #20214F 0%, #2b2f6e 60%, #1b2a6b 100%);
    box-shadow: 0 24px 60px rgba(32, 33, 79, 0.28);
}
.st-hero-copy { width: 64%; position: relative; z-index: 2; }
.st-hero-badge {
    display: inline-block; margin-bottom: 10px; padding: 5px 12px; border-radius: 999px;
    background: #FFD300; color: #20214F; font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.st-hero-copy h1 {
    margin: 0 0 8px; color: #fff; font-family: "Space Grotesk", "Manrope", sans-serif;
    font-size: 1.45rem; line-height: 1.12; letter-spacing: -0.03em; font-weight: 700;
}
.st-hero-copy p { margin: 0 0 16px; color: rgba(255, 255, 255, 0.72); font-size: 0.85rem; line-height: 1.55; }
.st-hero-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 14px;
    background: #FFD300; color: #20214F; font-weight: 800; font-size: 0.9rem; text-decoration: none;
    transition: transform 0.2s ease;
}
.st-hero-btn:active { transform: scale(0.96); }
.st-hero-media {
    position: absolute; right: -10px; top: 50%; transform: translateY(-50%);
    width: 42%; max-width: 200px; z-index: 1; pointer-events: none;
}
.st-hero-media img {
    width: 100%; height: auto; max-height: 170px; object-fit: contain;
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.35));
}

/* Kategoriler yatay */
.st-cat-scroller { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.st-cat-scroller::-webkit-scrollbar { display: none; }
.st-cat { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 74px; text-decoration: none; }
.st-cat-icon {
    width: 64px; height: 64px; border-radius: 50%; background: #fff; border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08); display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.st-cat-icon img { width: 70%; height: 70%; object-fit: contain; }
.st-cat-name { color: #20214F; font-size: 0.72rem; font-weight: 700; text-align: center; line-height: 1.2; }

/* Kampanya seridi */
.st-campaign-wrap { margin-top: 24px; }
.st-campaign {
    display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 18px;
    border-radius: 16px; background: #FFD300; color: #20214F; font-family: "Space Grotesk", "Manrope", sans-serif;
    font-weight: 700; font-size: 0.9rem; text-decoration: none; box-shadow: 0 14px 30px rgba(255, 211, 0, 0.28);
}

/* Urun grid + kart */
.st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.st-card {
    display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 20px; padding: 12px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.st-card:hover { transform: translateY(-3px); border-color: rgba(255, 211, 0, 0.4); box-shadow: 0 20px 44px rgba(15, 23, 42, 0.12); }
.st-card-media {
    display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; margin-bottom: 12px;
    border-radius: 14px; background: #F7F8FA; padding: 12px;
}
.st-card-media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.st-card-body { display: flex; flex-direction: column; flex: 1; }
.st-card-cat { color: #8692a2; font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.st-card-title {
    margin: 0 0 10px; font-size: 0.84rem; font-weight: 700; line-height: 1.32; min-height: 2.6em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.st-card-title a { color: #20214F; text-decoration: none; }
.st-card-bottom { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.st-card-price {
    color: #20214F; font-family: "Space Grotesk", "Manrope", sans-serif; font-weight: 800; font-size: 0.98rem; white-space: nowrap;
}
.st-card-price small { color: #8692a2; font-weight: 600; font-size: 0.72rem; }
.st-card-add {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; background: #FFD300; color: #20214F;
    display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: transform 0.15s ease;
}
.st-card-add:active { transform: scale(0.9); }

/* Yatay scroller (mini kartlar) */
.st-scroller { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.st-scroller::-webkit-scrollbar { display: none; }
.st-mini {
    flex: 0 0 auto; width: 160px; padding: 12px; border-radius: 18px; background: #F7F8FA;
    border: 1px solid rgba(15, 23, 42, 0.06); text-decoration: none; display: flex; flex-direction: column;
}
.st-mini-media { height: 120px; margin-bottom: 12px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 10px; }
.st-mini-media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.st-mini-cat { color: #8692a2; font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.st-mini-name { color: #20214F; font-size: 0.8rem; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-mini-price { margin-top: 6px; color: #20214F; font-family: "Space Grotesk", "Manrope", sans-serif; font-weight: 800; font-size: 0.92rem; }

/* Guven rozetleri */
.st-trust { margin-top: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.st-trust-item { display: flex; align-items: center; gap: 12px; }
.st-trust-ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; }
.st-ico-blue { background: #2563eb; color: #ffffff; }
.st-ico-green { background: #16a34a; color: #ffffff; }
.st-ico-amber { background: #d97706; color: #ffffff; }
.st-ico-purple { background: #7c3aed; color: #ffffff; }
.st-trust-ico, .st-trust-ico i { color: #ffffff !important; }
.st-trust-item strong { display: block; color: #111233; font-size: 0.92rem; font-weight: 700; }
.st-trust-item span { color: #475063; font-size: 0.78rem; font-weight: 500; }

/* Bos durum karti */
.st-empty {
    text-align: center; padding: 40px 20px; background: #fff; border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 22px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}
.st-empty i { font-size: 38px; color: #c7ccd6; margin-bottom: 12px; }
.st-empty h3 { color: #20214F; font-family: "Space Grotesk", "Manrope", sans-serif; margin: 0 0 6px; }
.st-empty p { color: #8692a2; margin: 0 0 16px; }

/* ===== Tablet / Masaustu ===== */
@media (min-width: 768px) {
    .st-page { padding-top: 108px; } /* bu aralikta topbar gizli, sadece navbar */
    .st-hero { min-height: 280px; padding: 40px; }
    .st-hero-copy { width: 58%; }
    .st-hero-copy h1 { font-size: 2.4rem; }
    .st-hero-copy p { font-size: 1rem; }
    .st-hero-media { max-width: 340px; width: 40%; }
    .st-hero-media img { max-height: 260px; }
    .st-section-head h1, .st-section-head h2 { font-size: 1.5rem; }
    .st-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .st-card-title { font-size: 0.95rem; }
    .st-card-media { padding: 18px; }
    .st-section--soft { border-radius: 26px; margin-left: 0; margin-right: 0; }
}

@media (min-width: 992px) {
    .st-page { padding-top: 156px; } /* topbar (42px) + navbar burada birlikte gorunur */
    .st-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .st-cat-icon { width: 80px; height: 80px; }
    .st-cat { width: 92px; }
}

/* ==========================================================================
   Hakkimizda / Kurumsal (about-us) — Stitch
   NOT: CMS section'lari @push('style') tutmaz (onceden render edilir),
   bu yuzden about'a ozel stiller burada (global) tutulur.
   ========================================================================== */

/* about-us'ta breadcrumb banner gizlenir; Stitch hero header gorevini gorur */
body.st-storefront .banner-section { display: none !important; }

.st-about { padding-bottom: 8px; }

/* Masaustunde sol gorsel SABIT (sticky), sag icerik kayar — urun sayfasi gibi */
.st-about-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.st-about-visual-card {
    position: relative; overflow: hidden; padding: 16px; border-radius: 26px;
    background:
        radial-gradient(circle at 80% 12%, rgba(255, 211, 0, 0.20), transparent 50%),
        linear-gradient(135deg, #20214F 0%, #2b2f6e 60%, #1b2a6b 100%);
    box-shadow: 0 24px 60px rgba(32, 33, 79, 0.28);
}
.st-about-visual-card img { display: block; width: 100%; height: auto; border-radius: 18px; }
.st-about-visual-card .st-hero-badge { position: absolute; top: 18px; left: 18px; z-index: 2; }

.st-about-intro h1 {
    margin: 0 0 10px; color: #101828; font-family: "Space Grotesk", "Manrope", sans-serif;
    font-size: 1.7rem; line-height: 1.12; letter-spacing: -0.03em; font-weight: 700;
}
.st-about-intro p { margin: 0 0 16px; color: #475569; font-size: 0.95rem; line-height: 1.6; }

.st-eyebrow {
    display: inline-block; margin-bottom: 10px; padding: 6px 13px; border-radius: 999px;
    background: rgba(255, 211, 0, 0.22); color: #20214F; font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.05em;
}

/* Istatistik seridi */
.st-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.st-stat {
    background: #fff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 18px;
    padding: 16px 12px; text-align: center; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}
.st-stat strong {
    display: block; color: #20214F; font-family: "Space Grotesk", "Manrope", sans-serif;
    font-size: 1.25rem; font-weight: 800; line-height: 1.1;
}
.st-stat span { display: block; margin-top: 4px; color: #8692a2; font-size: 0.72rem; font-weight: 700; }

/* Hakkimizda karti */
.st-about-card {
    background: #fff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 24px;
    padding: 24px; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.07);
}
.st-about-card h2 {
    margin: 0 0 12px; color: #101828; font-family: "Space Grotesk", "Manrope", sans-serif;
    font-size: 1.45rem; line-height: 1.15; letter-spacing: -0.03em; font-weight: 700;
}
.st-about-card p { margin: 0; color: #475569; font-size: 0.95rem; line-height: 1.6; }

/* Operasyon modeli kartlari */
.st-op-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.st-op-card {
    background: #fff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 18px;
    padding: 16px; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}
.st-op-ico {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    margin-bottom: 10px; border-radius: 12px; background: rgba(255, 211, 0, 0.22); color: #20214F; font-size: 16px;
}
.st-op-card h3 { margin: 0 0 6px; color: #111827; font-size: 0.95rem; font-weight: 800; line-height: 1.2; }
.st-op-card p { margin: 0; color: #475569; font-size: 0.85rem; line-height: 1.4; }

/* CTA */
.st-about-cta { justify-content: space-between; text-align: left; }
.st-about-cta .st-about-cta-arrow { flex: 0 0 auto; }

@media (min-width: 768px) {
    .st-about-card { padding: 32px; }
    .st-about-card h2 { font-size: 1.9rem; }
    .st-about-intro h1 { font-size: 2.1rem; }
    .st-stat strong { font-size: 1.5rem; }
}

@media (min-width: 992px) {
    /* Sol gorsel kolonu sabit kalir, sag icerik kayar */
    .st-about-grid { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 30px; align-items: start; }
    .st-about-visual { position: sticky; top: 150px; }
}

/* ==========================================================================
   Auth (giris / kayit / sifre sifirlama) — Stitch ortak bilesenler
   NOT: body acik-zemin override'i sayfa-ici @push('style')'da tutulur (scoped).
   ========================================================================== */
.st-auth { display: flex; justify-content: center; }
.st-auth-card {
    width: 100%; max-width: 720px; background: #fff; border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 24px; padding: 26px 22px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.10);
}
.st-auth-card--narrow { max-width: 460px; }
.st-auth-head { margin-bottom: 22px; text-align: center; }
.st-auth-head .st-eyebrow {
    display: inline-block; margin-bottom: 10px; padding: 6px 13px; border-radius: 999px;
    background: rgba(255, 211, 0, 0.22); color: #20214F; font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.st-auth-head h1 {
    margin: 0 0 8px; color: #101828; font-family: "Space Grotesk", "Manrope", sans-serif;
    font-size: 1.55rem; font-weight: 700; letter-spacing: -0.03em;
}
.st-auth-head p { margin: 0; color: #475569; font-size: 0.92rem; }

.st-auth-form label { display: block; margin-bottom: 6px; color: #20214F; font-weight: 700; font-size: 0.82rem; }
.st-auth-form .input-box { position: relative; }
.st-auth-form .form-control {
    width: 100%; min-height: 50px; border-radius: 14px; padding: 0 14px;
    background: #F7F8FA; border: 1px solid rgba(15, 23, 42, 0.1); color: #20214F; font-size: 0.95rem; box-shadow: none;
}
.st-auth-form select.form-control { cursor: pointer; }
.st-auth-form .form-control:focus {
    outline: none; border-color: rgba(255, 211, 0, 0.55); box-shadow: 0 0 0 3px rgba(255, 211, 0, 0.18); background: #fff;
}
.st-auth-form .form-control::placeholder { color: #9aa3b2; }

.st-auth-form .input-box.has-eye .form-control { padding-right: 42px; }
.st-auth-form .input-box.has-eye i { position: absolute; right: 14px; bottom: 15px; color: #8692a2; cursor: pointer; }
.st-auth-form .input-box.has-eye i.active { color: #20214F; }

.st-auth-form .text-danger { display: block; margin-top: 6px; color: #dc2626; font-size: 0.8rem; }
.st-auth-form .invalid-feedback { display: block; color: #dc2626; font-size: 0.8rem; }
.st-auth-form .alert-success {
    margin: 0; padding: 12px 14px; border-radius: 14px; background: #E7F8EE; border: 1px solid rgba(22, 163, 74, 0.2); color: #166534; font-size: 0.88rem;
}

.phone_input { padding-right: 6px !important; }
.st-captcha { gap: 10px; align-items: center; }
.st-captcha .img-fluid { max-height: 50px; }

.st-auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.st-auth-check { display: flex; align-items: flex-start; gap: 8px; padding-left: 0; margin: 0; }
.st-auth-check .form-check-input { margin: 2px 0 0; flex: 0 0 auto; }
.st-auth-check .form-check-label { color: #475569; font-weight: 600; font-size: 0.85rem; line-height: 1.4; }
.st-auth-forgot { color: #20214F; font-weight: 700; font-size: 0.85rem; text-decoration: none; }
.st-auth-forgot:hover { color: #20214F; text-decoration: underline; }

.st-auth-form .btn-custom { width: 100%; }
.st-auth-form .btn-auth-secondary {
    display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: 8px;
    min-height: 50px; border-radius: 14px; border: 1px solid rgba(15, 23, 42, 0.14); padding: 0 22px;
    color: #20214F; background: #fff; font-weight: 700; text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease;
}
.st-auth-form .btn-auth-secondary:hover { background: #F7F8FA; color: #20214F; border-color: rgba(255, 211, 0, 0.5); }
.st-auth-form .btn-auth-secondary span {
    font-size: 11px; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.06em;
    background: rgba(15, 23, 42, 0.06); padding: 3px 8px; border-radius: 999px;
}

.st-auth-bottom { text-align: center; color: #475569; font-size: 0.9rem; }
.st-auth-bottom a { color: #20214F; font-weight: 800; text-decoration: none; }
.st-auth-bottom a:hover { color: #20214F; text-decoration: underline; }

@media (min-width: 768px) {
    .st-auth-card { padding: 36px 40px; }
    .st-auth-head h1 { font-size: 1.85rem; }
}