/* ============================================================
   baski.ai — Özel CSS
   Tailwind CDN üzerine ince ayarlar ve özel bileşenler.
   ============================================================ */

:root {
    --bg:        #F5F5F5;
    --card:      #FFFFFF;
    --ink:       #1f2937;
    --muted:    #6b7280;
    --line:     #e5e7eb;
    --cta:      #2D7FF9;
    --cta-2:    #1f6ee0;
    --red:      #FF5B5B;
    --red-2:    #ef4949;
}

html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); }

/* Brand logo hover'ında hafif animasyon */
.brand-logo svg, .brand-logo img { transition: transform .25s ease; }
.brand-logo:hover svg, .brand-logo:hover img { transform: translateY(-1px) rotate(-1deg); }
.brand-logo-mini svg { height: 44px; width: auto; }

/* Header logosunun absolute ortalama davranışı:
   mobilde de orta çizgide kalır, hamburger ve sağ aksiyonlar
   logoya temas etmez (pointer-events-none gerekmiyor çünkü logo link). */
.site-header .brand-logo {
    max-width: calc(100% - 220px); /* sol+sağ grupların geçmemesi için */
}
@media (min-width: 640px) {
    .site-header .brand-logo { max-width: calc(100% - 320px); }
}

/* Aktif nav linki */
.is-active { color: var(--cta); font-weight: 600; }

/* ============================================================
   HEADER ARAMA PANELİ
   ============================================================ */
.search-panel {
    animation: searchPanelOpen .25s ease;
}
@keyframes searchPanelOpen {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.search-input-wrap {
    display: flex; align-items: center; gap: 12px;
    background: var(--bg);
    border: 2px solid var(--line);
    border-radius: 14px;
    padding: 4px 4px 4px 16px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.search-input-wrap:focus-within {
    border-color: var(--cta);
    box-shadow: 0 0 0 4px rgba(45,127,249,.12);
    background: #fff;
}
.search-input {
    flex: 1; min-width: 0;
    border: 0; outline: 0;
    background: transparent;
    font-size: 16px; font-weight: 500;
    color: var(--ink);
    padding: 12px 4px;
}
.search-input::placeholder { color: var(--muted); font-weight: 400; }

.search-go-btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 42px; padding: 0 22px;
    background: var(--cta); color: #fff;
    font-weight: 600; font-size: 14px;
    border-radius: 10px;
    transition: background .15s;
}
.search-go-btn:hover { background: var(--cta-2); }

.search-tag-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px 6px 10px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 13px;
    color: var(--ink);
    transition: border-color .15s, color .15s, transform .15s;
}
.search-tag-chip:hover {
    border-color: var(--cta);
    color: var(--cta);
    transform: translateY(-1px);
}
.search-tag-count {
    background: var(--bg);
    color: var(--muted);
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 999px;
    font-weight: 600;
}

.search-shortcut {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px 6px 6px;
    border-radius: 999px;
    background: var(--p-bg, #f3f4f6);
    border: 1.5px solid transparent;
    font-size: 13px; font-weight: 500;
    color: var(--ink);
    transition: transform .15s, border-color .15s;
}
.search-shortcut:hover {
    transform: translateY(-1px);
    border-color: var(--p-accent, var(--cta));
}
.search-shortcut-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    background: rgba(255,255,255,.9);
    border-radius: 8px;
    padding: 4px;
}
.search-shortcut-icon svg { width: 100%; height: 100%; }

/* Dropdown davranışı */
[data-dropdown] .dropdown-menu { transition: opacity .15s ease, transform .15s ease; }

/* ============================================================
   ANASAYFA — Hero
   ============================================================ */
.hero-title {
    font-size: clamp(20px, 3.2vw, 30px);
    font-weight: 700;
    line-height: 1.25;
}
.hero-sub {
    font-size: clamp(13px, 1.7vw, 15px);
    color: var(--muted);
    line-height: 1.6;
}

/* Yükle butonu + ok bloğu (eski — bazı sayfalarda kullanılır) */
.upload-card { display: flex; align-items: center; gap: 14px; }
.upload-btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 44px; padding: 0 26px;
    background: var(--cta); color: #fff; font-weight: 600;
    border-radius: 999px; box-shadow: 0 1px 2px rgba(0,0,0,.06);
    transition: background .2s, transform .2s;
}
.upload-btn:hover { background: var(--cta-2); transform: translateY(-1px); }
.arrow-curl { width: 110px; max-width: 35vw; height: 40px; opacity: .85; }

/* Eski .product-quick (geriye uyumlu — diğer sayfalarda kullanılırsa) */
.product-quick { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; }
.product-quick a { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 72px; text-align: center; color: var(--ink); font-size: 12px; font-weight: 500; transition: transform .2s; }
.product-quick a:hover { transform: translateY(-2px); color: var(--cta); }
.product-quick .icon-box { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.04); padding: 8px; }

/* ============================================================
   HERO AKSİYON KARTI (Yeni)
   ============================================================ */
.hero-action-card {
    /* Hafif vurgu: gradient çerçeve */
    position: relative;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, rgba(45,127,249,.25), rgba(255,91,91,.25)) border-box;
    border: 1.5px solid transparent;
}

.hero-eyebrow {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

/* --- Yükle butonu (gradient + glow) --- */
.hero-upload-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    height: 50px; padding: 0 26px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--cta) 0%, var(--cta-2) 100%);
    color: #fff;
    font-weight: 600; font-size: 15px;
    box-shadow: 0 6px 18px rgba(45,127,249,.32), 0 2px 4px rgba(45,127,249,.18);
    transition: transform .2s ease, box-shadow .2s ease;
    overflow: hidden;
}
.hero-upload-btn::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .55s ease;
}
.hero-upload-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(45,127,249,.40), 0 4px 8px rgba(45,127,249,.22);
}
.hero-upload-btn:hover::before { transform: translateX(100%); }
.hero-upload-btn svg { position: relative; z-index: 1; }
.hero-upload-btn span { position: relative; z-index: 1; }

.hero-upload-glow {
    position: absolute;
    inset: -25%;
    background: radial-gradient(closest-side, rgba(45,127,249,.18), transparent 70%);
    z-index: -1;
    pointer-events: none;
    filter: blur(8px);
}

.hero-upload-hint {
    font-size: 11.5px;
    color: var(--muted);
    font-weight: 500;
    letter-spacing: .02em;
}

/* --- 4 Kategori kartları --- */
.hero-cat-card {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px;
    padding: 14px 8px 12px;
    border-radius: 16px;
    background: linear-gradient(160deg, var(--cat-bg, #f3f4f6) 0%, #fff 100%);
    border: 1.5px solid transparent;
    color: var(--ink);
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    overflow: hidden;
    isolation: isolate;
}
.hero-cat-card::before {
    /* hover'da renkli halo */
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 0%, var(--cat-accent, var(--cta)) 0%, transparent 60%);
    opacity: 0;
    transition: opacity .25s ease;
    z-index: -1;
    mix-blend-mode: multiply;
}
.hero-cat-card:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: var(--cat-accent, var(--cta));
    box-shadow: 0 8px 22px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
}
.hero-cat-card:hover::before { opacity: .12; }
.hero-cat-card:hover .hero-cat-chevron { transform: translateX(2px); opacity: 1; }

.hero-cat-icon {
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.85);
    border-radius: 14px;
    padding: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    transition: transform .3s ease;
}
.hero-cat-card:hover .hero-cat-icon { transform: rotate(-3deg) scale(1.06); }

.hero-cat-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    margin-top: 4px;
}

.hero-cat-chevron {
    position: absolute;
    top: 8px; right: 8px;
    color: var(--cat-accent, var(--cta));
    opacity: 0;
    transition: transform .25s ease, opacity .25s ease;
}

@media (max-width: 640px) {
    .hero-cat-icon { width: 44px; height: 44px; padding: 4px; }
    .hero-cat-label { font-size: 11.5px; }
    .hero-upload-btn { height: 46px; padding: 0 22px; font-size: 14px; }
}

/* Arama çubuğu */
.search-bar {
    display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1px solid var(--line);
    border-radius: 999px; padding: 6px 14px;
    width: 100%; max-width: 360px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.search-bar input { flex: 1; border: 0; outline: 0; font-size: 14px; background: transparent; }

/* Sıralama dropdown */
.sort-dropdown {
    background: #fff; border: 1px solid var(--line);
    border-radius: 999px; padding: 6px 14px;
    font-size: 14px;
}

/* Etiket chip'leri */
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; border: 1px solid var(--line);
    border-radius: 999px; padding: 4px 12px;
    font-size: 13px; color: var(--ink);
}
.chip button { color: var(--muted); }
.chip:hover { border-color: var(--cta); }

/* ============================================================
   MASONRY GALERİ — Pinterest tarzı
   ============================================================ */
.masonry {
    column-count: 2;
    column-gap: 12px;
}
@media (min-width: 640px)  { .masonry { column-count: 3; column-gap: 14px; } }
@media (min-width: 1024px) { .masonry { column-count: 4; column-gap: 16px; } }
@media (min-width: 1280px) { .masonry { column-count: 5; column-gap: 16px; } }

.masonry-item {
    break-inside: avoid;
    margin-bottom: 12px;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.06);
    transition: transform .25s ease, box-shadow .25s ease;
    display: block;
    position: relative;
}
.masonry-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,.10);
}
.masonry-item img {
    width: 100%; height: auto; display: block;
    background: #f0f0f0;
}
.masonry-item .overlay {
    position: absolute; inset: auto 0 0 0;
    padding: 8px 10px;
    background: linear-gradient(transparent, rgba(0,0,0,.55));
    color: #fff; font-size: 12px;
    opacity: 0; transition: opacity .2s;
}
.masonry-item:hover .overlay { opacity: 1; }

/* "Devam" pagination butonu */
.btn-continue {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 28px; border-radius: 999px;
    background: var(--red); color: #fff; font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
    transition: background .2s, transform .2s;
}
.btn-continue:hover { background: var(--red-2); transform: translateY(-1px); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--bg); }
.footer-wave-wrap { overflow: hidden; pointer-events: none; }

.trust-badge {
    display: inline-flex; align-items: center; justify-content: center;
    height: 36px; padding: 0 18px; border-radius: 999px;
    font-size: 13px; font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

.market-pill, .social-pill {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 9px;
    font-size: 12px; font-weight: 700; color: #fff;
    overflow: hidden;
    flex-shrink: 0;
}
.market-pill img, .social-pill img {
    width: 100%; height: 100%; object-fit: contain;
    padding: 2px;
}
.social-pill.bg-white img, .market-pill.bg-white img {
    padding: 3px;
}

/* ============================================================
   ÜRÜN DETAY / KART
   ============================================================ */
.tag-pill {
    display: inline-flex; align-items: center;
    border: 1px solid var(--line); background: #fff;
    padding: 2px 10px; border-radius: 999px;
    font-size: 12px; color: var(--ink);
    margin-right: 6px; margin-bottom: 6px;
}

/* ============================================================
   FORM CONTROL
   ============================================================ */
.input {
    width: 100%;
    background: #fff; border: 1px solid var(--line);
    border-radius: 10px; padding: 10px 12px;
    font-size: 14px; color: var(--ink);
}
.input:focus {
    outline: 0; border-color: var(--cta);
    box-shadow: 0 0 0 3px rgba(45,127,249,.18);
}

/* ============================================================
   YARDIMCI
   ============================================================ */
.fade-in { animation: fadeIn .35s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }