/* SİTE FONTU — Bricolage Grotesque (OFL, css/fonts/OFL.txt). Gövde dahil TÜM site.
   Self-host: değişken font, wdth=100'e sabitlenip Latin + Latin Ext-A'ya
   (Türkçe dahil) indirgendi; eksenler wght 200–800 + opsz 12–96.
   Logo ("AURA LAB" yazısı) Yeseva One; o da artık self-host (css/fonts,
   OFL-YesevaOne.txt). Google Fonts'a hiç istek gitmiyor: ek bağlantı yok,
   ziyaretçi IP'si Google'a aktarılmıyor, uygulama çevrimdışı da logoyu çiziyor.
   Inter artık hiç yüklenmiyor. Yeni stiller font-family'yi ya inherit eder ya
   da var(--font-display) yazar. */
@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('fonts/BricolageGrotesque.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}
/* Yeseva One: Google'ın alt kümeleriyle aynı iki parça; tarayıcı yalnız
   sayfada geçen karakterlerin parçasını indirir (logo için latin, ~17 KB). */
@font-face {
    font-family: 'Yeseva One';
    src: url('fonts/YesevaOne-latin.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Yeseva One';
    src: url('fonts/YesevaOne-latin-ext.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root { --font-display: 'Bricolage Grotesque', system-ui, sans-serif; }

/* GENEL AYARLAR */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* YATAY TAŞMA KORUMASI: `hidden` html+body'yi kendi kaydırma kabı yapıyor ve
   tüm position:sticky öğeleri (mobil filtre çubuğu, navbar, forum paneli)
   bozuyordu. `clip` kaydırma kabı oluşturmaz; sticky çalışır. Eski motorlar
   için `hidden` yedek olarak kalır (MOBIL_BULGULAR.md css-touch-ux#2). */
html, body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
/* SAYFA ZEMİNİ: kırık beyaz dikey gradyan (tokenlar :root'ta, "SAYFA ZEMİNİ"
   başlığı altında). Gradyan BODY'ye değil HTML'e verilir — iOS Safari'de body
   üzerindeki background-attachment:fixed lastik-bant kaydırmasında zıplıyor.
   background-color düz yedek: gradyan desteklenmezse / yazdırmada tek ton kalır. */
html {
    min-height: 100%;
    background-color: var(--al-bg-mid);
    background-image: var(--al-bg);
    background-attachment: fixed;
    background-repeat: no-repeat;
}
/* MASAÜSTÜNDE ZEMİN BEYAZ (kullanıcı isteği). Gradyan yalnız mobilde kalır:
   uygulama düzeninde kartların sınırı zeminden ayrışmalı, PC'de ise sayfa
   ferah beyaz istendi. Ürün fotoğrafları mix-blend-mode:multiply kullandığı
   için beyaz zemin onlara zarar vermez (çarpım beyazda kimliktir).
   Eşik 769px: projedeki mobil/masaüstü sınırı (bkz. @media max-width:768px). */
@media (min-width: 769px) {
    html { background-color: #fff; background-image: none; }
}
body { font-family: var(--font-display); background: transparent; color: #292929; }
input, textarea, select, button, [contenteditable] { font-family: inherit; }
h1, h2, h3, h4, h5, h6,
.p-name, .rank-name, .mh-name, .rutinim-chip-name, .rutinim-detail-name,
#search-suggestions .ss-name, .as-row-name, .tp-name, .dc-tp-name,
.product-title, .sim-name, .pd-card-name, .pr-mp-name, .pd-mp-name, .rvh-name,
.cmp-name { font-family: var(--font-display); }
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
button, a, label, summary, select, [role="button"], [onclick] { cursor: pointer; }
button:disabled, [aria-disabled="true"] { cursor: default; }

.container {
    max-width: 1200px;
    margin: 0 auto;
    width: 92%; /* PC'de yanlarda temiz bir boşluk, mobilde %4 emniyet payı bırakır */
}

/* NAVBAR */
.navbar {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    padding: 15px 0;
}
.logo { display: flex; align-items: center; gap: 12px; font-size: 1.5rem; font-weight: bold; }
.nav-logo-img { height: 40px; }
.nav-links { display: flex; list-style: none; gap: clamp(5px, 1.5vw, 17px); }
.nav-links a { text-decoration: none; color: #000; font-weight: 500; }

/* ARKA PLAN AYARI */
.main-background-wrapper {
    background-image: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85));
    background-size: cover;
    background-position: center;
    width: 100%;
    padding-bottom: 60px;
}

/* HERO */
.hero { text-align: center; padding: 60px 0; }
.main-title { font-family: var(--font-display); font-size: 3.5rem; color: #2f483c; margin-bottom: 20px; }
.sub-title { font-size: 1.1rem; color: #444; margin-bottom: 30px; }

/* SEARCH */
.search-container { max-width: 600px; margin: 0 auto; position: relative; display: flex; }
.search-input { width: 100%; padding: 15px 25px; border: 1.5px solid #ccc; border-radius: 30px; outline: none; }
.search-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; }
.search-btn img { width: 20px; }

/* KATEGORİLER */
.categories { padding: 40px 0; }
.category-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr); 
    gap: 15px;
    max-width: 4000px;
    margin: 0 auto;
}
.category-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; }
.cat-image-square { 
    width: 100px; 
    height: 100px; 
    background-color: white; 
    border-radius: 20px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-bottom: 10px; 
    overflow: hidden; 
    border: 1px solid #eee; 
}
.cat-image-square img { width: 100%; height: 100%; object-fit: cover; }
.cat-text { font-size: 0.8rem; color: #444; font-weight: 500; text-align: center; transition: text-decoration 0.15s; }

/* Kategori kısayol hover efekti */
.category-item {
    display: flex; flex-direction: column; align-items: center;
    text-decoration: none; transition: transform 0.2s;
}
.category-item:hover { transform: translateY(-6px); }
.category-item:hover .cat-text { text-decoration: underline; color: #2f483c; }

/* YILDIZ RENKLENDİRME */
.colored-star {
    display: inline-block;
    -webkit-mask-image: url(''); 
    mask-image: url('');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    background-color: #507563;
}

.title-star { width: 22px; height: 22px; margin-right: 8px; vertical-align: middle; }
/* .stars-container KALDIRILDI — tek üreticisi js/urunler.js'in 5 yıldızlı
   masaüstü satırıydı; kart artık her ekranda .p-rating (tek yıldız + puan)
   basıyor. */
.star-icon { width: 16px; height: 16px; }
.star-icon.grey { background-color: #ddd; }

/* ALT ALANLAR */
.section-padding { padding: 50px 0; background: transparent; }
.section-title { font-size: 1.4rem; margin-bottom: 25px; display: flex; align-items: center; }
.product-card { background: white; border: 1px solid #eee; padding: 15px; border-radius: 12px; text-align: center; max-width: 250px; }
.product-card .p-img { width: 100%; border-radius: 8px; }

.filter-btn { background: white; border: 1px solid #ccc; padding: 8px 20px; border-radius: 5px; cursor: pointer; margin-right: 10px; }
.filter-btn.active { background: #fdf2f0; border-color: #834333; }

/* ÜRÜNLER SAYFASI YERLEŞİMİ */
.main-container {
    display: flex;
    padding: 40px 0;
    gap: 30px;
}

/* SIDEBAR (SOL PANEL) */
.sidebar {
    width: 280px;
    flex-shrink: 0;
}

.sidebar-main-title {
    font-size: 1.2rem;
    margin-bottom: 25px;
    color: #2f483c;
    border-bottom: 2px solid #507563;
    padding-bottom: 10px;
}

.filter-section {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.filter-section:last-child {
    border-bottom: none;
}

.filter-title {
    font-size: 1rem;
    margin-bottom: 15px;
    font-weight: 600;
}

/* Filtre Listeleri */
.filter-list label {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 0;
    font-size: 0.85rem;
    cursor: pointer;
    gap: 8px;
}

.filter-name {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    flex: 1;
}

.brand-text {
    line-height: 1.4;
    word-break: break-word;
}

.filter-count {
    color: #888;
    white-space: nowrap;
    padding-top: 2px;
}

.filter-list.scrollable {
    max-height: 200px;
    overflow-y: auto;
    padding-right: 10px;
}

/* Filtre Butonları */
.filter-buttons {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.f-btn {
    text-align: left;
    padding: 10px 15px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: 0.2s;
}

.f-btn:hover { background: #f9f9f9; border-color: #507563; }
.f-btn.active { background: #2f483c; color: white; border-color: #2f483c; }

/* Cilt Tipi Kutuları */
.filter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.f-rect-btn {
    padding: 12px;
    background: white;
    border: 1px solid #ddd;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: 0.2s;
}

.f-rect-btn:hover { background: #f9f9f9; border-color: #507563; }
.f-rect-btn.active { background: #2f483c; color: white; border-color: #2f483c; }

/* SAĞ TARAF (Ürün Alanı) */
.content-area {
    flex-grow: 1;
}

.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.page-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
}

.sort-select {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* ÜRÜN KARTLARI (Katalog stili) */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 25px;
    align-items: stretch;
}

/* Ürün kartı hover: yukarı kalk + gölge */
.product-card {
    background: white;
    border: none;
    padding: 15px;
    border-radius: 16px;
    text-align: center;
    cursor: pointer;
    /* Kart bir <a> OLABİLİR: urunler.html'in prerender ettiği kartlar <a href>,
       js/productCard.js de <a> basar. Bu iki satır olmadan tarayıcı varsayılanı
       devreye girip kart metnini MAVİ + ALTI ÇİZİLİ gösteriyordu (JS kartları
       değiştirene kadar ve JS'siz ziyaretçi/crawler için kalıcı olarak). */
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    
    /* Equal height flex layout */
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0; /* Grid kolonunu içerik genişletmesin (50/50 bölünme garantisi) */
}

.product-card .p-details {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: flex-start;
}

.product-card .p-details > *:last-child {
    margin-top: auto; /* Pushes the bottom items down */
}
@media (hover: hover) {
    .product-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    }
}

/* Resim kapsayıcı: tam kare, bembeyaz */
.p-image-wrapper {
    position: relative;
    /* Zemin KARTLA AYNI beyaz (--al-img-bg). Eskiden #fafafa idi ki yuvarlak
       köşe görünsün; ama alttaki img multiply olduğu için fotoğrafın beyaz fonu
       kartın değil BU KABIN zeminine eriyordu → her ürünün arkasında gri kare.
       Yuvarlak köşe artık görünmüyor, bilinçli tercih. */
    background: var(--al-img-bg);
    border-radius: var(--al-radius-img);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Tam sığması için */
    padding: 12px; /* Biraz daha ufak görünmesi için */
    display: block;
    mix-blend-mode: multiply; /* Beyaz olmayan zeminleri eritmek için */
    transition: transform 0.3s ease;
}

.wishlist-icon {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 5;
    cursor: pointer;
    line-height: 1;
    user-select: none;
}
.wishlist-heart {
    width: 22px;
    height: 22px;
    fill: rgba(0,0,0,0.15);
    stroke: #fff;
    stroke-width: 1.5;
    transition: fill 0.2s, transform 0.2s;
}
@media (hover: hover) {
    .wishlist-icon:hover .wishlist-heart {
        fill: #e31837;
        transform: scale(1.15);
    }
}
.wishlist-heart.fav-active {
    fill: #e31837;
    stroke: #e31837;
}
/* MOBİL: liste kartlarında kalp YOK — favorileme ürün DETAYINDAN yapılır
   (js/urun.js #detail-fav-btn). Küçük kartta kalp hem yanlışlıkla basılıyor hem
   de sağ üst köşeyi meşgul ediyordu. PC'de kalp aynen durur.
   Kapsam .products-page ile sınırlı; bu sayede detay sayfasındaki kalp ve
   favoriler.html'deki "favoriden çıkar" kalpleri etkilenmez.
   İşaretleme/JS değişmedi (js/urunler.js:1272) — yalnız görünürlük. */
@media (max-width: 768px) {
    .products-page .product-card .wishlist-icon { display: none; }
}

/* Navbar Favorilerim */
.nav-fav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: #000;
    font-weight: 500;
}
.nav-fav-link svg {
    width: 18px;
    height: 18px;
    fill: #e31837;
}
.fav-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background: #e31837;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 900;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
}
/* Tartışma bildirim noktası (js/notifications.js) — sayısız kırmızı nokta */
.aura-notif-dot {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e31837;
    box-shadow: 0 0 0 2px #fff;
    pointer-events: none;
    z-index: 5;
}
.mobile-tab-bar .tab-item { position: relative; }
/* Alt menüdeki Tartışmalar sekmesi — sarı, zil rozetiyle aynı dil.
   Etiket genişlikleri farklı olduğu için tek ortak offset yetmiyor; ikonun
   sağ üstüne oturması için sekmenin ortasına göre hesaplanır.
   İKONUN SAĞ ÜSTÜ: sekme 62px hapta ikon(22) + boşluk(3) + etiket(11) = 36px
   yüksekliğinde ortalanır → ikon üstü 13px'te başlar. Nokta oraya oturur.
   Altta DEĞİL: orayı artık "Forum" etiketi kaplıyor. */
.mobile-tab-bar a[href="tartismalar.html"] .aura-notif-dot {
    width: 7px;
    height: 7px;
    background: #E95C15;
    box-shadow: 0 0 0 1.5px #fff;
    /* base kuralın top/right'ı iptal edilmeli. */
    bottom: auto;
    right: auto;
    top: 11px;
    left: calc(50% + 6px);
    transform: none;
}
.tr-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 0.70rem;
    color: #fff;
    background: #e31837;
    font-weight: bold;
    padding: 3px 6px;
    border-radius: 4px;
    z-index: 10;
    pointer-events: none;
}

.p-details {
    padding: 15px 0;
    text-align: center;
}

.p-brand { font-weight: bold; color: #555; font-size: 0.9rem; }
.p-name { font-size: 0.85rem; margin: 5px 0; line-height: 1.4; min-height: 40px; }
.p-price { font-weight: 900; color: #2f483c; font-size: 1rem; }

/* ══ ÜRÜN KARTI — ana sayfadaki trend kartı (.tp-card) dili ══
   Yazılar SOLDA, puan markanın hizasında tek yıldız, altta cilt tipi damgası,
   görsel kareden bir tık uzun (1:1,15). Bu kurallar eskiden yalnız mobildeydi
   (@media max-width:768px); masaüstü ayrı bir dil kullanıyordu (ortalı yazı +
   her kartta 5 yıldızlı satır). Tek görünüm istendiği için media query'den
   çıkarılıp buraya alındı — artık PC'de de birebir aynı kart basılıyor.

   Kapsam .products-page ızgarasıyla SINIRLI: taban .product-card'ı mobil ana
   sayfadaki .mh-reco-strip de paylaşıyor, oraya sızmamalı.
   DİKKAT: js/urunler.js şablonuna satır içi stil eklemeyin — satır içi stil
   CSS'i yendiği için bu blok sessizce ölür (bir kez yaşandı). */
.products-page .products-grid .product-card {
    border: 1px solid #eaeaea;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    padding: 12px;
    text-align: left;
}
.products-page .products-grid .p-image-wrapper {
    aspect-ratio: 1 / 1.15;
}
/* Ortalama: kutu kapsayıcıyı birebir doldurur, bitmap'i object-position ortalar.
   width/height:auto verilirse object-fit devre dışı kalır ve konum üç ayrı hesaba
   bağlanır (flex min-width:auto kırpması, yüzdelik max-height'ın aspect-ratio
   yüksekliğine çözülmesi, görselin kendi oranı) — bunlar motorlar arasında farklı
   çözülüp görseli kutunun ortasından kaydırıyordu. padding:0 ise görseli 20px
   yuvarlak köşeye yapıştırıyordu. Kutu şekli (1:1,15) aynen korunur. */
.products-page .products-grid .p-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 10px;
}
/* Uyum halkası sağ üstte durduğu için kalp SOL üste alınır (mobilde kalp zaten
   gizli — bkz. satır 368 civarı). Kapsam yine yalnız Ürünler ızgarası. */
.products-page .products-grid .wishlist-icon { left: 10px; right: auto; }
.products-page .products-grid .p-details {
    padding: 12px 0 0; text-align: left;
}
/* Marka solda, puan sağda — .tp-brandrow ile aynı düzen. */
.products-page .products-grid .p-brandrow {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.products-page .products-grid .p-brand {
    font-size: 0.7rem; font-weight: 700; color: #888;
    text-transform: uppercase; letter-spacing: 0.5px;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.products-page .products-grid .p-rating {
    display: inline; font-size: 0.65rem; color: #ffb800; font-weight: 600; flex-shrink: 0;
}
/* min-height em cinsinden: puntoyla birlikte ölçeklenir, hep tam 2 satır. */
.products-page .products-grid .p-name {
    font-size: 0.8rem; font-weight: 600; color: #111;
    line-height: 1.3; height: auto; min-height: 2.6em; margin-top: 4px;
    overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
}
.products-page .products-grid .p-skintags {
    margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-start;
}
.products-page .products-grid .p-skintag {
    background: #eaf2ef; color: #2f483c; padding: 3px 8px; border-radius: 10px;
    font-size: 0.65rem; font-weight: 600; border: 1px solid #507563;
}

/* MODAL VE ANALİZ CSS */
.modal-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:1000; align-items:center; justify-content:center; }
.modal-content { background:#fff; width:90%; max-width:900px; border-radius:15px; padding:30px; position:relative; max-height:90vh; overflow-y:auto; }
.modal-close-btn { position:absolute; top:20px; right:20px; background:none; border:none; font-size:2rem; cursor:pointer; color:#555; }
.modal-header { display:flex; gap:30px; margin-bottom:30px; border-bottom:1px solid #eee; padding-bottom:20px; }
.m-img-wrapper { width:200px; flex-shrink:0; }
.m-img-wrapper img { width:100%; border-radius:var(--al-radius-img); }
.m-info h2 { font-size:1.8rem; margin:10px 0; color:#222; }
.m-brand { font-size:1rem; color:#888; font-weight:600; }
.m-price { font-size:1.4rem; color:#2f483c; font-weight: 900; margin-bottom:15px; }
.concerns-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.concerns-tags span { background:#e8f4fd; color:#0056b3; padding:5px 12px; border-radius:15px; font-size:0.85rem; border:1px solid #b8daff; }
.analysis-box { display:flex; gap:40px; background:#fafafa; border:1px solid #eee; border-radius:12px; padding:30px; flex-wrap:wrap; }
.analysis-title { font-size:1.2rem; margin-bottom:5px; }
.analysis-subtitle { font-size:0.9rem; color:#777; margin-bottom:20px; }
.analysis-left { flex:1; min-width:250px; }
.analysis-right { flex:2; min-width:300px; }
.chart-container { display:flex; align-items:center; gap:30px; }
.donut-chart { width:140px; height:140px; border-radius:50%; position:relative; background:#eee; }
.donut-chart::after { content:''; width:80px; height:80px; background:#fafafa; border-radius:50%; position:absolute; top:30px; left:30px; }
.chart-legend { display:flex; flex-direction:column; gap:12px; }
.l-item { font-size:0.9rem; display:flex; align-items:center; gap:8px; }
.dot { width:12px; height:12px; border-radius:50%; display:inline-block; }
.dot.green { background:#4caf50; }
.dot.yellow { background:#ffc107; }
.dot.red { background:#f44336; }
.dot.grey { background:#e0e0e0; }
.acc-item { background:#fff; border:1px solid #eee; border-radius:8px; margin-bottom:10px; padding:15px; cursor:pointer; }
.acc-header { display:flex; justify-content:space-between; align-items:center; font-weight:600; }
.acc-summary { display:flex; gap:15px; font-size:0.85rem; }
.acc-summary span.s-good { color:#007bff; background:#e8f4fd; padding:3px 8px; border-radius:10px; }
.acc-summary span.s-bad { color:#dc3545; background:#fceced; padding:3px 8px; border-radius:10px; }
.acc-body { margin-top:15px; display:none; font-size:0.9rem; padding-top:15px; border-top:1px solid #f1f1f1; }
.acc-body.open { display:block; }

/* ── TARTIŞMALAR (FORUM) SAYFASI ── */
/* Tartışma sayfası daha geniş (sağ panel tam görünsün) */
.forum-container { max-width: 1360px; }

.forum-layout {
    display: flex;
    padding: 30px 2.5%;
    gap: 34px;
    background: #f8f9fa;
    min-height: 100vh;
}

.forum-sidebar {
    width: 218px;
    flex-shrink: 0;
}

.f-sidebar-group {
    margin-bottom: 30px;
}

.f-sidebar-title {
    font-size: 1.1rem;
    font-weight: 900;
    color: #111;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.f-sidebar-list {
    list-style: none;
}

.f-sidebar-list li a {
    display: block;
    padding: 10px 12px;
    color: #555;
    text-decoration: none;
    font-size: 0.9rem;
    border-radius: 8px;
    transition: 0.2s;
}

.f-sidebar-list li a:hover, .f-sidebar-list li a.active {
    background: #fff;
    color: #2f483c;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.forum-feed {
    flex-grow: 1;
    max-width: 860px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Akıştaki kart alt boşluğu — eskiden js/tartismalar.js inline yazıyordu. */
.forum-feed .discussion-card {
    margin-bottom: 30px;
}

/* ── SAĞ PANEL: Haftanın Yıldızları (Glow) ── */
.forum-rank-panel { width: 272px; flex-shrink: 0; position: sticky; top: 20px; height: fit-content; display: flex; flex-direction: column; gap: 14px; }
.rank-card { background: #fff; border: 1px solid #eaeaea; border-radius: 14px; padding: 16px; box-shadow: 0 4px 14px rgba(0,0,0,0.04); }
.rank-head { display: flex; align-items: center; gap: 7px; font-size: 0.98rem; font-weight: 800; color: #1e332a; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #f0f2f1; }
.rank-star { font-size: 1rem; }
.rank-list { display: flex; flex-direction: column; gap: 4px; }
.rank-empty { font-size: 0.82rem; color: #9aa8a1; padding: 6px 2px; }
.rank-row { display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 10px; text-decoration: none; transition: background .15s; }
.rank-row:hover { background: #f5f8f6; }
/* Kendi satırında ZEMİN YOK: yeşilimsi vurgu (eskiden #eef4f1) gereksiz bulundu.
   Satırı yine "Sen" etiketi (.rank-me-tag) işaret ediyor; js/gamification.js:120
   .me sınıfını basmaya devam eder — geri istenirse kanca yerinde. */
.rank-no { width: 26px; text-align: center; font-weight: 800; font-size: 0.85rem; color: #9aa8a1; flex-shrink: 0; }
.rank-row.top .rank-no { color: #2f483c; }
.rank-medal { width: 26px; height: 26px; flex-shrink: 0; object-fit: contain; }
.rank-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #f2f2f2; }
.rank-info { flex: 1; min-width: 0; }
.rank-name { font-size: 0.86rem; font-weight: 700; color: #1e332a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-me-tag { font-size: 0.62rem; font-weight: 800; color: #e31837; text-transform: uppercase; }
.rank-pts { font-size: 0.85rem; font-weight: 800; color: #e31837; white-space: nowrap; flex-shrink: 0; }
.rank-howto .rank-howto-title { font-size: 0.85rem; font-weight: 800; color: #1e332a; margin-bottom: 8px; }
.rank-howto ul { list-style: none; margin: 0; padding: 0; }
.rank-howto li { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: #556; padding: 3px 0; }
.rank-howto li b { color: #2f483c; font-weight: 800; }
.rank-howto-note { font-size: 0.7rem; color: #9aa8a1; margin-top: 8px; line-height: 1.4; }
@media (max-width: 1024px) { .forum-rank-panel { display: none; } }
.rank-podium { vertical-align: middle; object-fit: contain; }
/* .buy-lottie KALDIRILDI: Satın Al'daki çanta ikonu yerini metnin sağındaki
   düz oka bıraktı (bkz. js/urun.js act-bar). */
/* Ana sayfa "Haftanın Yıldızları" — tüm boyutlarda görünür, PC'de geniş + belirgin */
/* Gri ŞERİT: bölüm .container'ın DIŞINDA blok eleman olduğu için arka plan
   kendiliğinden kenardan kenara uzanır — 100vw / negatif margin hilesi GEREKMEZ
   (ikisi de kaydırma çubuğu genişliği yüzünden yatay taşma riski taşırdı).
   Köşe yarıçapı YOK: şerit sayfayı boydan boya kesmeli. Ton sayfa zemininden
   (≈#f5f6f3) bir tık koyu — kartların saf beyazı griden net ayrışsın diye. */
.home-rank-section { background: #eceeed; }
/* gap 30: kartların kenarlığı geri geldi ama şerit zemininde iki beyaz kutu
   arasındaki nefes payı bu genişlikte doğru duruyor — daraltmayın. */
.home-rank-wrap { max-width: 940px; margin: 0 auto; display: flex; flex-direction: column; gap: 30px; }
/* Başlık artık kutunun DIŞINDA (.home-section-head), bu yüzden buradaki
   .rank-head / .rank-podium override'ları kaldırıldı. Taban kuralları
   (yukarıda) tartismalar.html'in sağ paneli hâlâ kullanıyor — silinmemeli.
   Başlık kartlarla aynı genişlikte hizalanmalı: .container 1200px ama
   .home-rank-wrap 940px; kısıtlanmazsa başlık geniş ekranda kartlardan
   ~130px solda başlar. */
.home-rank-section .home-section-head { max-width: 940px; margin: 0 auto 24px; }
/* Kutu GERİ GELDİ: bölüm artık kırık beyaz şeridin üstünde duruyor, liste
   şeritten saf beyaz kutusuyla ayrılıyor. Beyaz/kenarlık/yarıçap/gölge taban
   .rank-card kuralından (yukarıda) miras kalıyor — o kural tartismalar.html'in
   sağ panelini de besliyor, SİLİNMEMELİ. Ana sayfada kart çok daha geniş
   olduğu için sadece dolgu büyütülüyor. Aynı kural .rank-howto'yu da kapsar:
   iki kart da beyaz kalsın. */
.home-rank-section .rank-card { padding: 18px 20px; }
/* gap:0 şart: .rank-list'in 4px'i kalsaydı çizgi satırlardan kopuk dururdu. */
.home-rank-section .rank-list { gap: 0; }
/* Yatay padding 0 → satırlar bölüm başlığıyla aynı hizada başlar. Köşe yarıçapı
   kutu içinde anlamlıydı, düz listede :hover/.me zemini kenardan kenara olmalı. */
.home-rank-section .rank-row { padding: 12px 0; border-radius: 0; }
/* Çizgi yalnız satır ARASINA: border-bottom olsaydı son satırın altında boşta bir
   çizgi kalırdı. */
.home-rank-section .rank-row + .rank-row { border-top: 1px solid #ececec; }
.home-rank-section .rank-av { width: 42px; height: 42px; }
.home-rank-section .rank-no { width: 26px; font-size: 0.95rem; }
.home-rank-section .rank-name { font-size: 0.95rem; }
.home-rank-section .rank-pts { font-size: 0.98rem; }
.home-rank-section .rank-howto-title { font-size: 0.95rem; }
.home-rank-section .rank-howto li { font-size: 0.88rem; padding: 4px 0; }
@media (min-width: 768px) {
  .home-rank-wrap { flex-direction: row; align-items: flex-start; }
  .home-rank-wrap > .rank-card:first-child { flex: 1; min-width: 0; }
  .home-rank-wrap > .rank-howto { width: 300px; flex-shrink: 0; }
}

/* ── Profil Glow puanı rozeti (pp altında, kırmızı) ── */
.prof-glow { display: inline-flex; align-items: baseline; gap: 5px; margin: 0 auto 10px; padding: 5px 14px; background: #fdecef; color: #e31837; border: 1px solid #f6c9d2; border-radius: 20px; font-weight: 800; font-size: 1.05rem; line-height: 1; }
/* Günlük hediye butonu (profil sol-üst) */
.glow-gift { position: absolute; top: 15px; left: 15px; display: inline-flex; align-items: center; gap: 6px; background: #eaf4ef; color: #2f483c; border: 1px solid #cfe3d8; border-radius: 20px; padding: 6px 12px 6px 10px; font-weight: 800; font-size: 0.8rem; cursor: pointer; transition: background .15s, transform .1s; }
.glow-gift:hover { background: #dcefe5; }
.glow-gift:active { transform: scale(0.96); }
.glow-gift svg { flex-shrink: 0; }
.glow-gift.cooldown { background: #f4f5f5; color: #8a9a92; border-color: #e6e8e7; cursor: default; }
.glow-gift.cooldown:hover { background: #f4f5f5; }
.prof-glow { cursor: pointer; user-select: none; transition: transform .15s; }
@keyframes profGlowBump { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.prof-glow.bump { animation: profGlowBump .45s ease; }
.prof-glow .prof-glow-unit { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.5px; }
/* GP açıklama popover'ı */
.prof-glow-info { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 10px; width: min(270px, 88vw); background: #fff; border: 1px solid #eee; border-radius: 14px; box-shadow: 0 12px 34px rgba(0,0,0,0.16); padding: 14px 16px; text-align: left; z-index: 40; }
.prof-glow-info.open { display: block; }
.prof-glow-info::before { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-bottom-color: #fff; filter: drop-shadow(0 -1px 0 #eee); }
.prof-glow-info .pgi-title { font-size: 0.92rem; font-weight: 800; color: #1e332a; margin-bottom: 4px; }
.prof-glow-info .pgi-desc { font-size: 0.8rem; color: #556; line-height: 1.45; margin: 0 0 10px; }
.prof-glow-info .pgi-list { list-style: none; margin: 0 0 10px; padding: 0; }
.prof-glow-info .pgi-list li { display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; color: #333; padding: 4px 0; border-bottom: 1px solid #f4f6f5; }
.prof-glow-info .pgi-list li:last-child { border-bottom: none; }
.prof-glow-info .pgi-list b { color: #e31837; font-weight: 800; }
.prof-glow-info .pgi-note { font-size: 0.72rem; color: #9aa8a1; line-height: 1.45; }

/* ── Glow madalya rozetleri (haftalık ilk 3) ── */
.glow-av { position: relative; display: inline-block; line-height: 0; }
.glow-medal { position: absolute; top: -5px; right: -5px; width: 18px; height: 18px; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); z-index: 4; }
.rank-medal { flex-shrink: 0; vertical-align: middle; }
/* Profil ana avatarı için madalya biraz daha büyük */
#prof-glow-medal { position: absolute; top: -8px; right: -6px; width: 56px; height: 56px; pointer-events: none; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3)); z-index: 5; }

/* TARTIŞMA KARTI */
.discussion-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    border: 1px solid #f0f0f0;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}

/* YENİ TARTIŞMA KARTI YERLEŞİMİ (Global) */
.dc-main-layout {
    display: flex;
    gap: 15px;
    flex: 1;
}
.dc-text-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.dc-media-and-tag {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.discussion-card:hover {
    transform: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

/* Kartın içindeki metinlerin yazı imlecini (I-beam) göstermemesi için */
.discussion-card * {
    cursor: pointer;
}

.discussion-card .dc-comment-input, 
.discussion-card .dc-tag-search {
    cursor: text;
}

.dc-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.dc-user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dc-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: #eee;
}

.dc-user-meta .dc-name {
    font-weight: 900;
    font-size: 0.95rem;
    color: #222;
}

.dc-user-meta .dc-tags {
    font-size: 0.75rem;
    color: #888;
    background: #f0f2f1;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 6px;
}

.dc-time-views {
    font-size: 0.8rem;
    color: #aaa;
    margin-top: 2px;
}

.dc-category-badge {
    background: #e9f5ef;
    color: #2f483c;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 900;
}

.dc-title {
    font-size: 1.4rem;
    font-weight: 900;
    margin-bottom: 12px;
    color: #111;
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

.dc-content {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.6;
    margin-bottom: 20px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

.dc-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.dc-images img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: var(--al-radius-img);
    border: 1px solid #eee;
}

/* ETİKETLİ ÜRÜN KARTI (Mini) */
.dc-tagged-product {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #fdfdfd;
    border: 1px solid #f0f0f0;
    padding: 12px;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: 0.2s;
}

.dc-tagged-product:hover {
    background: #f5f5f5;
    border-color: #ddd;
}

.dc-tp-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--al-radius-img-sm);   /* 60px künye — büyük token burada daire gibi durur */
    background: var(--al-img-bg);
}

.dc-tp-info {
    flex-grow: 1;
}

.dc-tp-brand {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #888;
    font-weight: 900;
}

.dc-tp-name {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 2px 0;
}

.dc-tp-rating {
    font-size: 0.8rem;
    color: #f39c12;
}

/* YÜZEN BUTON (FAB) */
.fab-btn {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 60px;
    height: 60px;
    background: #2f483c;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 10px 25px rgba(47,72,60,0.3);
    cursor: pointer;
    z-index: 999;
    border: none;
    transition: 0.3s;
}

.fab-btn:hover {
    transform: scale(1.1) rotate(90deg);
    background: #3e5d4e;
}

/* YENİ TARTIŞMA MODALI */
.post-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.post-modal-content {
    background: #fff;
    width: 95%;
    max-width: 600px;
    border-radius: 20px;
    padding: 30px;
    position: relative;
}

.pm-header {
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.pm-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.pm-input, .pm-textarea, .pm-select {
    width: 100%;
    padding: 12px 15px;
    border: 1.5px solid #eee;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
}

.pm-input:focus, .pm-textarea:focus {
    border-color: #2f483c;
}

.pm-textarea {
    height: 150px;
    resize: none;
}

.pm-submit {
    background: #2f483c;
    color: #fff;
    padding: 15px;
    border: none;
    border-radius: 10px;
    font-weight: 900;
    cursor: pointer;
}

.pm-product-search-results {
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-top: -10px;
    display: none;
}

.pm-search-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.85rem;
}

.pm-search-item:hover {
    background: #f5f5f5;
}
/* ── ANA SAYFA TARTIŞMA GRİDİ (2 SÜTUN) ── */
.trending-discussions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}



/* KART İÇİ ETKİLEŞİM İKONLARI */
.dc-actions {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #f5f5f5;
}

.dc-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    font-size: 0.9rem;
    font-weight: 500;
    transition: 0.2s;
}

.dc-action-btn:hover {
    color: #2f483c;
}

.dc-action-btn svg {
    width: 18px;
    height: 18px;
    /* fill özelliği SVG'nin kendi attribute/style'ından gelmesi için CSS'ten kaldırıldı */
}

.dc-action-btn.upvoted {
    color: #2f483c;
    font-weight: 900;
}
/* Kaydet (bookmark) — kaydedilince koyu yeşil dolu */
.upvote-btn.upvoted svg { fill: currentColor; }

/* CHIP FİLTRELER (Görseldeki stil) */
.chip-filters {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.chip-btn {
    padding: 10px 22px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: 0.2s;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.chip-btn:hover {
    background: #f8f9fa;
    border-color: #ddd;
}

.chip-btn.active {
    background: #111;
    color: #fff;
    border-color: #111;
}

/* NAV-FAV-LINK DÜZELTME */
.nav-fav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: inherit;
    font-weight: 500;
}

.nav-fav-link:hover svg {
    fill: #e31837;
}

.nav-links li a.active {
    color: #2f483c;
    font-weight: 900;
}
/* YORUM BÖLÜMÜ STİLLERİ */
.dc-comments-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
    display: none; /* JS ile açılacak */
}

.dc-comments-section.active {
    display: block;
}

.dc-comments-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.dc-comment-item {
    background: #f9f9f9;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.85rem;
}

.dc-comment-user {
    font-weight: 900;
    color: #333;
    margin-bottom: 4px;
    display: block;
}

.dc-comment-content {
    color: #555;
    line-height: 1.4;
}

.dc-comment-input-wrapper {
    display: flex;
    gap: 10px;
}

.dc-comment-input {
    flex-grow: 1;
    padding: 10px 15px;
    border: 1.5px solid #eee;
    border-radius: 20px;
    font-size: 0.85rem;
    outline: none;
    transition: 0.2s;
}

.dc-comment-input:focus {
    border-color: #2f483c;
    background: #fff;
}

/* dc-comment-send inline stillerle çalışması için css tarafı temizlendi */

/* TREND ÜRÜNLER STİLLERİ */
.trending-products {
    background: transparent !important;
    padding: 20px 0 !important;
    margin-top: 10px;
}
.trending-products .container {
    background: #e8efe9;
    border-radius: 20px;
    padding: 25px 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}

.tp-scroll-container {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding: 0 0 20px 0;
    /* margin-left:-15px KALDIRILDI: kartın iç paddingini dengeleyip *görseli*
       başlıkla hizalamak içindi. Görsel artık kendi zeminli çerçevesinde
       (.tp-img-wrapper), yani hizalama referansı kartın kenarı — negatif marj
       ilk kartın çerçevesini başlığın soluna taşırıyordu. */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(47, 72, 60, 0.2) transparent;
}

.tp-scroll-container::-webkit-scrollbar {
    height: 6px; /* slightly thicker to be visible if we add borders */
}

.tp-scroll-container::-webkit-scrollbar-track {
    background: transparent;
    margin: 0 10vw; /* This works in some WebKit versions to add space at ends */
}

.tp-scroll-container::-webkit-scrollbar-thumb {
    background: rgba(47, 72, 60, 0.4);
    border-radius: 10px;
}

.tp-scroll-container::-webkit-scrollbar-button {
    display: none; /* removes arrows */
}

.tp-scroll-container:hover::-webkit-scrollbar-thumb {
    background: rgba(47, 72, 60, 0.6);
}

/* Trend ürün kartı = ürün detaydaki "Markanın Diğer Ürünleri" kartı (.sim-card,
   css/urun.css:467-515). Ölçüler, punto ve görsel davranışı BİREBİR aynı tutulur;
   tek fark marka satırının sağındaki yıldız (.sim-card'da yıldız yok). */
.tp-card {
    flex: 0 0 200px;
    background: #fff;
    border-radius: 16px;
    padding: 15px;
    border: 1px solid #eaeaea;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tp-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    border-color: #ccc;
}

.tp-img-wrapper {
    width: 100%;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--al-radius-img);
    overflow: hidden;
    background: var(--al-img-bg);
    margin-bottom: 12px;
}

/* contain + multiply: ambalaj görselleri kırpılmadan, kendi beyaz zeminleri
   çerçeveye karışarak otursun (cover, ürünün kenarlarını kesiyordu). */
.tp-img {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.tp-info {
    width: 100%;
    flex-grow: 1;
}

/* Marka solda, yıldız sağda — aynı satır, aynı punto. */
.tp-brandrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.tp-brand {
    font-size: 0.75rem;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* min-height (px/rem değil em): mobil blok font-size'ı 0.8rem'e düşürüyor, em
   elemanın kendi puntosuna bağlı olduğu için iki breakpoint'te de tam 2 satır. */
.tp-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111;
    line-height: 1.3;
    min-height: 2.6em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.tp-rating {
    font-size: 0.75rem;
    color: #ffb800;
    font-weight: 600;
    flex-shrink: 0;
}

/* ══ MOBİL ALT MENÜ (Bottom Tab Bar) ══ */
.mobile-tab-bar {
    display: none; /* PC'de gizli */
}

/* ═══════════════════════════════════════════ */
/* ════════ MOBİL OPTİMİZASYON (≤768px) ═══════ */
/* ═══════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── NAVBAR: sadece logo görünsün, linkler gizlensin ── */
    .navbar {
        padding: 8px 0;
    }
    .navbar .container {
        justify-content: center !important;
    }
    .nav-links {
        display: none !important;
    }
    .logo {
        font-size: 1.2rem;
        gap: 8px;
    }
    .nav-logo-img {
        height: 30px;
    }

    /* ── MOBİL ALT MENÜ GÖSTER ── */
    /* YÜZEN DÜZEN: <nav> artık görünür bir yüzey DEĞİL, yalnız iki kutuyu yan
       yana tutan şeffaf bir kap — solda beyaz hap (.tab-pill, 4 sekme), sağda
       ayrı yeşil daire (.tab-fab, AuraScan). Kenardan kenara dolu beyaz barın
       yerini aldı: sayfa zemini artık kırık beyaz gradyan (style.css :1) ve
       dipte dolu beyaz bir şerit oradan kopuk duruyordu. */
    .mobile-tab-bar {
        display: flex !important;
        position: fixed;
        left: 16px;
        right: 16px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        align-items: center;
        gap: 7px;
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        z-index: 9999;
    }
    /* Beyaz hap: dört sekmeyi taşıyan asıl yüzey. Kalan genişliği tamamen alır
       (flex:1), daire kendi ölçüsünde kalır → hap ekran genişliğine göre esner.
       min-width:0 şart: içindeki nowrap etiketler yoksa hapı taşırır. */
    .tab-pill {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        height: 62px;
        padding: 0 4px;
        background: #fff;
        border-radius: 999px;
        /* İki katmanlı gölge: geniş+yumuşak olan yüzdürür, dar olan kenarı
           tanımlar. Kırık beyaz zeminde tek gölge yeterince ayırmıyordu. */
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.05);
    }
    /* ── Sağdaki AuraScan düğmesi ──
       Hero kartıyla aynı marka gradyanı; hapla EŞİT yükseklikte (62px) olduğu
       için ikisi aynı hatta oturur. Artık barın üstüne taşmıyor (eski
       margin-top:-16px kalktı), dolayısıyla eski "beyaz halka" sorunu da yok. */
    .tab-fab {
        flex: 0 0 62px;
        width: 62px;
        height: 62px;
        border-radius: 50%;
        background: linear-gradient(135deg, #2f483c 0%, #1e332a 100%);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        border: none;
        /* Hapın gölgesiyle aynı aile — ikisi tek bir katmanda yüzsün. */
        box-shadow: 0 8px 20px rgba(47, 72, 60, 0.28);
        transition: transform 0.2s var(--al-spring), box-shadow 0.2s var(--al-ease);
    }
    .tab-fab:active { transform: scale(0.94); }
    .tab-fab svg { width: 26px; height: 26px; display: block; }
    /* Menünün ARKASINDAKİ geçiş: yukarıda saydamdan başlayıp aşağıda sayfa
       zeminine (--al-bg-bot) doğru koyulaşır. İki iş görür — içerik menünün
       altına girerken yumuşak kaybolur, ve iOS lastik-bant kaydırmasında
       menünün ardından sayfa zemini sızmaz. Eskiden burada 120px'lik DOLU
       beyaz bir dikdörtgen vardı; kırık beyaz zeminde göze batardı. */
    .mobile-tab-bar::before {
        content: '';
        position: absolute;
        z-index: -1;
        left: -16px;
        right: -16px;
        /* 60px yukarıdan başlar: geçişin tamamı menünün ÜSTÜNDE biter, menü
           hizasına gelindiğinde zemin tamamen kapalıdır. Daha kısa tutulursa
           hapla daire ARASINDAKİ 7px'lik boşluktan ve hapın yuvarlak köşe
           oyuklarından sayfa içeriği hayalet gibi sızıyor. */
        top: -60px;
        bottom: calc(-10px - env(safe-area-inset-bottom) - 60px);
        pointer-events: none;
        background: linear-gradient(180deg,
            rgba(243, 244, 241, 0) 0%,
            rgba(243, 244, 241, 0.92) 32%,
            var(--al-bg-bot) 46%,
            var(--al-bg-bot) 100%);
    }
    /* İkon ÜSTTE, kısa etiket ALTTA (js/bottom-nav.js .tab-label). Aktif ve
       pasif sekmeler AYNI renkte — fark ikonun DOLU mu İNCE mi olduğu
       (solid/outline) ve pasif sekmedeki HAFİF opaklık düşüşü. Opaklık
       bağlantının kendisinde olduğu için etiketi de kapsar. */
    .tab-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        text-decoration: none;
        color: #282928;
        opacity: 1;
        /* Dört sekme hapın iç genişliğini eşit böler. */
        flex: 1 1 0;
        min-width: 0;
        padding: 0 2px;
    }
    /* Seçili olmayan sekmeler hafifçe soluk — aktif olan tam opak kalır. */
    .tab-item:not(.active) {
        opacity: 0.65;
    }
    .tab-item svg {
        /* 24 → 22: altına gelen etikete yer açmak için. */
        width: 22px;
        height: 22px;
        display: block;
    }
    /* nowrap ŞART: "Anasayfa" 360px ekranda sekme genişliğinin sınırında;
       sarmasına izin verilirse hap iki satıra çıkıp yüksekliği bozulur. */
    .tab-label {
        font-size: 11px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: -0.01em;
        white-space: nowrap;
    }

    /* ── Body alt boşluk (yüzen menü içeriği örtmesin) ──
       Sınıfı js/bottom-nav.js menüyü BASTIĞINDA ekliyor. Alt sayfalarda
       (ürün detayı, cilt analizi, rutinim …) menü olmadığı için bu boşluk da
       verilmez; yoksa sayfanın altında boş bir şerit kalırdı.
       94 = 62 (hap) + 10 (alt pay) + 22 (nefes payı). */
    body.has-tab-bar {
        padding-bottom: calc(94px + env(safe-area-inset-bottom));
    }

    /* ── Logo: Diğer sayfalarda sadece ikon, ana sayfada yazı görünsün ── */
    .logo span {
        display: none;
    }
    .home-page .logo span {
        display: inline;
    }
    .navbar .container {
        justify-content: flex-start !important;
    }
    .home-page .navbar .container {
        justify-content: flex-start !important;
    }
    
    /* ── Üst Bar Gizleme: Sadece ana sayfada görünsün ── */
    body:not(.home-page) .navbar {
        display: none !important;
    }

    /* ── MEGA MENU (mobilde gizle) ── */
    .mega-nav {
        display: none;
    }

    /* ── HERO ── */
    .hero {
        padding: 30px 0;
    }
    .main-title {
        font-size: 1.8rem;
        margin-bottom: 12px;
    }
    .sub-title {
        font-size: 0.85rem;
        margin-bottom: 20px;
    }
    .search-input {
        padding: 12px 18px;
        font-size: 0.85rem;
    }

    /* ── KATEGORİ GRİDİ (5'er 5'er) ── */
    .category-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 8px;
    }
    .cat-image-square {
        width: 56px;
        height: 56px;
        border-radius: 14px;
    }
    .cat-text {
        font-size: 0.6rem;
    }

    /* ── TREND ÜRÜNLER (yatay kaydırma) ──
       Kart ölçüleri BURADA DEĞİL: dosyanın sonundaki "MOBILE OVERRIDES FOR
       CAROUSEL" bloğunda tek yerden yönetiliyor. Aynı kuralların iki blokta
       yazılı olması 120px/125px çelişkisi üretiyordu. */

    /* ── TREND TARTIŞMALAR (alt alta - tek sütun) ── */
    .trending-discussions-grid {
        grid-template-columns: 1fr !important;
        gap: 10px;
        margin-left: 0;
    }
    .discussion-card {
        padding: 8px; /* Sığması için padding kısıldı (yaş/cilt + etiket için biraz daha ferah) */
        min-width: 0; /* Flex/Grid taşmasını önler */
    }
    .discussion-card .dc-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    
    /* YENİ: Mobilde metin max 3 satır olsun */
    .discussion-card .dc-content {
        -webkit-line-clamp: 3 !important; 
        margin-bottom: 15px !important;
    }

    /* YENİ: Foto ve Tag yan yana sığsın */
    .discussion-card .dc-media-and-tag {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        align-items: stretch !important;
    }
    .discussion-card .dc-media-gallery,
    .discussion-card .dc-tagged-prod {
        margin-bottom: 0 !important;
        flex: 1 !important; /* Alanı tam ikiye bölsün */
        width: 0 !important; 
        max-width: calc(50% - 5px) !important; /* Tek başına kaldığında da ikili görünümdeki boyutunda olsun */
        height: auto !important;
        aspect-ratio: 130/185 !important; /* Orantılı dikey dikdörtgen */
    }
    .discussion-card .dc-media-gallery img:first-child {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: auto !important;
        object-fit: cover;
    }
    .discussion-card .dc-tagged-prod img {
        max-height: none !important; /* İçeriği doldursun */
    }
    .dc-avatar {
        width: 36px !important;
        height: 36px !important;
    }
    /* Tartışma kartı avatarındaki madalya küçük avatara denk gelsin */
    .discussion-card .glow-av .glow-medal { width: 15px; height: 15px; top: -4px; right: -4px; }
    .dc-user-meta .dc-name {
        font-size: 0.65rem;
    }
    .dc-user-meta .dc-tags {
        font-size: 0.55rem;
        padding: 1px 4px;
        margin-left: 4px;
    }
    /* Yaş + cilt tipi HER ZAMAN tek satır yan yana (inline flex-wrap:wrap'i ez) */
    .dc-user-meta > div:last-child {
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }
    .dc-user-meta > div:last-child > span {
        white-space: nowrap;
    }
    .dc-time-views {
        font-size: 0.6rem;
    }
    .dc-category-badge {
        font-size: 0.55rem;
        padding: 2px 6px;
        align-self: flex-start;
        /* Uzun kategori düzgün 2 satıra sarsın ve ORTALI dursun (sol yaslı görünmesin) */
        text-align: center;
        max-width: 100px;
        white-space: normal;
        line-height: 1.15;
    }
    .dc-title {
        font-size: 0.85rem;
        margin-bottom: 6px;
    }
    .dc-content {
        font-size: 0.75rem;
        margin-bottom: 10px;
        line-height: 1.4;
    }
    .dc-actions {
        gap: 8px;
    }

    /* ── SECTION BAŞLIKLARI ── */
    .section-title {
        font-size: 1.1rem;
    }
    .section-padding {
        padding: 30px 0;
    }

    /* ── CHIP FİLTRELER ── */
    .chip-filters {
        gap: 6px;
        margin-bottom: 15px;
    }
    .chip-btn {
        padding: 6px 12px;
        font-size: 0.75rem;
    }
}

/* ═══ ÇOK KÜÇÜK EKRANLAR (≤400px) ═══ */
@media (max-width: 400px) {
    .nav-links {
        gap: 6px;
    }
    .nav-links a {
        font-size: 0.6rem;
    }
    .main-title {
        font-size: 1.5rem;
    }
    .cat-image-square {
        width: 48px;
        height: 48px;
    }
    .cat-text {
        font-size: 0.55rem;
    }
}

/* ═══ FORUM SAYFA MOBİL (≤768px) ═══ */
@media (max-width: 768px) {
    .forum-layout {
        flex-direction: column !important;
        padding: 15px 12px !important;
        gap: 15px !important;
    }
    .forum-sidebar {
        width: 100% !important;
        display: flex;
        flex-direction: column; /* Sekmeler ve Çipler alt alta gelsin */
        gap: 8px;
        padding-bottom: 5px;
    }
    .f-sidebar-group {
        flex-shrink: 0;
        margin-bottom: 0;
    }
    .f-sidebar-title, .f-sidebar-list {
        display: none; /* Mobilde eski sidebar'ı gizliyoruz */
    }
    
    .forum-mode-tabs {
        display: flex;
        gap: 0;
        border-bottom: 1px solid #eaeaea;
        margin-bottom: 8px;
    }
    .forum-mode-btn {
        flex: 1;
        background: none;
        border: none;
        padding: 12px 0;
        font-size: 0.95rem;
        font-weight: 400; /* Daha ince */
        color: #555;
        cursor: pointer;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
        transition: 0.2s;
    }
    .forum-mode-btn.active {
        color: #2f483c; /* Yeşil referans rengi */
        font-weight: 600;
        border-bottom: 2px solid #2f483c;
    }

    .forum-category-chips {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 8px;
        margin-bottom: 5px;
        -webkit-overflow-scrolling: touch;
    }
    .forum-category-chips::-webkit-scrollbar {
        display: none; /* Scrollbar'ı gizle */
    }

    /* FAB butonunu tab barın üstüne al.
       AuraScan dairesi artık alt menünün SAĞ ucunda (eskiden ortadaydı), yani
       tam bu düğmenin altında. İkisi rastgele yan yana düşmüş gibi durmasın
       diye AYNI DİKEY EKSENE oturtulur: menü sağdan 16px içeride ve daire 62px
       → merkezi sağdan 47px; bu düğme 50px → right = 47 - 25 = 22px.
       bottom: menünün üstü 72px'te (10 alt pay + 62 yükseklik) + 16px aralık. */
    .fab-btn {
        bottom: 88px !important;
        right: 22px !important;
        width: 50px !important;
        height: 50px !important;
        font-size: 1.5rem !important;
        /* Menünün ARKASINDAKİ geçiş katmanı (.mobile-tab-bar::before) bu
           düğmenin bulunduğu şeride kadar uzanıyor. O katman z-index:9999 olan
           menünün yığın bağlamı içinde; düğme 999'da kalırsa altında ezilip
           soluk görünür. İkisi üst üste BİNMİYOR, yalnız sıralama gerekiyor. */
        z-index: 10000 !important;
    }
}

/* ═══ dc-tags (cilt tipi) GLOBAL düzeltme ═══ */
.dc-tags {
    font-size: 0.65rem;
    color: #888;
    background: #f0f2f5;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 6px;
    white-space: nowrap;
    display: inline;
    vertical-align: middle;
}

/* ══ FORUM MODE TABS & CHIPS (mobilde görünür) ══ */
.forum-mode-tabs,
.forum-category-chips {
    display: none; /* PC'de gizli */
}
.sidebar-desktop-only {
    display: block; /* PC'de görünür */
}

@media (max-width: 768px) {
    .forum-mode-tabs {
        display: flex;
        gap: 0;
        border-bottom: 2px solid #eee;
        margin-bottom: 12px;
    }
    .forum-mode-btn {
        flex: 1;
        background: none;
        border: none;
        padding: 10px 0;
        font-size: 0.85rem;
        font-weight: 500; /* Başlıklar da biraz inceltildi */
        color: #999;
        cursor: pointer;
        border-bottom: 2px solid transparent;
        margin-bottom: -2px;
        transition: 0.2s;
    }
    .forum-mode-btn.active {
        color: #2f483c;
        border-bottom-color: #2f483c;
    }

    .forum-category-chips {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 8px;
        margin-bottom: 10px;
    }
    .forum-chip {
        white-space: nowrap;
        padding: 6px 14px;
        border-radius: 20px;
        border: 1px solid #e0e0e0; /* Çok ince ve açık renk çerçeve */
        background: #fff;
        font-size: 0.8rem;
        font-weight: 400; /* İncelik referansla aynı */
        color: #333;
        cursor: pointer;
        transition: 0.2s;
        flex-shrink: 0;
    }
    .forum-chip.active {
        background: #222; /* Koyu arka plan */
        color: #fff;
        border-color: #222;
        font-weight: 500;
    }

    .sidebar-desktop-only {
        display: none !important;
    }

    /* Ana sayfa trend dc-tags daha ufak */
    .trending-discussions-grid .dc-tags {
        font-size: 0.5rem;
        padding: 1px 5px;
    }

    /* Section başlıkları sola */
    .section-title {
        justify-content: flex-start;
    }

    /* ══ ÜRÜNLER SAYFASI MOBİL ══ */
    .mobile-top-controls {
        display: block; /* Sadece mobilde görünür */
        background: #fff;
        border-bottom: 1px solid #eee;
        position: sticky;
        top: 0;
        z-index: 1000;
        /* Barın üst/alt boşluğu TEK yerden (.m-filter-bar padding) gelsin ki
           iki taraf eşit olsun; buradaki ek alt pay asimetri yaratıyordu. */
        padding-bottom: 0;
        transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    
    .m-cat-tabs {
        display: flex;
        padding: 10px 0; /* Yan boşlukları kapatalım ki çizgiler tam otursun, veya 15px kalsın */
        margin: 0 15px;
        border-bottom: 1px solid #f5f5f5;
        align-items: center;
    }
    .m-cat-btn {
        flex: 1;
        background: none;
        border: none;
        font-size: 0.85rem;
        font-weight: 600;
        color: #555;
        padding: 5px 0;
        cursor: pointer;
        position: relative;
        text-align: center;
    }
    /* Sağ tarafa kısa çizgi (Son eleman hariç) */
    .m-cat-btn:not(:last-child)::before {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 14px; /* Kısa çizgi */
        width: 1px;
        background-color: rgba(0, 0, 0, 0.15); /* İnce şeffaf siyah */
    }
    .m-cat-btn.active {
        color: #2f483c;
        text-shadow: 0 0 0.5px #2f483c;
    }
    .m-cat-btn.active::after {
        content: '';
        position: absolute;
        bottom: -11px;
        left: 50%;
        transform: translateX(-50%);
        width: 80%; /* Çizgi sekme genişliğinin %80'i olsun ki bitişik durmasınlar */
        height: 2px;
        background: #2f483c;
        border-radius: 2px;
    }

    .m-subcat-panel {
        position: fixed;
        bottom: -100%;
        left: 0;
        width: 100vw;
        height: 70vh; /* Ekranın alt %70'ini kaplar */
        background: #fff;
        z-index: 10005; /* Overlay'in de üzerinde */
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.15);
        padding: 20px;
        transition: bottom 0.3s ease;
        overflow-y: auto;
    }
    .m-subcat-panel.open {
        bottom: 0;
    }
    .m-subcat-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
    .m-subcat-btn {
        text-align: left;
        background: none;
        border: none;
        font-size: 0.9rem;
        font-weight: 500;
        color: #444;
        cursor: pointer;
        padding: 5px 0;
    }
    .m-subcat-btn.active {
        color: #2f483c;
        font-weight: 900;
        text-decoration: underline;
    }

    .m-filter-bar {
        display: flex;
        justify-content: space-between; /* Biri sağa biri sola */
        align-items: center;
        padding: 12px 15px;   /* üst = alt: bar ince gri çizgiye eşit uzaklıkta durur */
    }
    .m-sort-select {
        border: none;
        background: transparent;
        font-size: 0.8rem;
        font-weight: 500;
        color: #555;
        outline: none;
        cursor: pointer;
        text-align: right;
        margin: 0;
        padding: 0;
        height: 20px;
        line-height: 20px;
    }
    .m-filter-btn {
        background: none;
        border: none;
        font-weight: 600;
        color: #111;
        font-size: 0.85rem;
        padding: 0;
        margin: 0;
        height: 20px;
        line-height: 20px;
        cursor: pointer;
        text-decoration: none; /* Varsayılan alt çizgi kaldırıldı */
    }
    .m-filter-btn:active {
        text-decoration: underline; /* Basılı tutarken altı çizilir */
    }

    /* Off-Canvas Sidebar */
    .products-page .main-container {
        display: block; /* Grid'i boz mobilde */
        /* Masaüstündeki 40px üst pay mobilde filtre barı ile sayaç satırı
           arasında kocaman bir boşluk bırakıyordu — sayaç/sıralama yukarı alınır. */
        padding: 14px 0 24px;
    }
    .products-page .sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: 85%;
        max-width: 320px;
        height: 100vh;
        background: #fff;
        z-index: 10001; /* Overlay üstü */
        overflow-y: auto;
        padding: 20px;
        transition: left 0.3s ease;
        box-shadow: 2px 0 15px rgba(0,0,0,0.15);
        display: block !important; /* Mobilde her zaman render edilsin ama solda kalsın */
    }
    .products-page .sidebar.open {
        left: 0;
    }
    .filter-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0.4);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        z-index: 10000;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .filter-overlay.open {
        display: block;
        opacity: 1;
    }
    .sidebar-close-btn {
        display: block;
        position: absolute;
        top: 15px;
        right: 15px;
        background: none;
        border: none;
        font-size: 1.8rem;
        cursor: pointer;
        color: #333;
        z-index: 10;
    }

    /* Ürünler Grid (Yan Yana 2) — minmax(0,1fr): içerik ne olursa olsun tam 50/50 */
    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
    }
    /* Kartların mobilde sığması için font boyutları */
    .product-card .p-brand { font-size: 0.75rem; }
    .product-card .p-name { font-size: 0.85rem; }

    /* Kart görünümü (sola yaslı yazı, .p-brandrow, 2 satır clamp, damgalar…)
       ARTIK MOBİL-ÖZEL DEĞİL: kurallar taban seviyeye taşındı (bu dosyada
       "ÜRÜN KARTI — ana sayfadaki trend kartı dili" bloğu), masaüstü de aynı
       kartı basıyor. Burada yalnız gerçekten mobile ait olanlar kalır. */

    /* Mobilde Breadcrumb'ı gizle */
    #breadcrumb { display: none !important; }
    
    /* Mobilde masaüstü Sıralama seçicisini (arama çubuğu yanındaki) gizle */
    .content-header .sort-select { display: none !important; }
}

/* MEGA MENU GLOBAL */
.mega-nav { background: #fff; border-bottom: 1px solid #eee; position: sticky; top: 0; z-index: 100; }
.mega-nav-inner { display: flex; padding: 0; gap: 0; }
.mega-item { position: relative; }
.mega-item > a {
    display: block; padding: 16px 20px; font-size: 0.95rem; font-weight: 600;
    color: #222; text-decoration: none; border-bottom: 3px solid transparent; transition: 0.2s;
    white-space: nowrap;
}
.mega-item:hover > a, .mega-item > a.active { background-color: #f7f7f7; border-bottom-color: #2f483c; color: #2f483c; }

.mega-dropdown {
    display: none; position: absolute; top: 100%; left: 0; background: #fff;
    box-shadow: 0 8px 40px rgba(0,0,0,0.12); border-top: 2px solid #2f483c;
    padding: 30px; min-width: 700px; z-index: 999;
}
.mega-item:hover .mega-dropdown { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

.mega-col h4 { font-size: 0.9rem; font-weight: 900; margin-bottom: 12px; color: #111; }
.mega-col a {
    display: block; padding: 6px 0; font-size: 0.85rem; color: #555;
    text-decoration: none; transition: color 0.15s, padding-left 0.15s;
}
.mega-col a:hover { color: #2f483c; padding-left: 4px; }

/* Masaüstünde gizlenecekler */
@media (min-width: 769px) {
    .mobile-top-controls,
    .filter-overlay,
    .sidebar-close-btn,
    .m-subcat-panel {
        display: none !important;
    }
}

/* Sidebar Fix */
.sidebar {
    width: 280px;
    min-width: 280px;
    flex-shrink: 0;
}

/* Yorum Cevap Formu (Reddit tarzı için gizli) */
.dc-reply-form {
    display: none;
}
.dc-reply-form.active {
    display: block;
}

/* Toggle node and line fixes */
/* Removed straight line pseudo-elements per user request */
.dc-thread-toggle-node::after { display: none !important; }
.dc-thread-toggle-wrapper {
    display: flex;
    align-items: center;
    margin-top: 10px;
    margin-left: 20px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: #666;
}
.dc-thread-toggle-wrapper:hover { color: #111; }
.dc-thread-toggle-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #eee;
    color: #555;
    margin-right: 8px;
    font-weight: bold;
    font-size: 14px;
    line-height: 1;
}

/* NAVBAR-HERO (Global for non-home pages) */
.navbar-hero {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: white;
    padding: 0 5%;
}
.navbar-hero .nh-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1400px;
    margin: 0 auto;
    height: 65px;
    position: relative;
}
.navbar-hero .nh-logo {
    position: absolute;
    left: 0;
    font-family: 'Yeseva One', serif;
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--al-green);
    text-decoration: none;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.navbar-hero .nh-logo .lab-green { color: #2f483c; }
.navbar-hero .nh-logo img { width: 36px; height: 36px; object-fit: contain; }
.navbar-hero .nh-links {
    display: flex;
    align-items: center;
    gap: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.navbar-hero .nh-links a {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 400;
    color: #333;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: color 0.2s;
}
.navbar-hero .nh-links a:hover { color: #2f483c; }
.navbar-hero .nh-links a.active { color: #2f483c; font-weight: 600; }

@media (max-width: 768px) {
    .navbar-hero { display: none !important; }
}

/* ══ KATEGORİ BÖLÜMLERİ (masaüstü/tablet karşılama ekranı) ══
   Filtresiz açılışta düz ızgara yerine kategori kategori bölümler; her bölümde
   2 SATIR kart. Mobilde HİÇ basılmaz — orada kategori mozaiği (#pl-discover)
   var, bu yüzden kurallar 768.02px eşiğinin üstünde kalır.

   `.pl-grup-grid` ayrıca `products-grid` sınıfını da taşır (js/urunler.js
   renderKategoriBolumleri): sütun kırılımları ve kart stilleri aşağıdaki
   `.products-page .products-grid` kurallarından OLDUĞU GİBİ devralınır. Burada
   yalnız "2 satır" sınırı tanımlanır. */
.pl-gruplar[hidden] { display: none; }

/* `hidden` ÖZNİTELİĞİ TEK BAŞINA YETMEZ. Tarayıcının UA stylesheet'i onu
   `display: none` ile uyguluyor, ama bu dosyadaki `.products-grid { display:
   grid }` yazar kuralı UA kuralını yener — yani `productsGrid.hidden = true`
   yapılınca ızgara DOM'da gizli sayılır fakat ekranda durmaya devam eder.
   Ölçüldü: bölüm kipinde 60 prerender kartı 4.873px'lik bir blok olarak
   kategori bölümlerinin ÜSTÜNDE görünüyordu.
   Özgüllük 0,3,0 → aşağıdaki kırılım kurallarını (0,2,0) da yener. */
.products-page .products-grid[hidden] { display: none; }

@media (min-width: 768.02px) {
    .pl-grup { margin-bottom: 42px; }
    .pl-grup-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 16px;
        padding-bottom: 10px;
        border-bottom: 1px solid #f0f0f0;
    }
    .pl-grup-title {
        font-family: var(--font-display);
        font-size: 1.35rem;
        color: #2f483c;
        margin: 0;
        font-weight: 700;
    }
    .pl-grup-all {
        font-size: 0.85rem;
        font-weight: 600;
        color: #2f483c;
        text-decoration: none;
        white-space: nowrap;
        letter-spacing: 0.3px;
    }
    .pl-grup-all:hover { text-decoration: underline; }

    .pl-grup-cta { text-align: center; padding: 8px 0 40px; }
    .pl-grup-cta a {
        display: inline-block;
        padding: 13px 34px;
        border: 1px solid #2f483c;
        border-radius: 999px;
        color: #2f483c;
        font-weight: 600;
        font-size: 0.92rem;
        text-decoration: none;
        transition: background 0.2s, color 0.2s;
    }
    .pl-grup-cta a:hover { background: #2f483c; color: #fff; }

    /* ── 2 SATIR SINIRI ──
       JS her bölüme 8 kart basar (js/categorySections.js BOLUM_URUN); sütun
       sayısı medya sorgusuyla değiştiği için fazlalık BURADA gizlenir.
       Alternatif olan "JS'te resize dinleyip kart sayısını yeniden hesapla"
       yolu sütun sayısına İKİNCİ bir doğruluk kaynağı yaratırdı — kırılım
       eşiği bir yerde güncellenip diğerinde unutulduğunda satır sayısı sessizce
       bozulur. Eşikler aşağıdaki sütun kurallarıyla BİREBİR aynı olmak zorunda.

       Aralıklar KAPALI yazılıyor (`and (max-width: …)`), üst kırılımda
       `display`i geri açan bir kural YOK: kartın taban `display` değerini
       tekrar etmek zorunda kalmamak için — orada block/flex ayrımı değişirse
       geri açma kuralı kartı sessizce bozardı. */
}
@media (min-width: 768.02px) and (max-width: 1024px) {
    /* 2 sütun → 4 kart */
    .pl-grup-grid > .product-card:nth-child(n+5) { display: none; }
}
@media (min-width: 1024.02px) and (max-width: 1199.98px) {
    /* 3 sütun → 6 kart */
    .pl-grup-grid > .product-card:nth-child(n+7) { display: none; }
}
/* ≥1200px: 4 sütun → 8 kartın hepsi görünür, gizleme kuralı yok. */

/* ── MASAÜSTÜ (≥1200px): ürünler ızgarası 4 sütun ──
   Taban kural `repeat(auto-fill, minmax(220px, 1fr))`; kullanılabilir genişlik
   1200px .container − 280px sidebar − 30px boşluk = 890px, yani 4 sütun için
   gereken 4×220+75=955px'e ULAŞMIYOR ve auto-fill 3'te kalıyor. Sütun sayısı
   `auto-fill`e bırakılırsa 4'e çıkarmanın tek yolu kart alt sınırını 200px'in
   altına indirmek; o da 1288px'ten dar ekranlarda yine 3 veriyordu. Sütun
   sayısı istenen sayı olduğu için AÇIKÇA yazılıyor.
   Eşik 1200px: bu genişlikte kart 180px'e iner — mobil 2 sütun kartıyla aynı
   ölçü, yani kanıtlanmış bir taban. Daha dar masaüstlerinde (1025–1199px)
   taban kural devrede kalır ve 3 sütun gösterilir. */
@media (min-width: 1200px) {
    .products-page .products-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 22px 18px;
    }
}

/* ── DAR MASAÜSTÜ (1025–1199px): 3 sütun ──
   Bu aralık taban `auto-fill` kuralına bırakılırsa 1100px'te grid 688px'e
   iniyor, 3 sütun için gereken 3×220+50=710px'i bulamıyor ve İKİ sütuna
   düşüyordu (kart 250px, ızgara seyrek). Ölçülmüş aralık, tahmin değil. */
/* Eşikler KESİRLİ: cihaz piksel oranı 1.25/1.5 olan ekranlarda viewport
   1024.8px gibi kesirli raporlanıyor; tam sayı `min-width: 1025px` o ekranlarda
   EŞLEŞMİYOR ve ızgara taban kurala düşüyordu (ölçüldü: vw=1025 → 2 sütun). */
@media (min-width: 1024.02px) and (max-width: 1199.98px) {
    .products-page .products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px 18px;
    }
}

/* ── TABLET (769–1024px): ürünler yan yana 2 + üst bar bitişik ── */
@media (min-width: 768.02px) and (max-width: 1024px) {
    /* Ürünler: sidebar daralt + grid'i 2 sütuna zorla.
       `min-width` ŞART: .sidebar (style.css ~2093) `min-width: 280px` veriyor ve
       min-width, width'i yener — yalnız `width: 200px` yazıldığında sidebar
       tablette 280px kalıyordu. Ölçüldü: 780px viewport'ta grid 404px'e düşüyor,
       2 sütun için gereken 2×200+16=416px'in altında kalıyor ve ızgara TEK
       sütuna iniyordu. */
    .products-page .sidebar { width: 200px; min-width: 200px; }
    .products-page .main-container { gap: 20px; padding: 26px 0; }
    .products-page .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
    /* Üst bar tablette daha bitişik/sığsın */
    .navbar-hero { padding: 0 3%; }
    .navbar-hero .nh-links { gap: 20px; }
    .navbar-hero .nh-links a { font-size: 0.8rem; letter-spacing: 0.2px; }
    .navbar-hero .nh-logo { font-size: 1.35rem; }
}

/* 3 NOKTA MENÜSÜ DROPDOWN */
.dc-menu-container { position: relative; }
.dc-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-radius: 8px;
    z-index: 100;
    border: 1px solid #eee;
    overflow: hidden;
    min-width: 120px;
}
.dc-dropdown.show { display: block; }
.dc-dropdown-item {
    display: block;
    width: 100%;
    padding: 10px 20px;
    font-size: 0.85rem;
    cursor: pointer;
    background: none;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    text-align: left;
    color: #333;
    font-family: inherit;
}
.dc-dropdown-item:last-child { border-bottom: none; }
.dc-dropdown-item:hover { background: #f8f8f8; }
.dc-dropdown-item.delete { color: #e31837; }
.dc-dropdown-item.delete:hover { background: #fff5f5; }


/* --- NEW TAGGING MODAL --- */
.tag-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 13000; display: flex; flex-direction: column; overflow: hidden; animation: slideUp 0.3s ease; }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.tag-modal-content { display: flex; flex-direction: column; height: 100%; }
.tag-modal-header { padding: 15px 20px; display: flex; align-items: center; gap: 15px; }
.tag-modal-back { background: none; border: none; cursor: pointer; color: #333; display: flex; align-items: center; justify-content: center; padding: 5px; }
.tag-modal-search-wrapper { flex: 1; position: relative; }
.tag-modal-search { width: 100%; background: #f5f5f5; border: none; border-radius: 8px; padding: 10px 10px 10px 36px; outline: none; font-size: 0.95rem; font-family: var(--font-display); }
.tag-modal-search-wrapper svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #888; width: 18px; height: 18px; }
.tag-modal-tabs { display: flex; border-bottom: 1px solid #eee; }
.tag-tab { flex: 1; background: none; border: none; padding: 12px 0; font-size: 0.95rem; font-weight: 500; color: #666; cursor: pointer; position: relative; user-select: none; -webkit-user-select: none; }
.tag-tab.active { color: #111; font-weight: 600; }
.tag-tab.active::after { content: ''; position: absolute; bottom: -1px; left: 20%; width: 60%; height: 3px; background: #e3a6a1; border-radius: 3px 3px 0 0; }
.tag-modal-body { flex: 1; overflow-y: auto; background: #fff; overscroll-behavior: contain; }
.tag-tab-content { display: none; padding: 0 20px; }
.tag-tab-content.active { display: block; }
.tag-filters-bar { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #eee; font-size: 0.85rem; color: #888; }
.tag-sort-btn { background: none; border: 1px solid #ddd; padding: 6px 12px; border-radius: 6px; cursor: pointer; color: #333; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.tag-list-item { display: flex; align-items: center; gap: 15px; padding: 15px 0; border-bottom: 1px solid #f5f5f5; cursor: pointer; transition: background 0.2s; }
.tag-list-item:hover { background: #fafafa; }
.tag-list-img { width: 45px; height: 45px; object-fit: contain; border-radius: var(--al-radius-img-sm); flex-shrink: 0; }
.tag-list-info { flex: 1; overflow: hidden; }
.tag-list-brand { font-weight: 900; font-size: 0.9rem; color: #111; text-transform: uppercase; margin-bottom: 2px; }
.tag-list-name { font-size: 0.85rem; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.tag-list-rating { font-size: 0.8rem; color: #333; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.tag-list-rating span { color: #888; font-weight: 400; }
.tag-brand-avatar { width: 50px; height: 50px; border-radius: 50%; background: #fff; border: 1px solid #eee; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.1rem; color: #333; flex-shrink: 0; }
.tag-brand-name { font-weight: 600; font-size: 0.95rem; color: #111; }
@media (min-width: 768px) { .tag-modal-overlay { background: rgba(0,0,0,0.5); justify-content: center; align-items: center; } .tag-modal-content { width: 450px; height: 80vh; max-height: 700px; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.1); } }


/* ==========================================================================
   SITE FOOTER (AURA LAB)
   ========================================================================== */
.site-footer {
    background-color: #fafafa;
    border-top: 1px solid #eaeaea;
    padding: 64px 0 28px;
    font-family: var(--font-display);
    color: #4a4a4a;
    margin-top: 40px;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 40px;
    align-items: start;
}

/* İletişim sütunu (footer-contact.js ile enjekte edilir) */
.footer-contact-list { list-style: none; padding: 0; margin: 0; }
.footer-contact-item {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 14px; color: #555; font-size: 0.9rem;
}
.footer-contact-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--al-green); }
.footer-contact-item a { color: #555; text-decoration: none; transition: color 0.2s; word-break: break-word; }
.footer-contact-item a:hover { color: var(--al-green); text-decoration: underline; }

.footer-logo {
    display: block;
    font-family: 'Yeseva One', serif;
    font-size: 1.8rem;
    color: var(--al-green);
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.footer-mission {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #666;
    max-width: 300px;
}

.footer-heading {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: #2f483c;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

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

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #555;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: var(--al-green);
    text-decoration: underline;
}

.footer-bottom {
    border-top: 1px solid #eaeaea;
    padding-top: 20px;
    text-align: center;
}

.footer-copyright {
    font-size: 0.85rem;
    color: #888;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .footer-mission {
        max-width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════
   TASTE-SKILL · DESIGN TOKENS & ANIMATION SYSTEM
   DESIGN_VARIANCE:6  MOTION_INTENSITY:7  VISUAL_DENSITY:4
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Color tokens */
  --al-green:       #2f483c;
  --al-green-dark:  #1e332a;
  --al-green-light: #e9f5ef;
  --al-emerald:     #10b981;
  --al-red:         #e31837;
  --al-black:       #111;

  /* ── SAYFA ZEMİNİ (kırık beyaz gradyan) ──
     Paneller SAF BEYAZ (--al-surface) kalır, sayfa zemini yukarıdan aşağı
     hafifçe kırılır. Amaç: kart ile zemin aynı beyaz olduğu için sınırı yalnız
     gölgenin belli etmesi sorununu çözmek. Tonlar bilerek çok yakın — fark
     panelin kenarını göstermeye yetecek kadar, gradyanın kendisi fark
     edilmeyecek kadar az. KOYULAŞTIRMAYIN: ürün fotoğrafları
     mix-blend-mode:multiply kullanıyor (bkz. --al-img-bg). */
  --al-bg-top:  #fdfdfc;
  --al-bg-mid:  #f8f9f7;
  --al-bg-bot:  #f3f4f1;
  --al-bg:      linear-gradient(180deg, var(--al-bg-top) 0%, var(--al-bg-mid) 46%, var(--al-bg-bot) 100%);
  --al-surface: #ffffff;   /* paneller/kartlar — değişmiyor, artık zeminden ayrışıyor */

  /* Easing tokens */
  --al-ease:   cubic-bezier(0.4, 0, 0.2, 1);
  --al-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --al-out:    cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadow tokens */
  --al-shadow-card:  0 4px 15px rgba(0,0,0,0.03);
  --al-shadow-hover: 0 20px 40px rgba(0,0,0,0.10);
  --al-shadow-fab:   0 10px 25px rgba(47,72,60,0.30);
  --al-shadow-fab-h: 0 16px 36px rgba(47,72,60,0.38);

  /* Ürün görseli tokenları — TEK doğruluk kaynağı.
     Görsel köşeleri sitede 12 ayrı yüzeyde render ediliyordu ve değerler
     dağınıktı (8/12/16px, bir kısmında hiç yoktu). Değiştirmek gerekirse
     SADECE burası düzenlenir; urun.css / karsilastir.css / admin.css ve
     gömülü <style> blokları style.css'ten SONRA yüklendiği için token
     hepsinde geçerli (inline style="" içinde de kullanılabilir). */
  --al-radius-img:    20px;   /* ürün görseli ve görsel çerçevesi */
  --al-radius-img-sm: 10px;   /* ≤60px künye görselleri — 20px onlarda daire gibi durur */
  /* Görsel çerçevesi zemini: KARTLA AYNI BEYAZ olmalı.
     Eskiden #fafafa idi, gerekçesi "yuvarlak köşe görünsün" diye karttan bir
     tık farklı olmasıydı. Ama ürün fotoğrafları opak BEYAZ kanvasa basılıyor
     (src/normalizeProductImages.js .flatten('#ffffff')) ve üzerlerinde
     mix-blend-mode:multiply var — multiply fotoğrafın beyazını KABIN zeminine
     eritiyor, kartın değil. Sonuç: beyaz kartın içinde her ürünün arkasında
     #fafafa'lık bir kare duruyordu ("resimlerin arkası beyaz/gri panel").
     #fff ile beyaz × beyaz = beyaz, fotoğraf karta tam karışır.
     KOYULAŞTIRMAYIN — panel geri gelir. Kutu hissi isteniyorsa zemin değil
     ince bir kenarlık kullanın. */
  --al-img-bg:        #ffffff;
}

/* ── SCROLL REVEAL ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s var(--al-ease),
              transform 0.65s var(--al-out);
}
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal][data-reveal-delay="100"] { transition-delay: 0.1s; }
[data-reveal][data-reveal-delay="150"] { transition-delay: 0.15s; }
[data-reveal][data-reveal-delay="200"] { transition-delay: 0.2s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ── CARD ENTRANCE ANIMATION ── */
@keyframes alCardIn {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* Product grid cards — nth-child stagger */
.products-grid .product-card {
  animation: alCardIn 0.45s var(--al-out) both;
}
.products-grid .product-card:nth-child(2)  { animation-delay: 55ms; }
.products-grid .product-card:nth-child(3)  { animation-delay: 110ms; }
.products-grid .product-card:nth-child(4)  { animation-delay: 165ms; }
.products-grid .product-card:nth-child(5)  { animation-delay: 220ms; }
.products-grid .product-card:nth-child(6)  { animation-delay: 275ms; }
.products-grid .product-card:nth-child(7)  { animation-delay: 330ms; }
.products-grid .product-card:nth-child(8)  { animation-delay: 385ms; }
.products-grid .product-card:nth-child(9)  { animation-delay: 440ms; }
.products-grid .product-card:nth-child(n+10) { animation-delay: 490ms; }

/* Homepage trending product cards */
.tp-scroll-container .tp-card {
  animation: alCardIn 0.45s var(--al-out) both;
}
.tp-scroll-container .tp-card:nth-child(2)  { animation-delay: 60ms; }
.tp-scroll-container .tp-card:nth-child(3)  { animation-delay: 120ms; }
.tp-scroll-container .tp-card:nth-child(4)  { animation-delay: 180ms; }
.tp-scroll-container .tp-card:nth-child(5)  { animation-delay: 240ms; }
.tp-scroll-container .tp-card:nth-child(n+6) { animation-delay: 300ms; }

/* Discussion cards */
#trending-grid .discussion-card,
.forum-feed .discussion-card {
  animation: alCardIn 0.45s var(--al-out) both;
}
#trending-grid .discussion-card:nth-child(2),
.forum-feed .discussion-card:nth-child(2) { animation-delay: 70ms; }
#trending-grid .discussion-card:nth-child(3),
.forum-feed .discussion-card:nth-child(3) { animation-delay: 140ms; }
#trending-grid .discussion-card:nth-child(4),
.forum-feed .discussion-card:nth-child(4) { animation-delay: 210ms; }
#trending-grid .discussion-card:nth-child(n+5),
.forum-feed .discussion-card:nth-child(n+5) { animation-delay: 280ms; }

@media (prefers-reduced-motion: reduce) {
  .product-card,
  .tp-card,
  .discussion-card { animation: none !important; }
}

/* ── ENHANCED PRODUCT CARD HOVER ── */
@media (hover: hover) {
  .product-card:hover {
    transform: translateY(-6px) scale(1.015) !important;
    box-shadow: var(--al-shadow-hover) !important;
  }
  .product-card:hover .p-image-wrapper img {
    transform: scale(1.06);
  }
  /* .tp-card:hover .tp-img zoom'u KALDIRILDI: görsel artık contain + multiply ile
     çerçeveye oturuyor, büyütünce kenarları kırpılıyordu. Ürün detaydaki .sim-card
     da zoom yapmıyor; kartın yukarı kalkma hover'ı ikisinde de duruyor. */
}

/* ── HERO TEXT ENTRANCE ── */
@keyframes alHeroIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.hero-text-area h2 {
  animation: alHeroIn 0.7s cubic-bezier(0.16,1,0.3,1) 0.28s both;
}
.hero-text-area p {
  animation: alHeroIn 0.7s cubic-bezier(0.16,1,0.3,1) 0.41s both;
}
.hero-text-area > div > a {
  animation: alHeroIn 0.7s cubic-bezier(0.16,1,0.3,1) 0.54s both;
}

@media (prefers-reduced-motion: reduce) {
  .hero-text-area h2,
  .hero-text-area p,
  .hero-text-area > div > a { animation: none; }
}

/* ── MODAL ENTRANCE ── */
@keyframes alModalIn {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ── FAB BUTTON — bounce entrance & enhanced hover ── */
@keyframes alFabIn {
  from { opacity: 0; transform: scale(0.4) rotate(-180deg); }
  to   { opacity: 1; transform: scale(1)   rotate(0deg);   }
}
.fab-btn {
  animation: alFabIn 0.55s var(--al-spring) 0.3s both;
}
.fab-btn:hover {
  transform: scale(1.12) rotate(90deg) !important;
  box-shadow: var(--al-shadow-fab-h) !important;
  background: #3a5949 !important;
  transition: transform 0.4s var(--al-spring),
              box-shadow 0.3s var(--al-ease),
              background 0.2s var(--al-ease) !important;
}
.fab-btn:active {
  transform: scale(0.93) rotate(45deg) !important;
  transition: transform 0.1s var(--al-ease) !important;
}
@media (prefers-reduced-motion: reduce) {
  .fab-btn { animation: none; }
  .fab-btn:hover { transform: scale(1.05) !important; }
  .fab-btn:active { transform: scale(0.97) !important; }
}

/* ── ENHANCED FORM FOCUS ── */
.pm-input:focus,
.pm-textarea:focus,
.pm-select:focus,
.dc-comment-input:focus {
  border-color: var(--al-green) !important;
  box-shadow: 0 0 0 3px rgba(47,72,60,0.13);
  background-color: #fff;
  outline: none;
}

/* ── FOCUS RING (accessibility) ── */
:focus-visible {
  outline: 2px solid var(--al-green);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── SHIMMER SKELETON ── */
@keyframes alShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.skeleton,
.skeleton-shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: alShimmer 1.6s infinite;
  border-radius: 10px;
}
@media (prefers-reduced-motion: reduce) {
  .skeleton, .skeleton-shimmer { animation: none; background: #f0f0f0; }
}

/* ── ÜRÜN KARTI SKELETON (grid ilk yükleme) ── */
.skeleton-card {
  background: #fff;
  padding: 15px;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.03);
  display: flex;
  flex-direction: column;
}
.skeleton-card .skeleton-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  margin-bottom: 14px;
}
.skeleton-card .skeleton-text {
  height: 12px;
  border-radius: 6px;
  margin: 6px 0;
}
.skeleton-card .skeleton-text.short {
  width: 55%;
  align-self: center;
}
.skeleton-card .skeleton-img,
.skeleton-card .skeleton-text {
  background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: alShimmer 1.6s infinite;
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-card .skeleton-img,
  .skeleton-card .skeleton-text { animation: none; background: #f0f0f0; }
}

/* ── ANA SAYFA — bölüm başlıkları ── */
.home-section-head {
  position: relative;
  display: flex;
  justify-content: space-between;   /* başlık solda, "TÜMÜ" sağda */
  align-items: center;
  min-height: 32px;
  margin-bottom: 24px;
}
/* Bölüm başlığı standardı ürün detay sayfasıyla ORTAK: Bricolage Grotesque (--font-display) / 17px / 700 / #2f483c,
   sola yaslı ve mobilde de aynı punto (bkz. css/urun.css'teki
   ".product-container .pd-sec-title …" kuralı). Eskiden Playfair 900/1.5rem ve
   position:absolute ile ortalanmıştı; aynı içerik iki sayfada iki farklı başlık
   diliyle görünüyordu. */
.section-title.minimal-title {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  font-size: 1.0625rem;             /* 17px — mobil override YOK */
  color: #2f483c;
  margin: 0;
  display: block;
  width: max-content;
  line-height: 1.3;
}
.view-all-link {
  text-decoration: none;
  color: var(--al-green);
  font-weight: 900;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
  position: relative;
  z-index: 10;
  line-height: 1;
  display: inline-block;
  transform: translateY(2px);
  display: flex;
  align-items: center;
  transition: opacity 0.2s var(--al-ease);
}
.view-all-link:hover { opacity: 0.65; }

/* ── ANA SAYFA — hero CTA ── */
.hero-cta {
  display: inline-block;
  margin-top: 24px;
  padding: 13px 36px;
  background: var(--al-black);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 8px;
  transition: background 0.3s var(--al-ease), transform 0.3s var(--al-ease), box-shadow 0.3s var(--al-ease);
}
.hero-cta:hover, .hero-cta:focus-visible {
  background: var(--al-green);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(47, 72, 60, 0.25);
}

/* ── ANA SAYFA AKILLI ARAMA BARI ── */
/* Zemin ŞEFFAF: tam genişlikte bir bölüm, kart değil. Beyaz bırakılırsa
   sayfanın kırık beyaz gradyanını (style.css :1 html) yatay bir bantla keser. */
.home-search-section { position: relative; z-index: 100; width: 100%; background: transparent; padding: clamp(24px, 3.5vw, 40px) 0 4px; }
.home-search-wrap { position: relative; max-width: 860px; margin: 0 auto; display: flex; align-items: center; }
#hero-search {
  width: 100%; padding: 17px 56px 17px 24px; border: 1.5px solid #d7ddd9; border-radius: 32px;
  font-size: 1rem; font-family: inherit; color: #1e332a; outline: none; background: #fff;
  transition: border-color .18s, box-shadow .18s;
}
#hero-search:focus { border-color: #2f483c; box-shadow: 0 4px 16px rgba(47,72,60,0.12); }
#hero-search::placeholder { color: #9aa8a1; }
#hero-search-btn {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #2f483c; cursor: pointer;
  width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  padding: 0; transition: background .15s;
}
#hero-search-btn svg { width: 22px; height: 22px; }
#hero-search-btn:hover { background: #eef4f1; }
#search-suggestions {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
  background: #fff; border: 1px solid #e8ecea; border-radius: 14px; overflow: hidden;
  box-shadow: 0 12px 34px rgba(0,0,0,0.14); max-height: 60vh; overflow-y: auto;
}
#search-suggestions .ss-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; text-decoration: none; color: #333; border-bottom: 1px solid #f0f2f1; }
#search-suggestions .ss-row:hover { background: #f5f8f6; }
#search-suggestions .ss-row img { width: 40px; height: 40px; border-radius: var(--al-radius-img-sm); object-fit: contain; flex-shrink: 0; background: var(--al-img-bg); }
#search-suggestions .ss-txt { display: flex; flex-direction: column; min-width: 0; }
#search-suggestions .ss-brand { font-size: 0.68rem; color: #8a9a92; text-transform: uppercase; letter-spacing: 0.3px; font-weight: 700; }
#search-suggestions .ss-name { font-size: 0.88rem; color: #1e332a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#search-suggestions .ss-all { display: block; padding: 12px 14px; text-align: center; font-weight: 700; font-size: 0.85rem; color: #2f483c; text-decoration: none; background: #f6faf8; }
#search-suggestions .ss-all:hover { background: #eaf2ee; }
#search-suggestions .ss-head { padding: 9px 14px 5px; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: #9aa8a1; }
#search-suggestions .ss-empty { padding: 14px 14px 4px; font-size: 0.88rem; font-weight: 600; color: #111; }
#search-suggestions .ss-brand-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; text-decoration: none; color: #1e332a; font-weight: 700; font-size: 0.9rem; border-bottom: 1px solid #f0f2f1; background: #fbfdfc; }
#search-suggestions .ss-brand-row:hover { background: #eef4f1; }
#search-suggestions .ss-brand-row .ss-arrow { color: #2f483c; font-weight: 800; }
@media (max-width: 600px) {
  #hero-search { padding: 14px 50px 14px 20px; font-size: 0.95rem; }
}

/* ── PROMO DUO — AuraScan + Bana Özel yan yana kartlar ── */
.promo-duo-section {
  width: 100%;
  /* Zemin ŞEFFAF — bkz. .home-search-section: tam genişlik bölüm, kart değil. */
  background-color: transparent;
  padding: clamp(40px, 5vw, 60px) 0;
  position: relative;
  z-index: 20;
}
/* .promo-duo-section .container removed to inherit standard .container width */
.promo-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.promo-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 20px;
  padding: 36px 42px;
  min-height: 240px;
  text-decoration: none;
  transition: transform 0.3s var(--al-ease), box-shadow 0.3s var(--al-ease);
}
.promo-card h3 {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: normal;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.promo-card p {
  font-size: 1.15rem;
  font-weight: 300;
  line-height: 1.5;
  margin: 0 0 20px;
  opacity: 0.9;
}
.promo-cta {
  margin-top: auto;
  padding: 12px 28px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 2;
}
.promo-aurascan .promo-cta { background: #fff; color: #1e332a; }
.promo-ozel .promo-cta { background: var(--al-green); color: #fff; box-shadow: 0 6px 16px rgba(47,72,60,0.22); }
.promo-aurascan {
  background: linear-gradient(135deg, #2f483c 0%, #1e332a 100%);
  color: #fff;
  box-shadow: 0 10px 30px rgba(47, 72, 60, 0.2);
}
.promo-ozel {
  background: #A6C4B7;
  border: none;
  color: #1C2A23;
}
.promo-watermark {
  position: absolute;
  right: -28px;
  bottom: -34px;
  width: 230px;
  height: 230px;
  transform: rotate(-18deg);
  opacity: 0.15;
  pointer-events: none;
}
@media (hover: hover) {
  .promo-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--al-shadow-hover);
  }
}
@media (max-width: 768px) {
  .promo-duo-section { padding-left: 0; padding-right: 0; }
  .promo-duo {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px;
  }
  .promo-duo::-webkit-scrollbar { display: none; }
  .promo-card {
    flex: 0 0 85%;
    scroll-snap-align: center;
    min-height: 205px;
    padding: 24px 26px 26px;
  }
  .promo-card h3 { font-size: 1.35rem; }
  .promo-card p { font-size: 0.85rem; margin-bottom: 12px; }
  .promo-cta { padding: 10px 24px; }
  .promo-watermark {
    width: 140px;
    height: 140px;
    right: -18px;
    bottom: -20px;
  }
}

/* ── SHOP HERO (urunler.html) PAGE ENTRANCE ── */
@keyframes alPageIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Renk ve alt çizgi eskiden iki HTML'de satır içi yazılıydı ve bir düzenlemede
   ikisinden birden düştü. Tek kaynak olsun diye buraya alındı — .shop-hero
   yalnızca urunler.html'de kullanılıyor. */
.shop-hero {
  animation: alPageIn 0.5s var(--al-ease) both;
  background-color: #eaf2ee;
  border-bottom: 1px solid #d4e2da;
}

/* Mobil üst bar araması — "Filtrele" düğmesinin hizasında sağda.
   .m-filter-bar zaten space-between; kutu kendiliğinden sağa yaslanır.
   Ürünler sayfasının mobil üst barı kullanıyor. */
.bo-msearch { position: relative; flex: 1 1 auto; max-width: 210px; }
.bo-msearch svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: #6b7280; pointer-events: none; }
/* Keşif ekranındaki #pl-search ile aynı dil: beyaz zemin, GRİ çerçeve, siyah yazı. */
.bo-msearch input { width: 100%; padding: 8px 12px 8px 32px; border: 1px solid #d5d9d7; border-radius: 18px; background: #fff; font-family: inherit; font-size: 0.85rem; color: #111; outline: none; }
/* #pl-search ile aynı yer tutucu tonu (mobil-özel sınıf). */
.bo-msearch input::placeholder { color: #5a5a5a; }
.bo-msearch input:focus { border-color: #9aa0a6; background: #fff; }
/* type="search" yerleşik çarpısı UA varsayılanında siyah; kutunun gri diliyle
   (çerçeve #d5d9d7, büyüteç #6b7280) eşitle. DİKKAT: `-webkit-appearance:none`
   + maske ile boyamak çarpıyı görünür kılar ama TIKLAYINCA TEMİZLEME
   davranışını öldürür (test edildi). Bu yüzden yerleşik görünüm korunup
   sadece filtreyle griye çekiliyor. */
.bo-msearch input::-webkit-search-cancel-button {
  filter: grayscale(1) opacity(0.45);
  cursor: pointer;
}
@media (min-width: 769px) { .bo-msearch { display: none !important; } }

/* ── CATEGORY ITEM — spring hover ── */
.category-item {
  transition: transform 0.3s var(--al-spring) !important;
}
.category-item:hover {
  transform: translateY(-9px) !important;
}

/* ── CHIP / FILTER BUTTON hover glow ── */
.f-btn.active,
.f-rect-btn.active {
  box-shadow: 0 0 0 3px rgba(47,72,60,0.18);
}

/* ── FORUM POST TRIGGER hover ── */
#fb-style-post-trigger {
  transition: box-shadow 0.2s var(--al-ease), transform 0.2s var(--al-ease) !important;
}
#fb-style-post-trigger:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.09) !important;
  transform: translateY(-1px) !important;
}

/* ── NAVBAR backdrop blur on non-home pages ── */
.navbar-hero {
  transition: box-shadow 0.3s var(--al-ease),
              background 0.3s var(--al-ease),
              backdrop-filter 0.3s var(--al-ease);
}

/* ── PROFILE TABS MOBILE RESPONSIVE ── */
@media (max-width: 768px) {
  .profile-horizontal-tabs {
    gap: 18px !important;
    flex-wrap: nowrap !important;      /* sarma yok → tek satır */
    overflow-x: auto;                   /* taşarsa yatay kaydır */
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .profile-horizontal-tabs::-webkit-scrollbar { display: none; }
  .profile-horizontal-tabs .p-tab {
    font-size: 0.8rem !important;
    white-space: nowrap;
    flex: 0 0 auto;
    padding-bottom: 8px;
  }
}



/* ══════════════════════════════════════════════════════════
   ÜRÜNLER — MOBİL KEŞİF EKRANI (urunler.html #pl-discover)
   Masaüstünde HİÇ görünmez; mobil blokta açılır. Görünürlüğü ayrıca
   js/urunler.js yönetir (yalnız filtresiz girişte).
   ══════════════════════════════════════════════════════════ */
.pl-discover { display: none; }
.pl-disc-inner { padding: 18px 14px 24px; }

/* "Ürünler" başlığı — Tartışmalar'daki "Keşfet" ile aynı görünüm
   (.forum-explore-btn: 1.6rem/800/#111, sola yaslı). */
.pl-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}
.pl-title {
    font-family: var(--font-display);
    font-size: 1.6rem; font-weight: 800; color: #111;
    margin: 0; line-height: 1.2;
}

/* Arama kutusu — gri çerçeve, beyaz zemin, siyah yazı. */
.pl-search-wrap { position: relative; display: flex; align-items: center; margin: 6px 0 28px; }
#pl-search {
    width: 100%; padding: 15px 52px 15px 20px; border: 1.5px solid #d5d9d7; border-radius: 32px;
    font-size: 0.95rem; font-family: inherit; color: #111; outline: none; background: #fff;
    transition: border-color .18s, box-shadow .18s;
}
#pl-search:focus { border-color: #9aa0a6; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
/* Yer tutucu siyaha yakın gri — #8a8a8a fazla siliktı. */
#pl-search::placeholder { color: #5a5a5a; }
#pl-search-btn {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: #6b7280; cursor: pointer;
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; padding: 0;
}
#pl-search-btn svg { width: 21px; height: 21px; }

/* Filtreli mobil görünümün başlık çubuğu (yeşil hero mobilde yok).
   Masaüstünde üst menü + hero zaten gezinmeyi sağlıyor → gizli. */
.pl-topbar { display: none; }
/* margin-top: "Yeni Gelenler" şeridi ve onu Kategoriler'den ayıran .pl-sep
   çizgisi kaldırıldı (bölüm ana sayfaya taşındı) — başlık artık doğrudan arama
   kutusunun altında, nefes payını kendisi vermeli. */
.pl-subtitle {
    font-family: var(--font-display);
    font-size: 1.0625rem; font-weight: 700; color: #111;
    margin: 22px 0 14px; line-height: 1.3;
}

/* ── Kategori mozaiği ──
   İki sütunlu KADEMELİ dizilim: kutular dönüşümlü uzun/kısa, her biri o an
   daha kısa olan sütuna eklenir (yerleşim js/urunler.js'te). Zemin, kapak
   görselinin renginden türetilmiş açık pastel; --tile-bg/--tile-h satır içi
   değişkenlerle gelir. Sayfa zemini KIRIK BEYAZ gradyan, etiketler SİYAH. */
/* Zemin BEYAZ: altındaki yapışkan "Filtrele / Ürün ara" barı (.mobile-top-controls,
   #fff) ile tek parça bir üst bant oluşsun diye. Eskiden transparent'ti ve sayfa
   gradyanının kırık beyazı (#fdfdfc) barın saf beyazıyla arada ton kırılması
   yapıyordu. Alt ayraç da bardakiyle aynı. */
.pl-discover { background: #fff; border-bottom: 1px solid #eee; }
/* Ölçüler KOMPAKTLAŞTIRILDI (gap 10→8, dolgu ve yarıçap küçüldü, kutu boyları
   js/urunler.js TILE_TALL/TILE_SHORT ile 208/158 → 158/120): keşif ekranının
   amacı az kaydırmayla çok kategori göstermek. */
.pl-cat-grid { display: flex; gap: 8px; align-items: flex-start; }
.pl-cat-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pl-cat-tile {
    display: flex; flex-direction: column; overflow: hidden;
    height: var(--tile-h, 150px);
    background: var(--tile-bg, #f1f4f2);
    border-radius: 16px; padding: 8px 10px 10px;
    text-decoration: none;
    transition: transform .18s var(--al-out, ease);
}
.pl-cat-tile:active { transform: scale(0.975); }
/* Fotoğraf alanı kutunun kalan yüksekliğini kaplar ve ortalar; görsel etikete
   kadar büyür (max-height:100% taşmayı engeller). Zemin YOK: kapaklar artık
   şeffaf (src/cutoutTileCovers.js kapak fonunu derlemede alfaya çeviriyor), ürün
   doğrudan pastelin üstünde durur.
   Burada iki şey denendi ve İKİSİ DE geri alındı — tekrar eklemeyin:
     • mix-blend-mode:multiply → beyaz fonu eritiyordu ama ürünün kendi
       piksellerini de pastelle çarpıp rengini kaydırıyordu.
     • arkaya beyaz panel → renk kaymıyordu ama kutuda beyaz dikdörtgen duruyordu.
   Kapak şeffaf olduğu için ikisine de gerek yok. */
.pl-cat-photo { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
/* Ölçü %80: görsel kutu kenarına yapışmadan büyüyebilir
   (.pl-cat-tile overflow:hidden ile kırpıyor). %86'dan indirildi — kutu zaten
   kısaldı, yüzde de düşünce görsel "küçültülmüş" okunuyor. */
.pl-cat-img {
    max-width: 80%; max-height: 80%;
    object-fit: contain; display: block;
}
/* Etiket akış içinde, kutunun altında sola yaslı — perde/overlay YOK. */
.pl-cat-label {
    margin-top: 5px;
    font-family: var(--font-display); font-size: 0.82rem; font-weight: 700;
    color: #111; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (prefers-reduced-motion: reduce) { .pl-cat-tile { transition: none; } }

/* ── MOBILE OVERRIDES FOR CAROUSEL ──
   Başlık için mobil override YOK: .section-title.minimal-title her ekranda 17px
   (ürün detay standardıyla aynı).
   Trend kartlarının mobil ölçüleri YALNIZ BURADA yönetilir — eskiden aynı kurallar
   iki ayrı 768px bloğunda çelişiyordu (120px vs 125px). Değerler css/urun.css'teki
   .sim-card mobil bloğuyla birebir. */
@media (max-width: 768px) {
  .view-all-link {
    font-size: 0.65rem;
  }
  /* Mobilde Trend Ürünler bir "panel" değil, diğer bölümler gibi düz bir şerit:
     yeşil kutu (style.css:1063 .trending-products .container) geri alınır ve
     kartlar sayfa payına hizalanır. Masaüstünde panel AYNEN durur — bu yüzden
     asıl kural silinmedi, yalnız burada sıfırlanıyor. */
  .trending-products .container {
    background: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }
  /* Bölümün "TÜMÜ" bağlantısı mobilde kaldırıldı (diğer bölümlerinki durur). */
  .trending-products .view-all-link {
    display: none;
  }
  .tp-scroll-container {
    gap: 10px;                       /* .sim-strip mobil gap'i ile aynı */
    /* Kaydırma çubuğu mobilde gizli: dokunmatik yüzeyde ince çubuk bir
       afordans sağlamıyor, üstelik Trend Ürünler ile Yeni Gelenler arasında
       araya girip iki bölümü koparıyordu. Taban kuraldaki 20px alt dolgu da
       yalnız çubuğa yer açmak içindi (style.css:1149) → 4px'e iner.
       Masaüstünde (index.html + blog.html) çubuk AYNEN durur. */
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .tp-scroll-container::-webkit-scrollbar { display: none; }
  .tp-card {
    flex: 0 0 165px !important;
    min-width: 165px !important;
    padding: 12px !important;
  }
  .tp-img-wrapper {
    height: 190px;
  }
  .tp-img {
    max-width: 100%;
    max-height: 100%;
  }
  .tp-brand { font-size: 0.60rem; }
  .tp-name { font-size: 0.8rem; }
  .tp-rating { font-size: 0.65rem; }

  /* Ürünler keşif ekranı yalnız mobilde var; [hidden] iken yine gizli kalsın diye
     :not([hidden]). Yeşil hero bloğu (.shop-hero) mobilde tamamen kalkar. */
  .pl-discover:not([hidden]) { display: block; }
  .products-page .shop-hero { display: none; }
  /* Başlık çubuğu: solda geri tuşu, ORTADA kategori adı.
     Geri tuşu akıştan çıkarılır (absolute) — yoksa başlık onun genişliği kadar
     sağa kayar ve gerçekten ortalanmaz.
     Alt pay: başlık ile yapışkan "Filtrele / Ürün ara" barı arasındaki boşluk
     BURADAN (padding-bottom) gelir — .mobile-top-controls sticky olduğu için
     ona margin-top verilirse yapışma noktası da kayar.
     Zemin BEYAZ: hemen altındaki filtre barıyla (#fff) tek parça bant. */
  .pl-topbar:not([hidden]) {
    display: flex; align-items: center; position: relative;
    padding: 12px 14px 18px;
    background: #fff;
  }
  /* Ürünler'de geri tuşu düz bir ok: daire/çerçeve yok, siyah.
     İKİ SINIF birden yazılıyor (0,2,0) çünkü .rt-back rutinim+favoriler ile
     ORTAK ve bu dosyada DAHA SONRA tanımlı — tek .pl-back ile eşit özgüllükte
     kalır, kaynak sırası gereği daire geri gelirdi.
     .rt-back <button> için yazılmıştı; burada <a> → alt çizgiyi kapat.
     Daire kalkınca ok küçük görünüyordu: 36→30px kutu, 17→22px SVG. */
  .rt-back.pl-back {
    position: absolute; left: 12px; text-decoration: none;
    background: none; border: none; border-radius: 0;
    color: #111; width: 30px; height: 30px;
  }
  .rt-back.pl-back:hover { background: none; border: none; }
  .rt-back.pl-back svg { width: 22px; height: 22px; stroke-width: 2.2; }
  .pl-filter-title {
    flex: 1; text-align: center;
    font-family: var(--font-display);
    font-size: 1.15rem; font-weight: 700; color: #111;
    margin: 0; line-height: 1.2;
    /* Uzun kategori adı geri tuşunun altına girmesin */
    padding: 0 40px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

/* ============================================================
   RUTİNİM (Kullanıcı Bakım Rutini) — profil.html #routine-card
   ============================================================ */
.rutinim-head { margin-bottom: 18px; }
.rutinim-title { font-size: 1.2rem; font-weight: 800; color: #111; margin: 0; }
.rutinim-sub { font-size: 0.85rem; color: #888; margin: 4px 0 0; line-height: 1.5; }

/* Katlanır başlık: başlık solda, ok sağda, çerçevesiz */
.rutinim-toggle { display: flex; align-items: center; justify-content: space-between; cursor: pointer; margin-bottom: 0; user-select: none; }
.rutinim-toggle.open { margin-bottom: 18px; }
.rutinim-caret { font-size: 1.5rem; line-height: 1; color: #888; border: none; background: none; transition: transform 0.25s ease; transform: rotate(0deg); }
.rutinim-toggle.open .rutinim-caret { transform: rotate(90deg); }

/* Sade numaralı sayfalama (Bana Özel / Ürünler) — renkli sembol yok */
.pg-bar { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; margin: 30px 0 10px; }
.pg-btn { min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid #ddd; background: #fff; color: #333; border-radius: 8px; font-family: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all .15s; }
.pg-btn:hover { border-color: #2f483c; color: #2f483c; }
.pg-btn.pg-active { background: #2f483c; border-color: #2f483c; color: #fff; cursor: default; }
.pg-dots { color: #aaa; padding: 0 2px; }

/* Filtre paneli veri gelene kadar placeholder */
.filter-loading { color: #aaa; font-size: 0.85rem; padding: 8px 2px; }

.rutinim-empty-cta { text-align: center; padding: 18px 0 6px; }
.rutinim-empty-cta p { color: #666; margin: 0 0 14px; font-size: 0.9rem; }

.rutinim-group { margin-bottom: 22px; }
.rutinim-group:last-child { margin-bottom: 0; }
.rutinim-group-head { border-bottom: 1px solid #ececec; padding-bottom: 7px; margin-bottom: 12px; }
.rutinim-group-title { font-size: 0.98rem; font-weight: 700; color: #2f483c; letter-spacing: 0.2px; }

.rutinim-row {
  display: flex; align-items: stretch; gap: 12px;
  overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin;
}
.rutinim-row::-webkit-scrollbar { height: 6px; }
.rutinim-row::-webkit-scrollbar-thumb { background: #dcdcdc; border-radius: 3px; }

.rutinim-chip {
  position: relative; flex: 0 0 auto; width: 152px;
  border: 1px solid #ececec; border-radius: 12px; background: #fff;
  padding: 14px 12px 12px; cursor: pointer; transition: box-shadow .18s, transform .18s;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.rutinim-chip:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); transform: translateY(-1px); }
.rutinim-chip-img { width: 78px; height: 78px; object-fit: contain; border-radius: var(--al-radius-img); margin-bottom: 10px; }
.rutinim-chip-text { display: flex; flex-direction: column; gap: 1px; width: 100%; margin-top: 3px; }
.rutinim-chip-brand { font-size: 0.68rem; font-weight: 700; color: #2f483c; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rutinim-chip-name { font-size: 0.74rem; color: #555; line-height: 1.25; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Masaüstü: resim kalan alanı doldurur (büyür), isim kartın altına yapışır */
@media (min-width: 601px) {
  .rutinim-chip:not(.rutinim-suggest) { min-height: 214px; }
  .rutinim-chip:not(.rutinim-suggest) .rutinim-chip-img {
    flex: 1 1 auto; width: 100%; height: auto; min-height: 84px; max-height: 132px; margin-bottom: 10px;
  }
  .rutinim-chip:not(.rutinim-suggest) .rutinim-chip-text { margin-top: auto; }
}

/* Uyum noktası */
.rutinim-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.rutinim-chip > .rutinim-dot { position: absolute; top: 8px; right: 9px; width: 14px; height: 14px; box-shadow: 0 0 0 2px #fff; }
.rutinim-dot.green { background: #2f9e44; }
.rutinim-dot.yellow { background: #f0a020; }
.rutinim-dot.red { background: #e03131; }

.rutinim-remove {
  position: absolute; top: 6px; left: 6px; width: 18px; height: 18px; line-height: 16px;
  border: none; border-radius: 50%; background: rgba(0,0,0,0.06); color: #666;
  font-size: 14px; cursor: pointer; padding: 0; opacity: 0; transition: opacity .15s;
}
.rutinim-chip:hover .rutinim-remove { opacity: 1; }
.rutinim-remove:hover { background: #e03131; color: #fff; }

.rutinim-add {
  flex: 0 0 auto; align-self: center; min-height: 44px; padding: 0 18px;
  border: 1.5px dashed #b9c8c0; border-radius: 12px; background: #f6faf8;
  color: #2f483c; font-weight: 700; font-size: 0.85rem; cursor: pointer; transition: .18s;
  white-space: nowrap;
}
.rutinim-add:hover { background: #2f483c; color: #fff; border-color: #2f483c; }

/* ── Sürükle-bırak (basılı tut → taşı/sırala) ── */
/* Dokunmada sürükleme UZUN BASMAYLA başlar (js/rutinim.js wireDrag); kaydırma
   hareketi her iki yönde de tarayıcıda kalır. Eskiden pan-x vardı: telefondaki
   DİKEY listede çipin üstünden sayfa kaydırılamıyordu (css-touch-ux#7). */
.rutinim-chip {
  touch-action: manipulation;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.rutinim-chip img { -webkit-user-drag: none; }
.rutinim-chip.rutinim-dragging { opacity: 0.35; }
.rutinim-drag-ghost {
  position: fixed; left: 0; top: 0; z-index: 10050; width: 152px;
  pointer-events: none; will-change: transform;
  transition: none !important;   /* fareyle birebir; .rutinim-chip transform geçişini ez */
  border: 1px solid #ececec; border-radius: 12px; background: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,0.22);
}
.rutinim-row { transition: background .15s ease, outline-color .15s ease; }
.rutinim-group.rutinim-drop-active .rutinim-row {
  background: #f0f7f3; outline: 2px dashed #b9c8c0; outline-offset: 2px; border-radius: 12px;
}
body.rutinim-dragging-active { user-select: none; -webkit-user-select: none; }
@keyframes rutinim-settle { from { transform: scale(0.9); opacity: 0.4; } to { transform: none; opacity: 1; } }
.rutinim-chip.rutinim-settle { animation: rutinim-settle .22s ease; }

/* Akıllı öneri kutusu */
.rutinim-suggest-slot { display: contents; }
.rutinim-chip.rutinim-suggest {
  width: 152px; border: 1.5px dashed #b9c8c0; background: #f6faf8;
  padding: 30px 12px 12px; /* üstte etiket + % rozeti için boşluk */
}
.rutinim-chip.rutinim-suggest:hover { border-color: #2f483c; box-shadow: 0 4px 14px rgba(47,72,60,0.12); }
/* Öneri kartında resim daha büyük/belirgin */
.rutinim-suggest .rutinim-chip-img { width: 78px; height: 78px; margin-bottom: 10px; }
.rutinim-suggest-label {
  position: absolute; top: 8px; left: 10px; right: 50px; /* rozete yer bırak → çakışma yok */
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase;
  color: #2f483c; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rutinim-suggest-score {
  position: absolute; top: 7px; right: 9px; color: #fff; font-size: 0.72rem; font-weight: 800;
  padding: 2px 8px; border-radius: 20px; box-shadow: 0 0 0 2px #f6faf8;
}
.rutinim-suggest-add {
  align-self: stretch; text-align: center; margin-top: 10px;
  font-size: 0.72rem; font-weight: 800; color: #2f483c;
  background: #e7f0ec; padding: 8px 10px; border-radius: 10px;
}
/* Mobil: öneri kartı DA dikey kalsın (normal cip'ler yatay satıra düşer, öneri istisna) */
@media (max-width: 600px) {
  .rutinim-chip.rutinim-suggest {
    flex-direction: column; align-items: center; text-align: center;
    width: auto; padding: 32px 14px 14px; gap: 0;
  }
  .rutinim-suggest .rutinim-chip-img { order: 0; width: 88px; height: 88px; margin-bottom: 10px; }
  .rutinim-suggest .rutinim-chip-text { order: 0; align-items: center; text-align: center; }
  .rutinim-suggest-label { position: absolute; top: 10px; left: 14px; right: 58px; }
  .rutinim-suggest-score { position: absolute; top: 9px; right: 14px; font-size: 0.78rem; }
  .rutinim-suggest-add { order: 0; align-self: stretch; text-align: center; margin: 12px 0 0; }
}

/* Detay modalı */
.rutinim-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 10006;
  display: none; align-items: center; justify-content: center; backdrop-filter: blur(3px);
}
.rutinim-modal {
  position: relative; background: #fff; width: 92%; max-width: 460px; max-height: 88vh;
  overflow-y: auto; border-radius: 16px; padding: 26px 24px; box-shadow: 0 12px 44px rgba(0,0,0,0.25);
}
.rutinim-modal-close {
  position: absolute; top: 12px; right: 14px; border: none; background: none;
  font-size: 1.6rem; line-height: 1; color: #999; cursor: pointer;
}
.rutinim-detail-hero { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.rutinim-detail-hero img { width: 64px; height: 64px; object-fit: contain; border-radius: var(--al-radius-img-sm); flex-shrink: 0; }
.rutinim-detail-brand { font-size: 0.72rem; font-weight: 700; color: #2f483c; text-transform: uppercase; letter-spacing: 0.3px; }
.rutinim-detail-name { font-size: 1rem; font-weight: 700; color: #111; line-height: 1.3; }

.rutinim-detail-sec { border-top: 1px solid #f0f0f0; padding-top: 14px; margin-top: 14px; }
.rutinim-detail-sec:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.rutinim-detail-sec-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #999; margin-bottom: 10px; }
.rutinim-detail-list { margin: 8px 0 0; padding-left: 18px; }
.rutinim-detail-list li { font-size: 0.83rem; color: #555; line-height: 1.5; margin-bottom: 5px; }

.rutinim-ok { font-size: 0.88rem; color: #2f9e44; margin: 0; line-height: 1.5; }
.rutinim-note { font-size: 0.83rem; color: #888; margin: 0; line-height: 1.5; }

.rutinim-conf { background: #faf9f7; border: 1px solid #eee; border-radius: 10px; padding: 12px 13px; margin-bottom: 10px; }
.rutinim-conf:last-child { margin-bottom: 0; }
.rutinim-conf-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rutinim-conf-head strong { font-size: 0.9rem; color: #111; }
.rutinim-conf-sev { margin-left: auto; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; padding: 2px 8px; border-radius: 20px; }
.rutinim-conf-sev.green { background: #e7f6ec; color: #2f9e44; }
.rutinim-conf-sev.yellow { background: #fdf3e0; color: #c47b0a; }
.rutinim-conf-sev.red { background: #fdeaea; color: #e03131; }
.rutinim-conf-reason { font-size: 0.82rem; color: #555; line-height: 1.5; margin-bottom: 6px; }
.rutinim-conf-reason:last-child { margin-bottom: 0; }
.rutinim-pill { display: inline-block; background: #edf3f0; color: #2f483c; font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; margin-right: 5px; }

.rutinim-score { display: flex; align-items: center; gap: 10px; }
.rutinim-score-badge { color: #fff; font-weight: 800; font-size: 0.95rem; padding: 5px 12px; border-radius: 20px; }
.rutinim-score-label { font-size: 0.86rem; color: #555; }

/* ── Rutinim mobil: yatay cip yerine DİKEY LİSTE ── */
@media (max-width: 600px) {
  .rutinim-row {
    flex-direction: column; align-items: stretch;
    overflow-x: visible; gap: 8px; padding: 2px 0 4px;
  }
  .rutinim-chip {
    width: auto; flex-direction: row; align-items: center;
    text-align: left; padding: 10px 12px; gap: 12px;
  }
  /* Yatay satıra düşen çip: görsel 50px'e iner → büyük radius burada squircle gibi durur */
  .rutinim-chip-img { order: 1; width: 50px; height: 50px; margin-bottom: 0; flex-shrink: 0; border-radius: var(--al-radius-img-sm); }
  .rutinim-chip-text { order: 2; flex: 1; min-width: 0; align-items: flex-start; text-align: left; }
  .rutinim-chip-brand { font-size: 0.72rem; }
  .rutinim-chip-name { font-size: 0.82rem; -webkit-line-clamp: 2; }
  /* Uyum noktası + sil düğmesi sağda, statik ve HER ZAMAN görünür */
  .rutinim-chip > .rutinim-dot { position: static; order: 3; width: 13px; height: 13px; box-shadow: none; }
  .rutinim-remove {
    position: static; order: 4; opacity: 1; flex-shrink: 0;
    width: 30px; height: 30px; line-height: 28px; font-size: 20px; background: #f2f2f2;
  }
  .rutinim-add { width: 100%; align-self: stretch; min-height: 46px; }
  /* Detay modalı küçük ekran okunaklılığı */
  .rutinim-modal { width: 94%; padding: 22px 18px; }
  .rutinim-conf-reason, .rutinim-detail-list li, .rutinim-conf-head strong,
  .rutinim-detail-name, .rutinim-score-label { overflow-wrap: break-word; word-break: break-word; }
  .rutinim-conf-head { flex-wrap: wrap; }
  .rutinim-conf-sev { margin-left: 0; }
}
@media (max-width: 400px) {
  .rutinim-chip-img { width: 44px; height: 44px; border-radius: var(--al-radius-img-sm); }
  .rutinim-title { font-size: 1.1rem; }
  .rutinim-sub { font-size: 0.8rem; }
}

/* ============================================================
   GENEL MOBİL CİLA — dokunma hedefleri + küçük ekran ince ayar
   ============================================================ */
@media (max-width: 768px) {
  /* NOT: eski sabit-yeşil ::after kalem rozeti kaldırıldı — artık JS ile renklenen
     #avatar-edit-badge mobilde de görünüyor (pp rengiyle aynı). */
}
@media (max-width: 400px) {
  .products-grid { gap: 8px !important; }
  .product-card .p-name { font-size: 0.8rem; }
  .product-card .p-brand { font-size: 0.7rem; }
  /* NOT: alt menü ikon boyutu artık yalnız ≤768px bloğunda (25px). Buradaki
     eski 21px ezmesi kaldırıldı — küçük ekranlarda da aynı boyut istendi. */
}

/* Tartışma kartı kategori rozeti mobilde küçülsün (inline stili ezer) */
@media (max-width: 600px) {
  .dc-category-badge {
    font-size: 0.58rem !important;
    padding: 3px 8px !important;
    letter-spacing: 0 !important;
  }
}

/* ── ANALİZ BARLARI (cilt/saç durum barları) ── */
.ab-wrap { display: flex; flex-direction: column; gap: 15px; width: 100%; }
.ab-caption { color: #8a9a92; font-size: 0.85rem; font-weight: 600; margin: 0 0 2px; }
.ab-row { width: 100%; }
.ab-label {
  display: flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: 0.92rem; color: #111; line-height: 1.2;
}
.ab-sub { font-size: 0.8rem; color: #888; margin: 3px 0 7px; }
.ab-track { height: 7px; background: #eef2f0; border-radius: 20px; overflow: hidden; }
.ab-fill {
  height: 100%; border-radius: 20px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.ab-ideal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; background: #2f9e44; flex-shrink: 0;
}
/* Satır ikonu (js/analysisBars.js METRIC_ICON). Nötr gri: durumu barın rengi
   anlatıyor, ikon da renklenirse iki sinyal yarışıyor. */
.ab-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: #8a9a92;
}
@media (prefers-reduced-motion: reduce) {
  .ab-fill { transition: none; }
}

/* Masaüstü sıralama barı mobilde gizli (mobilde m-sort-select var) */
@media (max-width: 768px) { .sort-bar-desktop { display: none !important; } }

/* ── İlk 3 kullanıcı: altın isim (liderlik + profil + tartışmalar) — hafif yaldız ── */
.aura-gold-name,
.rank-row.top .rank-name {
  font-weight: 800;
  background: linear-gradient(100deg, #b8860b 0%, #d9ad3c 24%, #ecd27a 46%, #e0b840 58%, #c69a3c 74%, #b8860b 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 2px rgba(198, 160, 60, 0.28));
  animation: alGoldShine 5s linear infinite;
}
@keyframes alGoldShine {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .aura-gold-name,
  .rank-row.top .rank-name { animation: none; background-position: 50% 0; }
}

/* ══════════════════════════════════════════════════════════════════
   TARTIŞMALAR (tartismalar.html) MOBİL — TAM GENİŞLİK DÜZENİ
   ------------------------------------------------------------------
   Üst filtre alanı (sekmeler + kategori çipleri) ekranın tamamını
   kaplayan, altı kıvrımlı beyaz bir panele alınır; akış kartları
   sağa/sola tam dayanır ve aralarındaki boşluk inceltilir.

   DİKKAT — bu blok dosyanın SONUNDA olmalı: yukarıdaki iki ayrı
   @media (max-width: 768px) bloğu (satır ~1455 ve ~1545) aynı
   seçicileri tanımlıyor; eşit özgüllükte kaynak sırası kazanır.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── a) Yan boşlukları kaldır ── */
    /* .container'ın width:92% kuralını ezer (özgüllük 0,2,0 > 0,1,0) */
    .forum-container {
        width: 100%;
        max-width: none;
    }
    .forum-layout {
        padding: 0 !important;
        gap: 6px !important;   /* panel ile ilk kart arası, kartlar arasıyla aynı */
    }

    /* ── b) Üst panel: .forum-sidebar'ın kendisi ── */
    /* Mobilde içindeki .sidebar-desktop-only gizli olduğu için bu kapsayıcı
       yalnızca sekmeleri + çipleri sarar; ayrı bir wrapper gerekmez. */
    .forum-sidebar {
        background: #fff;
        border-radius: 0 0 22px 22px;
        padding: 14px 0 18px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
        gap: 0;
    }

    /* ── c) İç satırlar — yan payı satırlar taşır, panel değil ── */
    /* Böylece çip şeridi kenardan kenara kayabiliyor. */
    .forum-top-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 14px 12px;   /* Keşfet/zil yerinde; sekmeler biraz yukarı çekildi */
    }
    .forum-mode-tabs {
        padding: 0 12px;
        margin-bottom: 16px;   /* yeşil şeridin altı biraz daha açık */
    }
    .forum-mode-btn.active {
        border-bottom-width: 3px;   /* yeşil şerit bir tık kalın */
    }
    .forum-category-chips {
        padding: 6px 12px 4px 15px;   /* soldan biraz daha içeride başlasın */
        margin-bottom: 0;
    }
    .forum-meta-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 24px 14px 6px;    /* çiplerden uzak, panel altıyla arası ferah */
    }

    /* ── d) Kategori çipleri ── */
    .forum-chip {
        background: #F5F5F7;
        /* KOYU GRİ, siyah değil: #111 açık gri dolgunun üzerinde sert bir halka
           gibi okunuyordu. Kalınlık/stil (1px solid) temel kuraldan geliyor. */
        border-color: #555;
        color: #1a1a1a;
        font-weight: 500;
    }
    /* Aktif çip koyu kalır — kontrast için gerekli. Çerçeve DOLGUYLA AYNI:
       eskiden #111 idi, yani kendi dolgusundan (#222) daha koyuydu ve zaten koyu
       olan hapın çevresinde ikinci bir siyah halka oluşturuyordu. */
    .forum-chip.active {
        background: #222;
        border-color: #222;
        color: #fff;
    }

    /* ── e) Akış: tam genişlik + kart aralığı ── */
    .forum-feed {
        gap: 10px;
        max-width: none;
    }
    /* Kartlar arası boşluk BURADAN gelir, .forum-feed'in gap'inden DEĞİL:
       kartlar #discussion-feed (display:block) içinde duruyor, .forum-feed'in
       doğrudan çocuğu değiller — oradaki gap yalnız form ile listeyi ayırır. */
    .forum-feed .discussion-card {
        margin-bottom: 6px;
        border-radius: 16px;
    }
    .forum-feed .discussion-card:last-child {
        margin-bottom: 0;
    }
    /* tartismalar.html'de inline margin taşıyor → !important şart */
    #inline-post-form-container {
        margin-bottom: 0 !important;
    }

    /* ── f) Kart içi: avatar biraz küçük, iki etiket aynı ölçüde ── */
    /* js/discussionCard.js satır içi stil bastığı için !important gerekiyor.
       Kapsam .forum-feed — o dosyayı paylaşan index/profil/urun etkilenmesin. */
    /* Tartışmanın ANA avatarı büyük. Yorum avatarları ayrı: sınıfsız satır içi
       <img style="width:36px"> (js/tartismalar.js) — bu kural onlara değmez. */
    .forum-feed .dc-avatar {
        width: 40px !important;    /* .dc-user-meta blok yüksekliği = 39.6px */
        height: 40px !important;
    }
    .forum-feed .glow-av .glow-medal {
        width: 16px;
        height: 16px;
        top: -4px;
        right: -4px;
    }

    /* Alt satırdaki sayılar: daha küçük ve ikona bitişik.
       !important şart — beğeni butonu font-size/gap/padding'i satır içinde
       taşıyor (js/tartismalar.js:649). Sayı span'leri butondan miras alır. */
    .forum-feed .dc-action-btn {
        font-size: 0.72rem !important;
        gap: 3px !important;
    }
    .forum-feed .post-like-btn {
        padding: 4px 6px !important;
    }
    /* Tarih ("Dün") biraz sola */
    .forum-feed .dc-date {
        margin-right: 6px;
    }
    /* Kategori rozeti oval ve TEK satır kalır (max-width/white-space ezmesi şart:
       2 satıra sarınca kart yüksekliği oynuyordu — css satır ~1403).
       Cilt tipi etiketi kasıtlı olarak DIŞARIDA: eski gri kare görünümünde kalıyor. */
    .forum-feed .dc-category-badge {
        font-size: 0.58rem !important;
        font-weight: 700 !important;
        padding: 3px 10px !important;
        border-radius: 999px !important;
        line-height: 1.25 !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
        max-width: none !important;
        display: inline-block;
    }
}

/* ══════════════════════════════════════════════════════════════════
   TARTIŞMALAR — ÜST BAR BİLEŞENLERİ (Keşfet menüsü, zil, sıralama)
   Yalnız mobil: masaüstünde .forum-sidebar eski dar sütun olarak kalır.
   ══════════════════════════════════════════════════════════════════ */
.forum-top-bar,
.forum-meta-row {
    display: none;              /* PC'de gizli — mobil blok flex'e çevirir */
}

.forum-explore-wrap,
.forum-sort-wrap {
    position: relative;
}

.forum-explore-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 24px;
    font-weight: 700;
    color: #111;
    letter-spacing: -0.3px;
}
.forum-explore-btn svg {
    width: 20px;
    height: 20px;
    margin-top: 3px;
    transition: transform 0.2s var(--al-ease, ease);
}
.forum-explore-btn[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.forum-bell-btn {
    position: relative;         /* .aura-notif-dot buraya konumlanır */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: #111;
}
/* Zil rozeti: sarı daire + çok ince beyaz şerit, sembolün sağ üstünde ona değecek kadar içeride.
   Diğer sayfalardaki ortak kırmızı .aura-notif-dot değişmez. */
.forum-bell-btn .aura-notif-dot {
    width: 10px;
    height: 10px;
    background: #E95C15;
    box-shadow: 0 0 0 1.5px #fff;
    top: 5px;
    right: 6px;
}

.forum-count {
    font-size: 0.78rem;
    font-weight: 600;
    color: #111;
}

.forum-sort-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    color: #6b7280;
    white-space: nowrap;
}
.forum-sort-btn #forum-sort-label {
    font-weight: 700;
    color: #1a1a1a;
}
.forum-sort-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ── Ortak açılır menü ── */
.forum-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 60;
    min-width: 176px;
    background: #fff;
    border: 1px solid #ececf0;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    padding: 6px;
    display: flex;
    flex-direction: column;
}
.forum-menu[hidden] { display: none; }
.forum-menu-right { left: auto; right: 0; }

.forum-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    color: #333;
    text-align: left;
}
.forum-menu-item.active {
    background: #F5F5F7;
    font-weight: 700;
    color: #111;
}
.forum-menu-item.active::before { content: '✓'; font-size: 0.8rem; }
.forum-menu-item:not(.active)::before { content: ''; width: 11px; }

@media (max-width: 768px) {
    .forum-top-bar,
    .forum-meta-row { display: flex; }
}
/* FAB yalnız mobilde — masaüstünde form akışın başında zaten erişilebilir */
@media (min-width: 769px) {
    #forum-fab { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   BİLDİRİM PANELİ (sağdan kayan) — js/notifications.js tarafından kurulur
   Desen: .products-page .sidebar drawer'ının sağ aynası (css satır ~1755)
   ══════════════════════════════════════════════════════════════════ */
.notif-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    z-index: 12000;
    opacity: 0;
    display: none;
    transition: opacity 0.3s ease;
}
.notif-overlay.open { display: block; opacity: 1; }

.notif-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 420px;
    height: 100dvh;
    background: #fff;
    z-index: 12001;
    display: flex;
    flex-direction: column;
    box-shadow: -2px 0 18px rgba(0, 0, 0, 0.15);
    transition: right 0.3s ease;
}
.notif-drawer.open { right: 0; }

.notif-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f2;
    flex-shrink: 0;
}
.notif-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #ececf0;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    color: #111;
    padding: 0;
}
.notif-back svg { width: 16px; height: 16px; }
.notif-title { font-size: 0.95rem; font-weight: 700; color: #111; }

.notif-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 24px;
}

/* Gün ayracı: ortada metin, iki yanında ince çizgi */
.notif-day {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 10px;
}
.notif-day span {
    font-size: 0.66rem;
    font-weight: 700;
    color: #9aa0a6;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    white-space: nowrap;
}
.notif-day i {
    flex: 1;
    height: 1px;
    background: #eeeef1;
}

.notif-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
.notif-row:hover { background: #fafafb; }

/* Sol: kare görsel + sağ üstünde eylem ikonu */
.notif-thumb {
    position: relative;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
}
.notif-thumb img {
    width: 100%;
    height: 100%;
    border-radius: var(--al-radius-img-sm);
    object-fit: cover;
    background: #f2f2f4;
}
.notif-thumb .notif-act {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px #fff;
}
.notif-act.like { background: #e31837; }
.notif-act.comment { background: #2f483c; }
.notif-act svg { width: 11px; height: 11px; color: #fff; }

.notif-text {
    flex: 1;
    min-width: 0;
    font-size: 0.8rem;
    line-height: 1.35;
    color: #333;
}
.notif-text b { font-weight: 700; color: #111; }
.notif-text .notif-quote {
    display: block;
    color: #6b7280;
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notif-text .notif-time {
    display: block;          /* metne yapışmasın */
    margin-top: 2px;
    color: #9aa0a6;
    font-size: 0.72rem;
}

/* Sağ: aktör avatarı; birden fazlaysa üst üste beyaz çerçeveyle */
.notif-actors {
    display: flex;
    flex-shrink: 0;
    padding-left: 4px;
}
.notif-actors img {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: #f2f2f4;
    border: 2px solid #fff;
}
/* İlk aktör üstte kalsın — sonraki kardeş normalde onu örterdi */
.notif-actors img:first-child { z-index: 2; }
.notif-actors img + img { margin-left: -14px; z-index: 1; }

.notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    padding: 80px 32px;
    color: #6b7280;
}
.notif-empty-emoji { font-size: 2.6rem; }
.notif-empty b { font-size: 1rem; color: #111; font-weight: 700; }
.notif-empty p { font-size: 0.82rem; line-height: 1.5; margin: 0; }

@media (prefers-reduced-motion: reduce) {
    .notif-drawer, .notif-overlay { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
   RUTİNİM SAYFASI (rutinim.html) + profildeki özet kart
   ══════════════════════════════════════════════════════════════════ */

/* ── Profil: özet kart (tıklanınca rutinim.html) ── */
.rutinim-entry {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    text-decoration: none;
    color: inherit;
}
.rutinim-entry-icon { display: flex; flex-shrink: 0; }
.rutinim-entry-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.rutinim-entry-title { font-size: 1.05rem; font-weight: 800; color: #1e332a; }
.rutinim-entry-sub {
    font-size: 0.82rem;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rutinim-entry-caret { font-size: 1.5rem; color: #b9c2bd; line-height: 1; flex-shrink: 0; }

/* ── Sayfa kabı ── */
.rt-wrap {
    max-width: 640px;
    margin: 18px auto 100px;
    padding: 0 16px;
}
.rt-title {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: #111;
    margin: 0 0 16px;
}
.rt-section {
    font-size: 1rem;
    font-weight: 800;
    color: #111;
    margin: 26px 0 12px;
}
/* "Rutininiz" ara başlığı kaldırıldı → grupların üst boşluğunu koru */
.rt-groups { margin-top: 26px; }

/* ── Hafta şeridi ── */
.rt-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 16px;
    padding: 10px 8px;
}
.rt-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 4px 0;
    cursor: pointer;
    font-family: inherit;
}
.rt-day-name {
    font-size: 0.68rem;
    font-weight: 600;
    color: #9aa0a6;
}
.rt-day-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 0.82rem;
    font-weight: 700;
    color: #333;
}
/* Bugün: dolu yuvarlak */
.rt-day.today .rt-day-num { background: #2f483c; color: #fff; }
/* Seçili gün (bugün değilse): çerçeveli yuvarlak */
.rt-day.selected:not(.today) .rt-day-num { box-shadow: inset 0 0 0 2px #2f483c; color: #2f483c; }
.rt-day.future { cursor: default; }
.rt-day.future .rt-day-name,
.rt-day.future .rt-day-num { color: #d0d4d8; }

/* ── Sabah / Gece kareleri ── */
.rt-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}
.rt-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #fff;
    border: 1px solid #eceef1;
    border-radius: 16px;
    padding: 16px 16px 14px;
}
.rt-stat-label { font-size: 0.78rem; font-weight: 600; color: #6b7280; }
.rt-stat-value { font-size: 1.5rem; font-weight: 800; color: #111; line-height: 1; }
.rt-stat-bar { display: block; height: 5px; background: #eef0f2; border-radius: 20px; overflow: hidden; }
.rt-stat-bar i { display: block; height: 100%; background: #2f483c; border-radius: 20px; transition: width .25s ease; }
.rt-stat.complete .rt-stat-value { color: #2f9e44; }
.rt-stat.complete .rt-stat-bar i { background: #2f9e44; }

/* ── Çip üzerindeki "yapıldı" işareti ── */
.rutinim-chip { position: relative; }
.rt-check {
    position: absolute;
    left: 6px;
    bottom: 6px;
    z-index: 3;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid #cfd6d2;
    background: #fff;
    color: transparent;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .15s, border-color .15s, color .15s;
}
.rt-check.on {
    background: #2f9e44;
    border-color: #2f9e44;
    color: #fff;
}
.rutinim-chip.rt-done { opacity: 0.72; }

@media (prefers-reduced-motion: reduce) {
    .rt-stat-bar i { transition: none; }
}

/* ── ORTAK geri tuşu (rutinim.html + favoriler.html): beyaz, ince gri kenarlı ── */
.rt-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
/* Sayfa başlığı geri tuşunun sağında */
.rt-topbar .rt-title { margin: 0; }
/* Hatırlatıcı zili — yalnız uygulamada (js/appNative.js ekler). */
.native-rem-btn {
    position: relative; margin-left: auto;
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0;
    background: none; border: none; border-radius: 50%; color: #8a9199; cursor: pointer;
}
.native-rem-btn:active { background: rgba(47, 72, 60, 0.08); }
.native-rem-btn.on { color: #2f483c; }
.native-rem-btn.on::after {
    content: ''; position: absolute; top: 10px; right: 10px;
    width: 8px; height: 8px; border-radius: 50%; background: #2f483c; border: 2px solid #fff;
}
.native-rem-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0; border-top: 1px solid #eef0ee;
}
.native-rem-row:last-of-type { border-bottom: 1px solid #eef0ee; margin-bottom: 16px; }
.native-rem-label { flex: 1; font-weight: 600; color: #1e332a; }
.native-rem-time {
    font: inherit; font-size: 0.95rem; color: #1e332a;
    padding: 8px 10px; min-height: 44px; border: 1px solid #dfe2e6; border-radius: 10px; background: #fff;
}
.native-rem-on { width: 24px; height: 24px; accent-color: #2f483c; flex-shrink: 0; }
.rt-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #e8eaed;
    border-radius: 50%;
    background: #fff;
    color: #5f6368;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.rt-back:hover { background: #fafbfc; border-color: #dfe2e6; }
.rt-back svg { width: 17px; height: 17px; }
/* Geçmiş/Favoriler sayfasında daire YOK — düz siyah ok (kullanıcı isteği).
   Yalnız .fav-container altında; .rt-back rutinim.html ile ORTAK, orada daire kalır.
   Daire kalkınca ok küçük görünüyor: 36→30px kutu, 17→22px SVG (.pl-back:3126 ile aynı). */
.fav-container .rt-back {
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    border-radius: 0;
    color: #111;
}
.fav-container .rt-back:hover { background: none; border: none; }
.fav-container .rt-back svg { width: 22px; height: 22px; stroke-width: 2.2; }
/* Geri tuşu yalnızca mobilde; masaüstünde üst menü zaten gezinmeyi sağlıyor */
@media (min-width: 769px) {
    .rt-back { display: none; }
}

/* ── Tartışmalar FAB: aşağı kaydırınca sağa kaçar, yukarı çıkınca döner ──
   DİKKAT: transform KULLANILMAZ. .fab-btn üzerinde `animation: alFabIn … both`
   (giriş animasyonu) ve :hover içinde `transform … !important` var; animasyonla
   uygulanan transform normal bildirimleri ezdiği için çakışırdı. `right`
   özelliğini animasyonlamak bu çakışmanın tamamını atlatır. */
#forum-fab {
    transition: right 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease;
}
#forum-fab.fab-away {
    right: -76px !important;   /* .fab-btn mobil kuralı right:22px !important taşıyor */
    opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
    #forum-fab { transition: none; }
}

/* ── Profil: Geçmiş / Kaydedilenler giriş satırları (rutinim özet kartıyla aynı dil) ── */
.prof-entry {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 26px;
    text-decoration: none;
    color: inherit;
}
.prof-entry-icon {
    display: flex;
    flex-shrink: 0;
    color: #2f483c;
}
.prof-entry-icon svg { width: 23px; height: 23px; }
.prof-entry-title {
    flex: 1;
    min-width: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #111;
}
.prof-entry-caret { font-size: 1.5rem; color: #b9c2bd; line-height: 1; flex-shrink: 0; }
/* Favoriler satırındaki kalp, sayfa içindeki favori kalbiyle aynı kırmızı */
.prof-entry-icon-fav { color: #e31837; }

/* ── Profil: Cilt / Saç analizi — yan yana iki katlanır kutu ──
   Kabuk (beyaz + #eaeaea kenar + 12px yuvarlaklık) profil sayfasının diğer
   kartlarıyla aynı. Gövde kutunun İÇİNDE değil ALTINDA açılıyor: 390px ekranda
   kutu ~165px kalıyor ve AuraBars satırı (etiket + durum + bar) sığmıyor.
   Karetin dönüşü .rutinim-caret (:3154) ile aynı davranış. */
.an-heads {
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 20px;
}
.an-head {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    padding: 18px 12px;
    cursor: pointer;
    text-align: center;
    font-family: var(--font-display);
    transition: border-color .2s;
}
/* Sabit yükseklik: iki ikon farklı boyda (28px maske / 24px svg), hizalanmazsa
   başlıklar bir piksel kayıyor. */
.an-head-ic { display: flex; align-items: center; justify-content: center; height: 28px; }
/* width:100% — sütun akışında fit-content'e büzülüp metni sıkıştırıyordu. */
.an-head-title {
    display: flex; align-items: center; justify-content: center;
    width: 100%;
    font-size: 0.98rem; font-weight: 700; color: #111; line-height: 1.25;
}
/* Açık/kapalı ayrımının TEK göstergesi bu kenar rengi — başlığın yanındaki karet
   kullanıcı isteğiyle kaldırıldı, geri eklemeyin. */
.an-head[aria-expanded="true"] { border-color: #2f483c; }
.an-body {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    padding: 22px 26px;
    margin-bottom: 20px;
}
@media (prefers-reduced-motion: reduce) {
    .an-head { transition: none; }
}

/* ═══ BLOG KARTLARI ═══
   Eskiden yalnız blog.html satır içi <style>'ındaydı; ana sayfadaki Blog şeridi de
   aynı kartı kullandığı için ortak dosyaya taşındı (tek kaynak: js/blogPosts.js). */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 28px;
}

/* Blog card */
.blog-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #eee;
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}
.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(47, 72, 60, 0.1);
}
.blog-card-img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    background: linear-gradient(135deg, #e8f0ec, #f5efe8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    color: #2f483c;
}
.blog-card-body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.blog-card-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    width: fit-content;
}
.tag-icerik { background: #e8f5e9; color: #2e7d32; }
.tag-gunes { background: #fff3e0; color: #e65100; }
.tag-fondoten { background: #fce4ec; color: #c62828; }
.tag-rehber { background: #e3f2fd; color: #1565c0; }
.tag-trend { background: #f3e5f5; color: #7b1fa2; }
.tag-dikkat { background: #fff8e1; color: #f57f17; }

.blog-card-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: #2a2a2a;
    margin-bottom: 8px;
    line-height: 1.4;
    font-weight: 700;
}
.blog-card-excerpt {
    font-size: 0.88rem;
    color: #666;
    line-height: 1.55;
    flex: 1;
}
.blog-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
    font-size: 0.78rem;
    color: #999;
}
.blog-card-read {
    color: #2f483c;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}
.blog-card-read::after {
    content: '→';
    transition: transform 0.2s;
}
.blog-card:hover .blog-card-read::after {
    transform: translateX(3px);
}

/* Featured / large card */
.blog-featured {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #eee;
    transition: transform 0.3s, box-shadow 0.3s;
}
.blog-featured:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(47, 72, 60, 0.1);
}
.blog-featured .blog-card-img {
    height: 100%;
    min-height: 300px;
    font-size: 5rem;
}
.blog-featured .blog-card-body {
    padding: 32px;
    justify-content: center;
}
.blog-featured .blog-card-title {
    font-size: 1.5rem;
}
.blog-featured .blog-card-excerpt {
    font-size: 0.95rem;
}

@media (max-width: 900px) {
    .blog-featured { grid-template-columns: 1fr; }
    .blog-featured .blog-card-img { min-height: 200px; }
}
@media (max-width: 600px) {
    .blog-grid { grid-template-columns: 1fr; }
}

/* ── MOBİL: OTOMATİK YAKINLAŞMAYI ENGELLE ──
   iOS Safari, font-size < 16px olan bir metin alanına odaklanınca sayfayı büyütür ve
   odak bırakılınca ESKİ HÂLİNE DÖNMEZ. Sitedeki arama kutuları 13,3–15,2px arasındaydı.
   Not: urunler.html kutuları font-size'ı SATIR İÇİ yazıyor; normal bir
   kural onları yenemez → !important şart (alternatif: 6 dosyada satır içi stil düzenlemek).
   checkbox/radio/range/color/file kapsam dışı — yazı boyutu onları ilgilendirmiyor.
   `pointer: coarse` eklendi: 768px üstü dokunmatik ekranlar (iPad) da kapsansın. */
@media (max-width: 768px), (pointer: coarse) {
  input[type="text"], input[type="search"], input[type="email"], input[type="password"],
  input[type="tel"], input[type="number"], input[type="url"], input[type="date"], input[type="time"],
  input:not([type]), select, textarea {
    font-size: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* ══ MOBİL ANA SAYFA — uygulama düzeni (.mhome) ═══════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════ */
/* index.html'de İKİ blok var: .mhome-top (selamlama + hero kartı, sayfanın en
   üstünde) ve .mhome-rest (cilt özeti + sana özel, aramanın altında). İkisi de
   VARSAYILAN OLARAK GİZLİ; yalnız ≤768px'te açılır. Masaüstü ana sayfa böylece
   hiç etkilenmez — eski hero ve promo ikilisi orada aynen durur.
   İçeriği js/mobileHome.js doldurur. */
.mhome { display: none; }

/* Uyum halkası — ürün resminin sağ-üst köşesi. İşaretlemesi js/productCard.js'te;
   hem Ürünler ızgarası hem mobil "Sana Özel" şeridi basıyor (eskiden
   kaldırılan bana-ozel.html'in satır içi <style>'ındaydı, orada kalsaydı ana sayfada
   stilsiz görünürdü).
   Eskiden burada `@media (min-width:769px){ .products-grid .compat-ring{display:none} }`
   vardı: rozet masaüstünde .wishlist-icon ile aynı köşeye biniyordu. Artık kalp
   Ürünler ızgarasında SOL üste alındı (bu dosyadaki .products-page .products-grid
   .wishlist-icon kuralı), çakışma yok — kural kaldırıldı, GERİ EKLEMEYİN. */
.compat-ring { position: absolute; top: 4px; right: 4px; z-index: 6; width: 40px; height: 40px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18)); }
.compat-ring svg { transform: rotate(-90deg); display: block; }
.compat-ring .cr-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.62rem; font-weight: 800; color: #2f483c; }

@media (max-width: 768px) {
  .mhome { display: block; }

  /* Masaüstü hero'su ve promo ikilisi mobilde YOK: hero'nun yerini .mh-hero
     kartı aldı; AuraScan alt menüdeki FAB'a, Bana Özel de "Sana Özel"
     şeridine taşındı — üçü de sayfada tekrar etmesin. */
  .home-page .home-hero { display: none !important; }
  .home-page .promo-duo-section { display: none !important; }
  /* Aura Liderleri kutusu mobil ana sayfadan kalktı: tablo artık üst bardaki
     kupa ikonunun açtığı alt panelde (js/leaderboardSheet.js). Bölüm DOM'da
     KALIYOR — panel "Glow Puanı Nasıl Kazanılır?" metnini oradan okuyor ve
     masaüstü ana sayfası bu düzenlemenin dışında tutuldu. */
  .home-page .home-rank-section { display: none !important; }

  /* ── Selamlama satırı ── */
  .mh-greet {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 5% 12px;
  }
  .mh-avatar {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--al-green-light);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }
  .mh-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .mh-hello { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
  .mh-name {
    font-size: 1rem;
    font-weight: 700;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Glow puanı — profil rozeti (.prof-glow) ve liderlik puanıyla (.rank-pts)
     AYNI kırmızı. Günün selamı buradan hero'ya taşındı, yeri bu rozete kaldı. */
  .mh-gp { font-size: 0.72rem; font-weight: 800; color: #e31837; letter-spacing: 0.01em; }
  /* Bildirim zili — Tartışmalar'daki .forum-bell-btn ile TIPATIP: aynı ikon,
     aynı 38px dokunma alanı, aynı turuncu okunmamış noktası. Ana sayfadaki
     düğme her iki sınıfı da taşır (index.html), dolayısıyla js/notifications.js
     noktayı buraya da basar ve .forum-bell-btn .aura-notif-dot stili geçerli
     olur. Buradaki tek iş, eski gri daireyi geri almak. */
  .mh-bell {
    flex: 0 0 auto;
    background: none;
    color: #111;
  }
  /* Aura Liderleri — zilin SOLUNDA. `margin-left:auto` artık zilde değil burada:
     iki düğme sağa yaslı bir çift olarak duruyor, aralarında .mh-greet'in gap'i
     yerine daha dar bir pay var (ikisi de ikon, 12px fazla açıyordu). */
  .mh-rank-btn {
    margin-left: auto;
    margin-right: -4px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    background: none;
    color: #111;
    cursor: pointer;
  }
  .mh-rank-btn:active { transform: scale(0.94); }

  /* ── Hero kartı ──
     Gradyan .promo-aurascan ile BİREBİR aynı; ana sayfada yeni bir marka rengi
     türetilmiyor. Metin sağdan %44 boşluk bırakır, görsel oraya oturur. */
  .mh-hero {
    position: relative;
    margin: 2px 5% 0;
    padding: 22px 44% 24px 20px;
    min-height: 210px;
    border-radius: var(--al-radius-img);
    background: linear-gradient(135deg, #2f483c 0%, #1e332a 100%);
    box-shadow: var(--al-shadow-card);
    overflow: hidden;
    display: flex;
    align-items: center;
  }
  .mh-hero-text { position: relative; z-index: 2; width: 100%; }
  .mh-hero-text h1 {
    font-family: var(--font-display);
    font-size: 1.32rem;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    margin: 0;
  }
  .mh-rule {
    display: block;
    width: 32px;
    height: 2px;
    background: rgba(255,255,255,0.5);
    margin: 12px 0;
  }
  .mh-hero-text p {
    font-family: var(--font-display);
    font-size: 0.76rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.82);
    margin: 0;
  }
  .mh-cta {
    display: inline-block;
    margin-top: 18px;
    padding: 10px 20px;
    background: #fff;
    color: var(--al-green);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(0,0,0,0.18);
  }
  /* Görsel sağ-alta yaslı, kart kenarından taşan kısmı kırpılır (eski hero'nun
     %135 ölçek deseninin kart içindeki karşılığı). */
  .mh-hero-img {
    position: absolute;
    right: -4%;
    bottom: 0;
    height: 118%;
    width: auto;
    max-width: 56%;
    object-fit: contain;
    object-position: right bottom;
    z-index: 1;
    pointer-events: none;
  }

  /* ── Kişisel şeritler (Cilt Özetin / Sana Özel / Trend Tartışmalar) ── */
  .mhome-rest > section { padding: 26px 5% 0; }
  /* Yeni Gelenler üstteki Trend Ürünler'in DEVAMI gibi okunmalı: 26px oraya
     fazla geliyordu (üstünde ayrıca .trending-products'ın 20px alt dolgusu
     var). İkisi arasındaki toplam boşluk 66px'ten 30px'e iner. */
  .mhome-new > section { padding: 6px 5% 0; }
  .mhome-rest .home-section-head,
  .mhome-new .home-section-head { margin-bottom: 14px; }
  /* Şerit bölümün %5 payı İÇİNDE kalır: ilk kutucuk/kart, üstündeki başlıkla
     tam aynı hizadan başlar, sağdan da eşit boşluk kalır. (Eskiden negatif pay
     + yüzde iç payla kenardan kenara akıtılıyordu; ikisi teoride birbirini
     götürmeli ama pratikte kartlar ekran kenarına taşıyordu.) */
  .mh-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0;
    padding: 4px 0 10px;
  }
  .mh-strip::-webkit-scrollbar { display: none; }
  /* Giriş/test yokken şerit tek bir davet kartına dönüşür → kaydırma kapanır. */
  .mh-strip.mh-strip-cta { overflow: visible; scroll-snap-type: none; }

  /* ── Trend Tartışmalar şeridi ──
     Kartları js/homeTrends.js çiziyor (forumdakiyle birebir .discussion-card).
     Izgara yerine yatay şerit: kart genişliği SABİTLENMELİ, yoksa flex içinde
     altı kart birbirini ezer. %82 → sağdaki kartın kenarı görünür ve şeridin
     kaydırıldığı anlaşılır. */
  .mh-disc-strip {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0;
    padding: 4px 0 10px;
    /* stretch: kartların hepsi AYNI boyda olmalı, şerit düzgün bir karusel gibi
       dursun. `flex-start` (her kart kendi içeriği kadar) bir kez denendi ve
       GERİ ALINDI — tekrar çevirmeyin. "Mesaj aşağı inmiyor" şikâyetinin sebebi
       hizalama değil, metnin yer varken kırpılmasıydı; çözümü aşağıdaki
       :has() kuralı (etiketsiz kartta 4 satır). */
    align-items: stretch;
  }
  .mh-disc-strip::-webkit-scrollbar { display: none; }
  .mh-disc-strip .discussion-card {
    /* %90: bölümün %5 payı içinde, yani viewport'un ~%81'i. Sağda kalan pay
       sonraki kartın kenarını gösterir — "kaydırılabilir" ipucu korunur. */
    flex: 0 0 90%;
    scroll-snap-align: start;
    margin: 0;
  }
  /* Sağ üstteki tarih + kategori rozeti şeritte YOK (js/discussionCard.js:76).
     Tartışmalar/ürün/blog sayfalarında aynen duruyor. */
  .mh-disc-strip .discussion-card .dc-meta-right { display: none !important; }
  /* Şeritteki kart bir TEASER: metin kırpılı, FOTOĞRAF YOK, etiketli ürün
     Rutinim'in detay başlığı gibi (style.css:3277 .rutinim-detail-hero) YATAY
     bir satır — solda foto, sağında marka + ad. Dikey 72×104 kutuya göre 42px
     daha kısa ve ürün adı okunur boyutta.
     Satır içi px stillerini ezdiği için !important zorunlu. */
  .mh-disc-strip .discussion-card .dc-media-and-tag { margin-bottom: 0 !important; }
  .mh-disc-strip .dc-media-gallery { display: none !important; }
  /* flex/max-width/aspect-ratio sıfırlamaları ŞART: style.css:1520 mobilde
     medyaya `flex:1; width:0; aspect-ratio:130/185` veriyor (forumda alanı ikiye
     bölsün diye); sıfırlanmazsa satır dikey dikdörtgene geri döner. */
  .mh-disc-strip .dc-tagged-prod {
    display: flex !important; flex-direction: row !important; align-items: center !important;
    flex: 1 1 auto !important;
    width: 100% !important; height: 58px !important;
    max-width: none !important; aspect-ratio: auto !important;
    margin-bottom: 0 !important;
    border-radius: 12px !important;
    padding: 5px !important;
  }
  /* Kare foto hücresi. Zemini BEYAZ: satırın kendi zemini (#F7F8F6) ile aynı
     olduğu sürece foto satırdan ayrışmıyordu, şimdi içinde yüzen ayrı bir kutu
     gibi duruyor. Görselin satır içi `mix-blend-mode: multiply` stili beyazda
     etkisiz (beyazla çarpım = özgün piksel), yani renk kaymıyor. */
  .mh-disc-strip .dc-tp-media {
    flex: 0 0 auto !important;
    width: 48px !important; height: 100% !important;
    padding: 4px !important;
    background: #fff !important;
    border-radius: 10px !important;
  }
  .mh-disc-strip .dc-tagged-prod img { max-width: 100% !important; max-height: 100% !important; }
  /* Panel artık görselin ÜSTÜNDE değil YANINDA: mutlak konum, gradyan, bulanık
     zemin ve maske dikey kutuda görseli okunur kılmak içindi — yatay satırda
     hepsi gereksiz, kapatılıyor. */
  .mh-disc-strip .dc-tp-label {
    position: static !important;
    flex: 1 1 auto !important; min-width: 0 !important;
    width: auto !important; height: auto !important;
    padding: 0 10px 0 2px !important;
    justify-content: center !important; align-items: flex-start !important;
    gap: 1px !important;
    background: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    mask-image: none !important; -webkit-mask-image: none !important;
  }
  .mh-disc-strip .dc-tp-brand { font-size: 0.6rem !important; letter-spacing: 0.3px !important; }
  .mh-disc-strip .dc-tp-name { font-size: 0.76rem !important; line-height: 1.2 !important; }
  /* Başlık ayıracı şeritte daha dar (satır içi 14/16 → 10/10): kart bir tık kısalsın. */
  .mh-disc-strip .discussion-card .dc-header {
    padding-bottom: 10px !important; margin-bottom: 10px !important;
  }
  /* display:-webkit-box, style.css:1508'deki mobil kırpmayı ETKİNLEŞTİRİR:
     js/discussionCard.js display'i bilerek basmıyor (forumda metnin tamamı
     görünsün diye), o yüzden kırpma orada ölü kalıyor. Şeritte 2 satır.
     `white-space: normal` ŞART: satır içi `pre-wrap` ile birlikte Blink
     line-clamp'in ÜÇ NOKTASINI çizmiyor, metni düz kesiyor. Bedeli, yazarın
     elle koyduğu satır sonlarının teaser'da düzleşmesi — tam metin bir dokunuş
     ötede, tartışma detayında. */
  .mh-disc-strip .discussion-card .dc-content {
    display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
    -webkit-line-clamp: 2 !important;
    white-space: normal !important;
    margin-bottom: 8px !important;   /* mobil 15px → teaser'da fazla */
  }
  /* Etiketli ürünü OLMAYAN kartta metin, ürün satırının boşalttığı yeri
     doldurur. Şerit `align-items: stretch` ile hepsini en uzun karta
     eşitlediğinden, etiketsiz kartta mesaj 2 satırda bitip altında "birazdan
     etiket gelecekmiş gibi" ~50px boşluk kalıyordu. Satır ~24,5px, ürün satırı
     58px → 2 ek satır farkı kapatıyor. `:has()` desteklenmezse kural sessizce
     düşer ve eski görünüm korunur. */
  .mh-disc-strip .discussion-card:not(:has(.dc-tagged-prod)) .dc-content {
    -webkit-line-clamp: 4 !important;
  }
  .mh-disc-strip .discussion-card .dc-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }

  /* Cilt özeti kutucukları — değer/renk kaynağı AuraBars.skinRows (profil
     sayfasındaki barlarla aynı eşikler). */
  .mh-tile {
    flex: 0 0 98px;
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid #eef0ef;
    border-radius: 16px;
    padding: 12px 8px 11px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-align: center;
    box-shadow: var(--al-shadow-card);
  }
  .mh-tile-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mh-tile-label { font-size: 0.66rem; color: #666; font-weight: 500; line-height: 1.2; }
  .mh-tile-val { font-size: 0.74rem; font-weight: 700; line-height: 1; }

  /* Ürün kartı şerit içinde: .product-card grid için yazılmış, burada sabit
     genişlik + kaydırma hizası gerekiyor. */
  .mh-reco-strip .product-card {
    flex: 0 0 152px;
    width: 152px;
    max-width: 152px;
    height: auto;
    scroll-snap-align: start;
    padding: 10px;
    text-align: left;
  }
  .mh-reco-strip .p-brand { font-size: 0.6rem; }
  .mh-reco-strip .p-name {
    font-size: 0.78rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* Davet kartı (giriş yok / cilt testi yok / öneri önbelleği yok) */
  .mh-cta-card {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #f6faf8;
    border: 1px solid #e3ede8;
    border-radius: 16px;
    padding: 14px 16px;
    text-decoration: none;
  }
  .mh-cta-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .mh-cta-txt strong { font-size: 0.86rem; font-weight: 700; color: #111; }
  .mh-cta-txt small { font-size: 0.72rem; color: #666; line-height: 1.4; }
  .mh-cta-go {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--al-green);
    color: #fff;
    border-radius: 999px;
    padding: 9px 14px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
  }

  /* ── Kategori kartı ("Sana Özel") ──
     Kart bir KATEGORİ'yi temsil eder; içindeki görsel o kategorideki en uyumlu
     ürün (önbellek varsa), yoksa data/category_tiles.json kapak görseli.
     Pastel zemin + üstünde beyaz kart deseni .pl-cat-tile ile aynı. */
  /* Genişlik neden 154px: 390px ekranda şeride kalan alan 337px (bölümün %5
     payı düşülmüş). 154+10+154 = 318 → iki kart tam sığar, üçüncüden ~19px'lik
     bir dilim görünür. O dilim şeridin kaydırılabilir olduğunu gösterir;
     daha geniş bir kart onu yok eder. */
  .mh-cat-card {
    flex: 0 0 154px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background: #fff;
    border: 1px solid #eef0ef;
    border-radius: 16px;
    padding: 11px 11px 13px;
    box-shadow: var(--al-shadow-card);
  }
  .mh-cat-photo {
    position: relative;
    height: 122px;
    border-radius: 14px;
    background: var(--tile-bg, #f1f4f2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  /* Ürün doğrudan pastelin üstünde — .pl-cat-photo ile AYNI desen, gerekçe orada
     yazılı (:2918): kapak şeffaf olduğu için ne harman ne beyaz panel gerekiyor.
     Kart her koşulda küratörlü kesilmiş kapağı basar (js/mobileHome.js
     catCardHTML); önbellekteki "en uyumlu ürün" fotoğrafı kesilmemiş olurdu. */
  .mh-cat-photo img {
    max-width: 86%;
    max-height: 86%;
    object-fit: contain;
    display: block;
  }
  /* Kategori kartındaki uyum halkası kaldırıldı (js/mobileHome.js catCardHTML);
     konumlandırma override'ı da silindi. .compat-ring TABAN kuralları
     (style.css ~4241) DURUYOR — onları ürün kartları kullanıyor
     (js/urunler.js AuraProductCard.badge). */
  .mh-cat-name {
    margin-top: 10px;
    font-size: 0.84rem;
    font-weight: 700;
    color: #111;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mh-cat-cnt { margin-top: 3px; font-size: 0.70rem; color: #777; }

  /* ── Arama kutusu: nötr gri ──
     Zemin beyaz kalır; çerçeve ve büyüteç yumuşak griye döner. Yazılan metin
     tam griye çekilmez (#333) — okunabilirlik. Punto DEĞİŞMEZ: style.css:4016
     tüm input'lara 16px !important veriyor (iOS yakınlaşma koruması), oraya
     dokunmak mobilde otomatik zoom'u geri getirir. */
  #hero-search {
    border-color: #d0d0d0;
    color: #333;
  }
  #hero-search::placeholder { color: #999; }
  #hero-search:focus {
    border-color: #9a9a9a;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  }
  #hero-search-btn { color: #888; }
  #hero-search-btn:hover { background: #f2f2f2; }

}

/* Çok dar ekran: hero metni görselle çakışmasın */
@media (max-width: 360px) {
  .mh-hero { padding-right: 40%; min-height: 196px; }
  .mh-hero-text h1 { font-size: 1.18rem; }
  /* 154px kart bu genişlikte ikinci kartı kenardan kırpıyor ve üçüncüden hiç
     dilim kalmıyor — şeridin kaydırılabilir olduğu belli olmaz. Kart bir tık
     küçülünce iki kart tam sığar + dilim geri gelir. */
  .mh-cat-card { flex: 0 0 140px; }
  .mh-cat-photo { height: 112px; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBİL TAM EKRAN ARAMA EKRANI  (js/searchScreen.js)
   Kabuk .tag-modal-overlay (:2176) desenini izler: sabit, beyaz,
   z-index 13000 → mobil alt menünün (9999) ÜSTÜNDE. Tamamı mobile
   kapalı; masaüstünde açılır öneri listesi (#search-suggestions) kalır.
   ═══════════════════════════════════════════════════════════════ */
.as-overlay { display: none; }

@media (max-width: 768px) {
  .as-overlay {
    position: fixed; inset: 0; z-index: 13000;
    background: #fff; flex-direction: column; overflow: hidden;
  }
  .as-overlay.open { display: flex; animation: slideUp 0.24s var(--al-out, ease); }

  /* Başlık: geri oku + "Ara" */
  .as-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px 4px; flex-shrink: 0; }
  .as-back {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0; margin-left: -6px;
    background: none; border: none; color: #111; cursor: pointer;
  }
  .as-back svg { width: 22px; height: 22px; }
  .as-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: #111; }

  /* Arama çubuğu — dolgu SİMETRİK olmalı: ikonlar top:50% ile bu kutunun
     merkezine hizalanıyor, alt dolgu üstten fazla olursa girdinin gerçek
     merkezinden kayarlar. Alttaki boşluk margin'e taşındı. */
  .as-searchbar { position: relative; display: flex; align-items: center; padding: 8px 16px; margin-bottom: 6px; flex-shrink: 0; }
  .as-glass {
    position: absolute; left: 32px; top: 50%; transform: translateY(-50%);
    display: flex; color: #6b7671; pointer-events: none;
  }
  .as-glass svg { width: 20px; height: 20px; }
  .as-input {
    width: 100%; padding: 13px 46px 13px 44px;
    border: 1.5px solid #111; border-radius: 999px; background: #fff;
    font-family: inherit; color: #111; outline: none;
  }
  .as-input::placeholder { color: #9aa8a1; }
  .as-clear {
    position: absolute; right: 26px; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; border: none; border-radius: 50%;
    background: #eef1ef; color: #5f6368; cursor: pointer;
  }
  .as-clear svg { width: 15px; height: 15px; }

  /* Gövde */
  .as-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .as-sec { padding: 12px 16px 6px; }
  .as-sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
  .as-sec-head h2 { font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; color: #111; margin: 0; }
  .as-hist-clear { background: none; border: none; padding: 0; color: #2f483c; font-size: 0.8rem; font-weight: 600; cursor: pointer; }

  /* Haplar — .forum-chip (:1690) ile aynı dil, sarmalı dizilim */
  .as-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .as-chip {
    padding: 8px 15px; border: 1px solid #e0e0e0; border-radius: 20px; background: #f6f7f6;
    font-family: inherit; font-size: 0.82rem; color: #2f483c; cursor: pointer;
    transition: background .15s var(--al-ease, ease), transform .15s var(--al-ease, ease);
  }
  .as-chip:active { background: #e9efeb; transform: scale(0.97); }

  /* Kategori kutuları — .mh-tile (:4312) ölçüleri, iki sütun */
  .as-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  /* 340px altında iki sütun kutucuğu ikonun bile sığmadığı genişliğe düşürüyor —
     etiket görünmez oluyor; o ölçüde tek sütuna in. */
  @media (max-width: 340px) { .as-cat-grid { grid-template-columns: 1fr; } }
  .as-cat {
    display: flex; align-items: center; gap: 8px;
    padding: 10px; background: #fff; border: 1px solid #eef0ef; border-radius: 16px;
    box-shadow: var(--al-shadow-card); text-decoration: none; min-width: 0;
    transition: transform .15s var(--al-out, ease);
  }
  .as-cat:active { transform: scale(0.975); }
  /* Kare kutucuk (daire değil): kapaklar dikey ürün fotoğrafı, dairede yükseklik
     sınırı görseli 13px'e düşürüp neredeyse görünmez yapıyordu. */
  .as-cat-ic {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
  }
  /* Ürün doğrudan pastelin üstünde — kapak şeffaf, gerekçe :2918'de.
     Pasteli js/searchScreen.js satır içi yazıyor. */
  .as-cat-ic img { max-width: 96%; max-height: 96%; object-fit: contain; }
  /* flex:1 + min-width:0 ŞART: onlarsız uzun etiket ("Nemlendiriciler") dar
     ekranda 0 piksele büzülüp tamamen kayboluyor (ellipsis bile çıkmıyor). */
  .as-cat-lbl {
    flex: 1 1 auto; min-width: 0;
    font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; color: #111;
    line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Sonuç satırları — #search-suggestions .ss-row (:2645) ile aynı ölçüler */
  .as-results { padding-bottom: 24px; }
  .as-row {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 16px; text-decoration: none; color: #333;
    border-bottom: 1px solid #f0f2f1;
  }
  .as-row img {
    width: 44px; height: 44px; flex-shrink: 0; object-fit: contain;
    border-radius: var(--al-radius-img-sm); background: var(--al-img-bg);
  }
  .as-row-txt { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
  .as-row-brand { font-size: 0.66rem; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: #8a9a92; }
  .as-row-name { font-size: 0.86rem; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .as-brand-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 16px; background: #f6faf8; border-bottom: 1px solid #f0f2f1;
    text-decoration: none; color: #1e332a; font-weight: 700; font-size: 0.9rem;
  }
  .as-brand-row .as-arrow { color: #2f483c; font-weight: 800; }

  .as-row-sk { pointer-events: none; }
  .as-sk-img { width: 44px; height: 44px; border-radius: var(--al-radius-img-sm); flex-shrink: 0; }
  .as-sk-l1 { width: 70px; height: 9px; border-radius: 4px; }
  .as-sk-l2 { width: 180px; height: 11px; border-radius: 4px; }

  .as-empty { padding: 42px 24px 18px; text-align: center; }
  .as-empty p { margin: 0; font-size: 0.95rem; color: #111; font-weight: 600; }
  .as-empty .as-empty-sub { margin-top: 6px; font-size: 0.84rem; color: #7a8a82; font-weight: 400; }
}

@media (prefers-reduced-motion: reduce) {
  .as-overlay.open { animation: none; }
  .as-chip, .as-cat { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   EKSİK ÜRÜN BİLDİRİMİ  (js/missingProduct.js)
   "Aradığını bulamadın mı?" — sonuçsuz aramaların boş durumuna gömülür.
   Medya sorgusu YOK: üç arama ekranının ikisi (Ürünler ızgarası, ana sayfa
   açılır listesi) masaüstünde de çalışıyor.
   ═══════════════════════════════════════════════════════════════ */
.amp-cta {
    margin: 18px auto 0;
    max-width: 420px;
    padding: 20px 22px;
    background: var(--al-surface, #fff);
    border: 1px solid #e8ebe9;
    border-radius: 16px;
    box-shadow: var(--al-shadow-card);
    text-align: center;
}
.amp-cta .amp-title { margin: 0; font-size: 0.98rem; font-weight: 700; color: #111; }
.amp-cta .amp-sub { margin: 6px 0 0; font-size: 0.85rem; color: #7a8a82; font-weight: 400; line-height: 1.45; }
.amp-btn {
    margin-top: 14px;
    padding: 11px 22px;
    background: var(--al-green, #2f483c);
    color: #fff;
    border: none;
    border-radius: 24px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s var(--al-ease), transform 0.18s var(--al-ease);
}
.amp-btn:hover { background: #24382e; }
.amp-btn:active { transform: scale(0.96); }
/* Gönderildikten sonra: aynı kart yerinde teşekkür metnine dönüşür. */
.amp-cta.amp-done { background: #f2f8f4; border-color: #d9e8e0; }
.amp-cta.amp-done .amp-title { color: var(--al-green, #2f483c); }
/* Dar yerler (ana sayfa arama açılır listesi) — kart değil, tek satır şerit. */
.amp-cta.amp-compact {
    margin: 0;
    max-width: none;
    padding: 14px 16px;
    border: none;
    border-top: 1px solid #eee;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    text-align: left;
}
.amp-cta.amp-compact .amp-title { font-size: 0.88rem; }
.amp-cta.amp-compact .amp-sub { display: none; }
.amp-cta.amp-compact .amp-btn { margin-top: 9px; padding: 8px 16px; font-size: 0.82rem; }

/* ── Modal ── */
.amp-overlay {
    position: fixed;
    inset: 0;
    /* Arama overlay'i (.as-overlay) ve ürün seçici modalın (13000) üstünde
       kalmalı — CTA onların İÇİNDEN açılıyor. */
    z-index: 14000;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.amp-modal {
    background: #fff;
    border-radius: 18px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}
.amp-modal-head { padding: 22px 24px 6px; }
.amp-modal-head h3 { margin: 0; font-size: 1.2rem; font-weight: 700; color: #111; }
.amp-modal-head p { margin: 6px 0 0; font-size: 0.88rem; color: #888; line-height: 1.45; }
.amp-modal-body { padding: 16px 24px 0; }
/* Aranan terim SALT OKUNUR gösterilir: kullanıcı ne bildirdiğini görsün ama
   sorguyu değiştirip alakasız metin göndermesin (sunucu da kırpıyor). */
.amp-query {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 12px;
    background: #f5f7f6;
    border-radius: 10px;
    margin-bottom: 12px;
}
.amp-query-label { font-size: 0.75rem; color: #8a9a92; flex-shrink: 0; }
.amp-query-val { font-size: 0.95rem; font-weight: 600; color: #111; word-break: break-word; }
#amp-msg {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 0.95rem;
    font-family: inherit;
    resize: vertical;
    outline: none;
}
#amp-msg:focus { border-color: var(--al-green, #2f483c); }
.amp-err { color: #c0392b; font-size: 0.82rem; min-height: 1em; margin-top: 6px; }
.amp-modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 8px 24px 22px; }
.amp-b-ghost, .amp-b-primary {
    padding: 11px 20px;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}
.amp-b-ghost { background: #f0f0f0; color: #444; font-weight: 600; }
.amp-b-primary { background: var(--al-green, #2f483c); color: #fff; }
.amp-b-primary:disabled { opacity: 0.55; cursor: default; }

/* ═══════════════════════════════════════════════════════════════
   CİLT ÖZETİ DETAY PANELİ  (js/skinSheet.js)
   Kutucuğa basınca aşağıdan açılan, sayfayı TAM KAPLAMAYAN panel.
   Kabuk .m-subcat-panel (:1792) fikri, ama translateY ile.
   z-index 12100/12110 → alt menü (9999), filtre çekmecesi (10005) ve
   bildirim çekmecesinin (12001) üstünde.
   ═══════════════════════════════════════════════════════════════ */
.sk-backdrop, .sk-sheet { display: none; }

@media (max-width: 768px) {
  /* Kutucuk artık düğme — tarayıcının buton varsayılanları sıfırlanıyor. */
  .mh-tile {
    font: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: transform .15s var(--al-out, ease);
  }
  .mh-tile:active { transform: scale(0.97); }

  .sk-backdrop {
    display: block; position: fixed; inset: 0; z-index: 12100;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity .25s var(--al-ease, ease);
  }
  .sk-backdrop.open { opacity: 1; pointer-events: auto; }

  .sk-sheet {
    display: flex; flex-direction: column;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 12110;
    max-height: 82vh;
    background: #fff;
    border-top-left-radius: 22px; border-top-right-radius: 22px;
    box-shadow: 0 -6px 26px rgba(0,0,0,0.18);
    transform: translateY(100%);
    transition: transform .3s var(--al-out, ease);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .sk-sheet.open { transform: translateY(0); }

  .sk-grab {
    width: 40px; height: 4px; border-radius: 4px; background: #dfe3e1;
    margin: 8px auto 2px; flex-shrink: 0;
  }
  .sk-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 18px 10px; flex-shrink: 0;
  }
  .sk-title { margin: 0; font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; color: #111; }
  .sk-close {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; margin-right: -6px;
    background: none; border: none; color: #5f6368; cursor: pointer;
  }
  .sk-close svg { width: 20px; height: 20px; }

  .sk-body {
    flex: 1; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 22px;
  }

  /* ── Yarım daire ölçek ── */
  .sk-gauge { position: relative; padding: 4px 18px 0; text-align: center; }
  .sk-gauge-svg { display: block; width: 100%; max-width: 240px; margin: 0 auto; }
  .sk-gauge-fill { transition: stroke-dashoffset .6s cubic-bezier(0.16, 1, 0.3, 1); }
  /* Yarım dairenin ortası: yayın altına değil, İÇİNE hizalanır. */
  .sk-gauge-mid {
    position: absolute; left: 0; right: 0; top: 44%;
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    pointer-events: none;
  }
  .sk-gauge-pct { font-family: var(--font-display); font-size: 2.1rem; font-weight: 800; line-height: 1; }
  .sk-gauge-sub { font-size: 0.78rem; font-weight: 700; }
  .sk-gauge-note { margin: 2px 0 0; font-size: 0.7rem; color: #98a49e; }

  .sk-ozet {
    margin: 12px 18px 4px; font-size: 0.86rem; line-height: 1.45; color: #44514b;
    text-align: center;
  }

  /* ── Bölümler ── */
  .sk-sec { padding: 16px 18px 4px; }
  .sk-sec h3 { margin: 0 0 4px; font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: #111; }
  .sk-sec-note { margin: 0 0 10px; font-size: 0.74rem; color: #98a49e; line-height: 1.35; }

  .sk-avoid { list-style: none; margin: 8px 0 0; padding: 0; }
  .sk-avoid li {
    display: flex; flex-direction: column; gap: 2px;
    padding: 9px 0; border-bottom: 1px solid #f2f4f3;
  }
  .sk-avoid li:last-child { border-bottom: none; }
  .sk-avoid-ad { font-size: 0.86rem; font-weight: 700; color: #b3261e; }
  .sk-avoid-neden { font-size: 0.78rem; color: #6b7671; line-height: 1.35; }

  /* Ürün şeridi: ana sayfadaki .tp-card ile aynı; panelin iç kenarına taşar
     ki son kart kenardan kırpılmış görünsün (kaydırılabilir olduğu belli olur). */
  .sk-picks { margin: 0 -18px; padding: 4px 18px 8px; }

  /* ── Aura Liderleri paneli (js/leaderboardSheet.js) ──
     Kabuğun tamamı .sk-* sınıflarından geliyor; buradaki tek iş gövdeye yatay
     pay vermek. Satırların kendisi .rank-* taban kurallarından (style.css:578+)
     — tartismalar.html'in sağ paneliyle aynı görünüm. */
  .rk-sheet .rank-list { padding: 4px 18px; gap: 0; }
  .rk-sheet .rank-row { padding: 11px 0; border-radius: 0; }
  .rk-sheet .rank-row + .rank-row { border-top: 1px solid #f0f2f1; }
  .rk-sheet .rank-empty { padding: 10px 0; }
  .rk-sheet .rank-howto {
    margin: 14px 18px 0; padding-top: 14px; border-top: 1px solid #f0f2f1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-sheet, .sk-backdrop, .mh-tile { transition: none; }
  .sk-gauge-fill { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   ANALİZ TESTLERİ  (cilt-analizi.html + sac-analizi.html)
   Motor: js/quizEngine.js — iki sayfa aynı .ca-* markup'ını üretir.
   Eskiden bu blok İKİ HTML'in <style> etiketinde birebir kopyaydı
   (52 satır × 2, sıfır fark); tek kopyaya alındı. Sayfaya özel olan
   tek şey gövde zemini: <body class="quiz-page"> ile kapsanıyor.
   ═══════════════════════════════════════════════════════════════ */

/* Marka mint gradyanı; bitiş tonu --al-bg-mid ile AYNI olmalı, yoksa 260px'te ton atlar. */
.quiz-page { background: linear-gradient(180deg, #f2f8f4 0%, #f8f9f7 260px); }
/* Masaüstünde sayfa zemini beyaz → gradyanın bitiş tonu da beyaz olmalı,
   yoksa 260px'te gri bir bant kalıyor. */
@media (min-width: 769px) {
    .quiz-page { background: linear-gradient(180deg, #f2f8f4 0%, #ffffff 260px); }
}
.quiz-page .navbar-hero { position: sticky; top: 0; z-index: 1000; }

.ca-wrap { max-width: 640px; margin: 30px auto 90px; padding: 0 18px; }
.ca-head { text-align: center; margin-bottom: 22px; }
.ca-head h1 { font-family: var(--font-display); font-size: 1.9rem; color: #1e332a; margin: 0 0 6px; }
.ca-head p { color: #567; font-size: 0.95rem; margin: 0; }

/* İlerleme: SORU SAYACI DEĞİL YÜZDE. Koşullu alt sorularla toplam soru sayısı
   kullanıcıdan kullanıcıya değiştiği için "3 / 7" anlamsızdı. */
.ca-progress-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.ca-progress { flex: 1; height: 8px; background: #e4ede8; border-radius: 20px; overflow: hidden; }
.ca-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #2f483c, #3f9b6e); border-radius: 20px; transition: width .35s cubic-bezier(0.16,1,0.3,1); }
.ca-progress-num { font-size: 0.82rem; font-weight: 700; color: #2f483c; white-space: nowrap; }

/* Panel SAF BEYAZ: sayfa zemini kırık beyaza kaydığı için (--al-bg-*) kartın da
   kırık olması ikisini birbirine karıştırıyordu. */
.ca-card { background: #fff; border: 1px solid #e7ece9; border-radius: 18px; padding: 28px 26px; box-shadow: 0 8px 30px rgba(47,72,60,0.06); animation: caIn .35s cubic-bezier(0.16,1,0.3,1); }
@keyframes caIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ca-q-title { font-size: 1.25rem; font-weight: 700; color: #111; line-height: 1.35; margin: 0 0 6px; }
.ca-q-sub { font-size: 0.85rem; color: #8a9a92; margin: 0 0 20px; }

.ca-options { display: flex; flex-direction: column; gap: 12px; }
.ca-opt { display: flex; align-items: center; gap: 14px; padding: 15px 16px; border: 1.5px solid #e4e9e6; border-radius: 12px; cursor: pointer; transition: all .18s ease; background: #fcfdfc; user-select: none; }
.ca-opt:hover { border-color: #b9d3c6; background: #f6faf7; }
.ca-opt.sel { border-color: #2f483c; background: #eaf4ef; box-shadow: 0 0 0 3px rgba(47,72,60,0.08); }
.ca-opt .tick { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #cfdad4; display: flex; align-items: center; justify-content: center; transition: all .18s; }
.ca-opt.multi .tick { border-radius: 6px; }
.ca-opt.sel .tick { border-color: #2f483c; background: #2f483c; }
.ca-opt.sel .tick svg { opacity: 1; }
.ca-opt .tick svg { width: 13px; height: 13px; opacity: 0; stroke: #fff; }
.ca-opt .label { font-size: 0.95rem; color: #223; line-height: 1.4; }

.ca-hint { font-size: 0.78rem; color: #999; margin-top: 14px; text-align: center; }

.ca-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; gap: 12px; }
.ca-btn { padding: 13px 26px; border-radius: 12px; font-weight: 700; font-size: 0.95rem; cursor: pointer; border: none; transition: all .18s; font-family: inherit; }
.ca-btn-back { background: #F7F8F6; border: 1px solid #dde3e0; color: #667; }
.ca-btn-back:hover { background: #f4f6f5; }
.ca-btn-next { background: #2f483c; color: #fff; box-shadow: 0 6px 16px rgba(47,72,60,0.22); }
.ca-btn-next:hover:not(:disabled) { background: #24382e; }
.ca-btn-next:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }

/* Sonuç ekranı */
.ca-done { text-align: center; padding: 20px 10px; }
.ca-done .badge { width: 84px; height: 84px; border-radius: 50%; background: #eaf4ef; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.ca-done h2 { font-family: var(--font-display); color: #1e332a; font-size: 1.6rem; margin: 0 0 8px; }
.ca-done p { color: #567; margin: 0 auto 22px; max-width: 420px; }
.ca-summary { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 24px; }
.ca-pill { background: #f0f4f2; color: #2f483c; font-size: 0.82rem; font-weight: 600; padding: 7px 14px; border-radius: 20px; }

/* ── Mini tamamlama bandı (js/mobileHome.js paintTopUp) ──
   v1'den taşınmış profillerde eksik kalan soruları hatırlatır. Yalnız gerçekten
   eksik soru varsa basılır ve kapatılabilir; zorunlu bir adım DEĞİL. */
@media (max-width: 768px) {
  .mh-topup { position: relative; margin: 12px 5% 0; }
  .mh-topup-link {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 38px 12px 14px;
    background: #eaf4ef; border: 1px solid #cfe3d8; border-radius: 14px;
    text-decoration: none; color: inherit;
  }
  .mh-topup-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
  .mh-topup-txt strong { font-size: 0.86rem; font-weight: 700; color: #1e332a; }
  .mh-topup-txt small { font-size: 0.72rem; color: #55705f; line-height: 1.4; }
  .mh-topup-go { font-size: 1.05rem; color: #2f483c; flex-shrink: 0; }
  .mh-topup-x {
    position: absolute; top: 6px; right: 8px;
    width: 24px; height: 24px; padding: 0; border: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: transparent; color: #7d9a8a; font-size: 1.05rem; line-height: 1; cursor: pointer;
  }
}


/* ═══════════════════════════════════════════════════════════════
   MOBİL UYGULAMA KATMANI: GÜVENLİ ALAN + KLAVYE
   viewport-fit=cover ile sayfa çentik / durum çubuğu / ana ekran çizgisi
   altına uzanır. Mobil Safari dikey modda üst inset 0 olduğu için web
   sitesinde görünür bir değişiklik olmaz; Capacitor uygulamasında
   (Android 16 kenardan kenara zorunlu) ve yatay modda devreye girer.
   --safe-area-inset-*: Capacitor'ın env() desteklemeyen eski WebView'lar
   için enjekte ettiği yedek değişkenler. (MOBIL_BULGULAR.md css-touch-ux#3-6)
   ═══════════════════════════════════════════════════════════════ */
:root {
  --sat: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --sab: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --sal: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
  --sar: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
}

@media (max-width: 768px) {
  /* Akıştaki içerik durum çubuğunun altından başlar. */
  body { padding-top: var(--sat); padding-left: var(--sal); padding-right: var(--sar); }

  /* Durum çubuğu maskesi: kaydırılan içerik çentiğin altında görünmesin.
     z-index 1001: sticky çubukların (1000) üstünde, alt menünün (9999) ve
     tam ekran katmanların (10000+) altında; onlar kendi başlık payını alır. */
  body::before {
    content: ""; position: fixed; top: 0; left: 0; right: 0;
    height: var(--sat); background: var(--al-bg-top, #fdfdfc);
    z-index: 1001; pointer-events: none;
  }

  /* Sticky çubuklar maskenin hemen altında yapışır. html body: sayfa içi
     <style> bloklarındaki `top: 0` tanımlarını da yensin. */
  html body .mobile-top-controls,
  html body .navbar-hero,
  html body .mega-nav,
  html body .navbar { top: var(--sat); }

  /* Tam ekran katmanların başlıkları */
  .as-header { padding-top: calc(12px + var(--sat)); }
  .tag-modal-header { padding-top: calc(15px + var(--sat)); }
  .notif-head { padding-top: calc(14px + var(--sat)); }
  .products-page .sidebar {
    padding-top: calc(20px + var(--sat));
    padding-bottom: calc(20px + var(--sab));
  }
  .products-page .sidebar .sidebar-close-btn { top: calc(15px + var(--sat)); }

  /* Alt güvenli alan: kaydırılan gövdeler, alt sayfalar, çerez bandı */
  .as-results { padding-bottom: calc(24px + var(--sab)); }
  .notif-body { padding-bottom: calc(24px + var(--sab)); }
  .m-subcat-panel { padding-bottom: var(--sab); }
  .acc-banner { padding-bottom: calc(18px + var(--sab)) !important; }

  /* Forum FAB'ı alt menüyle aynı inset'i paylaşır; aksi hâlde ana ekran
     çizgisi olan cihazlarda menünün üstüne ~18px biner. */
  .fab-btn { bottom: calc(88px + var(--sab)) !important; }

  /* Yumuşak klavye açıkken alta sabitlenmiş öğeler yazılan alanı örtmesin.
     body.kb-open sınıfını js/appBridge.js (Capacitor Keyboard) ya da
     visualViewport sezgisi yönetir. */
  body.kb-open .mobile-tab-bar,
  body.kb-open .fab-btn,
  body.kb-open .acc-banner { display: none !important; }
  body.kb-open.has-tab-bar { padding-bottom: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBİL ÜST ÇUBUK  (js/topBar.js) — YALNIZ MOBİL UYGULAMADA
   Alt sayfalarda geri oku + başlık. Web sitesinde GÖSTERİLMEZ (orada
   tarayıcının kendi geri tuşu var); bütün kurallar html.is-app altında.
   is-app sınıfını mobil paket <head>'deki satır içi betikle sayfa çizilmeden
   ÖNCE ekler (src/buildDeploy.js mobilizeHtml). <body data-topbar="..."> olan
   sayfalarda yer CSS ile önceden ayrılır; çubuk sabit (fixed) olduğu için
   ertelenmiş script çizdiğinde içerik zıplamaz.
   ═══════════════════════════════════════════════════════════════ */
:root { --topbar-h: 52px; }
.m-topbar { display: none; }

@media (max-width: 768px) {
  html.is-app body[data-topbar] { padding-top: calc(var(--topbar-h) + var(--sat)); }

  html.is-app .m-topbar {
    display: flex; align-items: center; gap: 4px;
    position: fixed; top: 0; left: 0; right: 0; z-index: 1002;
    height: calc(var(--topbar-h) + var(--sat));
    padding: var(--sat) calc(12px + var(--sar)) 0 calc(4px + var(--sal));
    background: var(--al-bg-top, #fdfdfc);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
  .m-topbar-back {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex-shrink: 0; padding: 0;
    background: none; border: none; border-radius: 50%; color: #1e332a; cursor: pointer;
  }
  .m-topbar-back:active { background: rgba(47, 72, 60, 0.08); }
  .m-topbar-title {
    flex: 1; min-width: 0;
    font-size: 1.05rem; font-weight: 700; color: #1e332a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* Sağdaki eylem (ürün sayfasında Paylaş; js/appNative.js ekler). */
  .m-topbar-action {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex-shrink: 0; padding: 0;
    background: none; border: none; border-radius: 50%; color: #1e332a; cursor: pointer;
  }
  .m-topbar-action:active { background: rgba(47, 72, 60, 0.08); }

  /* Üst çubuklu sayfalarda yapışkan öğeler çubuğun altında dursun. */
  html.is-app body[data-topbar] .navbar-hero,
  html.is-app body[data-topbar] .navbar { top: calc(var(--topbar-h) + var(--sat)); }
}

/* ═══════════════════════════════════════════════════════════════
   MOBİL UYGULAMA MODU  (js/appBridge.js → html.is-app)
   Yalnız Capacitor uygulamasında geçerli; web sitesinde hiçbir kural
   eşleşmez. Uygulamada web kabuğu gizlenir (Apple 4.2: "web sitesinden
   farkı yok" reddi), yasal bağlantılar profildeki Yasal ve Destek
   kartına taşınır (.app-only).
   ═══════════════════════════════════════════════════════════════ */
.app-only { display: none; }
html.is-app .app-only { display: block; }
html.is-app .site-footer,
html.is-app #aura-consent-banner,
html.is-app .acc-banner { display: none !important; }

/* Bağlantı yokken üstte ince uyarı şeridi (durum çubuğunun altında). */
.app-offline-bar {
  position: fixed; left: 0; right: 0; top: var(--sat, 0px); z-index: 20000;
  padding: 6px 16px; text-align: center;
  background: #2f483c; color: #fff; font-size: 0.82rem; font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   TOPLULUK GÜVENLİĞİ  (js/ugcSafety.js)
   Şikayet / engelle menüsü, şikayet ve kural pencereleri, bildirim balonu.
   ═══════════════════════════════════════════════════════════════ */
.ugc-menu { position: relative; display: inline-flex; }
.ugc-menu-btn {
  display: flex; align-items: center; justify-content: center;
  min-width: 36px; min-height: 36px; padding: 4px;
  background: transparent; border: none; border-radius: 50%; color: #888; cursor: pointer;
}
.ugc-menu-btn:hover, .ugc-menu-btn:focus-visible { background: rgba(0, 0, 0, 0.05); color: #333; }
.ugc-menu .dc-dropdown { min-width: 180px; z-index: 300; }
.ugc-menu .dc-dropdown-item { text-align: left; white-space: nowrap; }
@media (max-width: 768px), (pointer: coarse) {
  .ugc-menu-btn { min-width: 44px; min-height: 44px; }
  .ugc-menu .dc-dropdown-item { padding: 13px 20px; font-size: 0.92rem; }
}
/* Değerlendirme kartları: menü sağ üst köşede (kendi yorumundaki × ile aynı yer). */
.rv-card { position: relative; }
.rv-card > .ugc-menu { position: absolute; top: 10px; right: 10px; z-index: 2; }
.rv-reply-meta > .ugc-menu { margin-left: auto; }
.rv-reply-meta > .ugc-menu .ugc-menu-btn { min-width: 32px; min-height: 32px; }

.ugc-sheet-overlay {
  position: fixed; inset: 0; z-index: 100001;
  background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.ugc-sheet {
  background: #fff; border-radius: 18px; width: 100%; max-width: 460px;
  max-height: 88vh; max-height: min(88vh, 88dvh); overflow-y: auto;
  padding: 22px 22px 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.ugc-sheet-title { margin: 0 0 6px; font-size: 1.15rem; font-weight: 800; color: #111; }
.ugc-sheet-sub { margin: 0 0 14px; font-size: 0.88rem; color: #666; line-height: 1.5; }
.ugc-sheet-sub a { color: #2f483c; text-decoration: underline; }
.ugc-reasons { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.ugc-reason {
  display: flex; align-items: center; gap: 12px; min-height: 44px;
  padding: 6px 10px; border-radius: 10px; cursor: pointer; font-size: 0.95rem; color: #222;
}
.ugc-reason:hover { background: #f6f7f5; }
.ugc-reason input { width: 18px; height: 18px; accent-color: #2f483c; flex-shrink: 0; }
.ugc-note {
  width: 100%; box-sizing: border-box; padding: 10px 12px; margin-bottom: 14px;
  border: 1px solid #ddd; border-radius: 10px; font-size: 0.95rem; font-family: inherit; resize: vertical;
}
.ugc-rules { margin: 0 0 14px; padding-left: 20px; color: #333; font-size: 0.92rem; line-height: 1.55; }
.ugc-rules li { margin-bottom: 6px; }
.ugc-sheet-actions { display: flex; gap: 10px; justify-content: flex-end; }
.ugc-btn {
  min-height: 44px; padding: 10px 18px; border-radius: 12px; border: none;
  font-weight: 700; font-size: 0.92rem; cursor: pointer; font-family: inherit;
}
.ugc-btn:disabled { opacity: 0.6; cursor: default; }
.ugc-btn-ghost { background: #f0f0f0; color: #444; }
.ugc-btn-danger { background: #e31837; color: #fff; }
.ugc-btn-primary { background: #2f483c; color: #fff; }
@media (max-width: 768px) {
  /* Telefonda alttan açılan sayfa: başparmağa yakın, ana ekran çizgisinin üstünde. */
  .ugc-sheet-overlay { align-items: flex-end; padding: 0; }
  .ugc-sheet {
    max-width: none; border-radius: 20px 20px 0 0;
    padding-bottom: calc(18px + var(--sab, 0px));
  }
}

.ugc-toast {
  position: fixed; left: 50%; bottom: calc(100px + var(--sab, 0px)); z-index: 100002;
  transform: translate(-50%, 20px); opacity: 0;
  max-width: min(92vw, 440px); padding: 12px 18px; border-radius: 12px;
  background: #1e332a; color: #fff; font-size: 0.9rem; line-height: 1.45; text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); transition: opacity 0.2s, transform 0.2s; pointer-events: none;
}
.ugc-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Profil: engellenen kullanıcılar listesi */
.ugc-blocked-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid #f0f0f0; }
.ugc-blocked-row img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.ugc-blocked-row span { flex: 1; min-width: 0; font-weight: 600; color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ugc-blocked-row button {
  min-height: 36px; padding: 6px 14px; border-radius: 10px; border: 1px solid #ddd;
  background: #fff; color: #2f483c; font-weight: 600; cursor: pointer; font-family: inherit;
}
.ugc-blocked-empty { margin: 0; padding: 8px 16px 14px; font-size: 0.85rem; color: #777; line-height: 1.5; }
/* Kart başlığında menü: dokunma alanı 44px, yerleşimde kapladığı yer ~28px
   (negatif kenar boşluğu). Sol blok daralabilsin; aksi hâlde uzun adlı
   kartlarda menü kartı sağdan taşırıyordu. */
.dc-header > div:first-child { min-width: 0; flex: 1 1 auto; }
.dc-header .ugc-menu-btn { margin: -8px -10px -8px -6px; }
.pd-head-right .ugc-menu { margin: -6px -10px 0 0; }
.dc-header .dc-user-meta { flex: 1 1 auto; }
.dc-header .dc-user-meta > div { max-width: 100%; }
.dc-header .dc-meta-right { flex-shrink: 0; }
/* Ürün sayfası yorum önizleme kartı: menü alt satırın sağında. */
.pr-card-foot > .pr-ugc-menu { margin-left: auto; margin-right: -8px; margin-bottom: -8px; }
/* Önizleme kartı kaydırma şeridinde kırpılıyor: liste yukarı açılsın. */
.pr-ugc-menu .dc-dropdown { top: auto; bottom: 100%; }
/* Tam yorum kartı: menü varsa başlığın sağı ona yer açsın (tarihle çakışmasın). */
.rv-card > .ugc-menu { top: 8px; right: 4px; }
.rv-card > .ugc-menu + .rvh { padding-right: 34px; }

/* "Tıbbi tavsiye değildir" notu: cilt/saç testi sonuçları ve ürün uyum paneli
   (App Store 1.4.1, Google Play sağlık içeriği; MOBIL_BULGULAR.md store-compliance#5). */
.tibbi-not {
  margin: 14px auto 18px; max-width: 420px;
  font-size: 0.78rem; line-height: 1.5; color: #777; text-align: center;
}
.pd-compat-main .tibbi-not { margin: 16px 0 0; max-width: none; text-align: left; }

/* ═══════════════════════════════════════════════════════════════
   DOKUNMA HEDEFLERİ — en az 44×44 (Apple HIG, Material 48dp)
   MOBIL_BULGULAR.md css-touch-ux#8. Ölçümler 375px'te yapıldı.
   İki yöntem:
     1) Blok düğmeler ve satırlar: gerçek min-height (görünüm çok az değişir).
     2) Küçük simge/metin denetimleri: görünüm AYNI kalır, ortalanmış
        görünmez bir ::after alanı dokunuşu en az 44×44 yakalar. Bu öğelerin
        hiçbirinde ::after başka işe kullanılmıyor (denetlendi).
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 1) Gerçek boyut */
  .forum-mode-btn, .pd-tab, #iv-toggle, .attr-more,
  .act-primary, .act-ghost, .gecmis-tab, .legal-tab-btn { min-height: 44px; }
  .pg-btn { min-width: 44px; min-height: 44px; }
  label.filter-label { min-height: 44px; }
  .notif-back { width: 44px; height: 44px; }

  /* 2) Görünmez dokunma alanı */
  #forum-explore-btn, .forum-chip, #forum-sort-btn, #pl-msort-btn,
  #m-filter-open-btn, .cat-pill, .brand-name, #mh-rank, #mh-cta,
  #pr-write-btn, #inline-new-post-btn, .rv-helpful-btn, .pr-ai-vote,
  .gecmis-tab, .reg-link-btn, .login-link, #auth-forgot-link,
  #referral-btn, .acc-foot-link, .rt-back { position: relative; }

  #forum-explore-btn::after, .forum-chip::after, #forum-sort-btn::after,
  #pl-msort-btn::after, #m-filter-open-btn::after, .cat-pill::after,
  .brand-name::after, #mh-rank::after, #mh-cta::after,
  #pr-write-btn::after, #inline-new-post-btn::after,
  .rv-helpful-btn::after, .pr-ai-vote::after, .reg-link-btn::after,
  .login-link::after, #auth-forgot-link::after, #referral-btn::after,
  .acc-foot-link::after, .rutinim-remove::after,
  /* zaten konumlanmış (absolute/relative) olanlar */
  .rt-back::after, #sidebar-close-btn::after, #pd-report-btn::after,
  #detail-fav-btn::after, .wishlist-icon::after, #hero-search-btn::after,
  .forum-bell-btn::after, .rt-check::after, .rutinim-modal-close::after {
    content: '';
    position: absolute; left: 50%; top: 50%;
    width: 100%; height: 100%;
    min-width: 44px; min-height: 44px;
    transform: translate(-50%, -50%);
  }

  /* Kaydırılan çip satırı: genişleyen alan satırın içinde kalsın, satır
     dikeyde kaydırılabilir hâle gelmesin. */
  .forum-category-chips { padding-top: 9px; padding-bottom: 9px; overflow-y: hidden; }
}
/* Telefonda (≤600px) rutin satırındaki sil düğmesi statik; 601-768px'te hâlâ
   absolute olduğu için konumlandırma yalnız burada. (.rt-back.pl-back daha
   özgül kuralla absolute kalır.) */
@media (max-width: 600px) {
  .rutinim-remove { position: relative; }
}