/* ============================================
   Tütün Dünyası — Ana Stil Dosyası
   Magma Kyoto Hibrit Palet
   ============================================ */

/* Self-hosted fonts — display:optional + preload = FOUT YOK */
@font-face {
  font-family: 'Fraunces';
  font-weight: 700 800;
  font-style: normal;
  font-display: optional;
  src: url('../fonts/fraunces-latin.woff2') format('woff2');
  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: 'Fraunces';
  font-weight: 700 800;
  font-style: normal;
  font-display: optional;
  src: url('../fonts/fraunces-latin-ext.woff2') format('woff2');
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-weight: 400 700;
  font-style: normal;
  font-display: optional;
  src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
  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: 'Space Grotesk';
  font-weight: 400 700;
  font-style: normal;
  font-display: optional;
  src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Fallback font metrikleri — optional block süresi aşılırsa layout shift'i minimize eder */
@font-face{font-family:'Fraunces Fallback';src:local('Georgia');size-adjust:105%;ascent-override:95%;descent-override:22%;line-gap-override:0%}
@font-face{font-family:'SG Fallback';src:local('Segoe UI'),local('system-ui'),local('Arial');size-adjust:102%;ascent-override:92%;descent-override:22%;line-gap-override:0%}

:root{
  --fire:#FF6000;
  --ember:#D85530;
  --lava:#CC4A00;
  --sunset:#E88058;
  --glow:#FF8C40;
  --spark:#FFB070;

  --g-rich:linear-gradient(135deg,var(--lava),var(--ember),var(--fire),var(--glow),var(--fire),var(--ember),var(--lava));
  --g-main:linear-gradient(135deg,var(--lava),var(--fire),var(--glow));
  --g-warm:linear-gradient(135deg,var(--ember),var(--fire));
  --g-soft:linear-gradient(135deg,var(--sunset),var(--glow));
  --g-deep:linear-gradient(135deg,#B84020,var(--ember),var(--fire));

  --bg:#FFFFFF;
  --surface:#FAFAF8;
  --tint:#FFF4EB;
  --tint2:#FFF2EC;
  --text:#1C1210;
  --dim:#78716C;
  --muted:#A8A29E;
  --border:#E7E5E4;
  --border-h:rgba(255,96,0,.25);

  --success:#16A34A;
  --info:#0EA5E9;
  --warn:#F59E0B;
  --danger:#DC2626;
  --whatsapp:#25D366;

  --hf:'Fraunces','Fraunces Fallback',Georgia,serif;
  --bf:'Space Grotesk','SG Fallback',system-ui,sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
  --radius:12px;
  --shadow:0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 6px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:0 10px 15px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.04);
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--bf);font-size:15px;line-height:1.6;color:var(--text);background:var(--bg)}
img{max-width:100%;height:auto;display:block}
a{color:var(--fire);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--lava)}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input,select,textarea{font-family:inherit;font-size:inherit}
h1,h2,h3,h4,h5,h6{font-family:var(--hf);font-weight:700;line-height:1.25;color:var(--text)}

/* ---- Gradient Text ---- */
.gx{background:var(--g-rich);background-size:300% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gx 6s linear infinite}
.gx-s{background:var(--gx,var(--g-warm));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@keyframes gx{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes cardGlow{from{background-position:0 0,0% 50%}to{background-position:0 0,200% 50%}}

/* ---- Container ---- */
.container{max-width:1200px;margin:0 auto;padding:0 1rem}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:var(--radius);font-weight:600;font-size:.9rem;transition:all .2s var(--ease);letter-spacing:.02em}
.btn-p{background:var(--g-warm);color:#fff;box-shadow:0 2px 8px rgba(255,96,0,.25)}
.btn-p:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(255,96,0,.35);color:#fff}
.btn-p:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-s{background:var(--surface);color:var(--text);border:1px solid var(--border)}
.btn-s:hover{border-color:var(--border-h);color:var(--fire)}

/* ============================================
   HEADER — 3-Layer E-Commerce
   ============================================ */

/* Top Bar */
.top-bar{background:var(--text);color:#fff;font-size:.75rem;font-family:var(--bf);letter-spacing:.02em;overflow:hidden;position:relative}
.top-bar .container{overflow:hidden;padding:6px 0}
.marquee-track{display:flex;width:max-content;animation:marquee var(--marquee-speed,30s) linear infinite}
.marquee-track:hover{animation-play-state:paused}
.marquee-item,.mq-item{display:inline-flex;align-items:center;gap:4px;color:rgba(255,255,255,.85);white-space:nowrap;padding:0 2rem}
.marquee-item a,.mq-item a{color:rgba(255,255,255,.85);text-decoration:none;transition:color .2s;font-weight:500}
.marquee-item a:hover,.mq-item a:hover{color:#fff;text-decoration:underline}
.marquee-sep,.mq-sep{color:rgba(255,255,255,.25);margin:0 .5rem;font-size:.5rem;display:inline-flex;align-items:center}
.mq-hot{background:linear-gradient(90deg,#FFB070,#FF6000,#FFB070);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:800;letter-spacing:.03em}
.mq-wa{color:#25D366 !important;font-weight:700}
.mq-btn{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:20px;background:rgba(255,255,255,.15);color:#fff !important;font-weight:600;font-size:.7rem;text-decoration:none !important;transition:background .2s}
.mq-btn:hover{background:rgba(255,255,255,.25)}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Main Bar */
.main-bar{background:var(--bg);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
/* 3-zone grid: logo (sol, doğal genişlik) | search (esnek — boşluğu doldurur) | actions (sağ, doğal genişlik) */
.main-bar-inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;padding:.625rem 0;min-height:60px;max-width:1000px;margin:0 auto}
.main-bar-inner > .logo{justify-self:start;transform:translateX(clamp(-18px, -1vw, -10px));will-change:transform}
.main-bar-inner > .search-form{justify-self:stretch}
.main-bar-inner > .header-actions{justify-self:end}

/* Logo */
.logo{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0;padding:2px 0}
.logo-img{height:48px;width:auto;display:block;object-fit:contain;aspect-ratio:403/260;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}

/* Search — logo ile actions arasındaki tüm boşluğu kaplar */
.search-form{width:100%;display:flex;position:relative}
.search-form input{width:100%;padding:.625rem 2.5rem .625rem 1.125rem;border:1.5px solid var(--border);border-radius:50px;background:var(--surface);font-size:.875rem;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.search-form input:focus{outline:none;border-color:var(--fire);box-shadow:0 0 0 3px rgba(255,96,0,.08)}
.search-form input::placeholder{color:var(--muted)}
.search-form button{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);color:var(--dim);padding:2px;line-height:0}
.search-form button:hover{color:var(--fire)}

/* Header Actions — sıra: HESABIM (dropdown) | FAVORİLERİM | SEPET */
.header-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.header-actions > .header-user{order:1}
.header-actions > .header-auth{order:1}
.header-actions > .header-fav-btn{order:2}
.header-actions > .cart-icon{order:3}
.header-icon-btn{position:relative;color:var(--dim);padding:.5rem;border-radius:8px;line-height:0;transition:all .2s var(--ease)}
.header-icon-btn:hover{color:var(--fire);background:var(--tint)}
.header-icon-btn svg{width:22px;height:22px}

/* Cart */
.cart-icon{position:relative}
.cart-count{position:absolute;top:0;right:-2px;background:var(--fire);color:#fff;font-size:.6rem;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1}

/* Favorilerim hızlı erişim ikonu — varsayılan beyaz/dim, sadece favorilerim sayfasında turuncu */
.header-fav-btn{position:relative}
.header-fav-btn.is-active{color:var(--fire)}
.header-fav-btn.is-active svg{fill:rgba(255,96,0,.15)}
.header-fav-btn .fav-count-badge{position:absolute;top:0;right:-2px;background:var(--fire);color:#fff;font-size:.6rem;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1}

/* Auth Buttons */
.header-auth{display:flex;align-items:center;gap:.5rem}
.header-auth-link{font-size:.85rem;font-weight:600;color:var(--dim);padding:.5rem .75rem;border-radius:8px;transition:all .2s var(--ease);white-space:nowrap}
.header-auth-link:hover{color:var(--fire);background:var(--tint)}
.header-auth-btn{padding:.5rem 1rem !important;font-size:.8rem !important;white-space:nowrap}

/* User Dropdown */
.header-user{position:relative}
.header-user-btn{display:flex;align-items:center;gap:6px;padding:.5rem .75rem;border-radius:8px;font-size:.85rem;font-weight:600;color:var(--text);background:var(--surface);border:1px solid var(--border);transition:all .2s var(--ease);cursor:pointer;white-space:nowrap}
.header-user-btn:hover{border-color:var(--border-h);color:var(--fire)}
.header-user-btn svg{width:16px;height:16px;flex-shrink:0}
.header-user-btn .chevron-icon{transition:transform .2s}
.header-user.open .header-user-btn{border-color:var(--fire);color:var(--fire)}
.header-user.open .chevron-icon{transform:rotate(180deg)}

.header-user-dropdown{display:none;position:absolute;top:calc(100% + 6px);right:0;min-width:220px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:110;overflow:hidden;padding:6px}
.header-user.open .header-user-dropdown{display:block}
.header-user-dropdown a{display:flex;align-items:center;gap:10px;padding:10px 12px;font-size:.85rem;font-weight:500;color:var(--text);border-radius:8px;transition:all .15s var(--ease);text-decoration:none}
.header-user-dropdown a svg{width:16px;height:16px;color:var(--dim);flex-shrink:0}
.header-user-dropdown a:hover{background:var(--tint);color:var(--fire)}
.header-user-dropdown a:hover svg{color:var(--fire)}
.header-user-dropdown .dropdown-balance{font-size:.75rem;color:var(--fire);font-weight:700}
.header-user-dropdown .dropdown-sep{height:1px;background:var(--border);margin:4px 0}
.header-user-dropdown .dropdown-logout{color:var(--dim)}
.header-user-dropdown .dropdown-logout:hover{background:#FEF2F2;color:#DC2626}

/* Mobile Menu Button */
.mobile-menu-btn{display:none;flex-direction:column;gap:4px;padding:.5rem;flex-shrink:0;width:38px;height:38px;align-items:center;justify-content:center;border-radius:8px;transition:background .2s var(--ease)}
.mobile-menu-btn:hover{background:var(--surface)}
.mobile-menu-btn span{display:block;width:18px;height:2px;background:var(--text);border-radius:1px;transition:all .3s var(--ease);transform-origin:center}
.mobile-menu-btn.active span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mobile-menu-btn.active span:nth-child(2){opacity:0}
.mobile-menu-btn.active span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Navigation Bar */
.main-nav{position:relative;background:var(--surface);border-bottom:1px solid var(--border)}
/* Nav-list ortalı — search ile simetri (üst search ortada, alt nav ortada) */
.nav-list{display:flex;justify-content:center;list-style:none;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.nav-list::-webkit-scrollbar{display:none}
.nav-item>a{display:flex;align-items:center;gap:4px;padding:.75rem 1rem;font-size:.82rem;font-weight:600;color:var(--dim);white-space:nowrap;transition:all .2s var(--ease);border-bottom:2px solid transparent}
.nav-item>a:hover{color:var(--text)}
.nav-item>a svg{width:10px;height:10px;transition:transform .2s var(--ease)}

/* Flash nav item */
.nav-item--flash>a{color:var(--fire);font-weight:700;position:relative;background:linear-gradient(135deg,rgba(255,96,0,.08),rgba(204,74,0,.04));border-radius:6px 6px 0 0}
.nav-item--flash>a::before{content:'';position:absolute;inset:0;border-radius:6px 6px 0 0;background:linear-gradient(135deg,var(--fire),var(--glow));opacity:0;transition:opacity .3s}
.nav-item--flash>a:hover{color:#fff;position:relative;z-index:1}
.nav-item--flash>a:hover::before{opacity:1;z-index:-1}

/* Mağaza — Diğer nav boyutunda, premium renk + diamond ikon */
.nav-item--magaza>a{
    color:#8B6914 !important;        /* derin amber/bronz — diğerlerinden ayrışır ama sakin */
    display:inline-flex;
    align-items:center;
    gap:6px;
    transition:color .25s ease;
}
.nav-item--magaza>a:hover{
    color:#C9A961 !important;        /* altın — hover */
}
.nav-item--magaza .magaza-ico{
    width:14px;height:14px;
    color:#C9A961;                   /* diamond varsayılan altın */
    flex-shrink:0;
    transition:color .25s ease,transform .3s ease;
    filter:drop-shadow(0 1px 1px rgba(139,105,20,.15));
}
.nav-item--magaza>a:hover .magaza-ico{
    color:#B8924A;
    transform:rotate(-8deg) scale(1.08);
}

/* Mobil Mağaza — flash gibi kart, amber + diamond */
.mobile-nav-magaza{
    color:#8B6914 !important;
    background:linear-gradient(135deg,rgba(201,169,97,.10),rgba(201,169,97,.04)) !important;
    border:1px solid rgba(201,169,97,.22) !important;
    border-radius:8px !important;
    margin-bottom:0;
    justify-content:flex-start !important;
    gap:8px;
}
/* Mağaza ardından Flaş gelirse: aralarında boşluk olmasın, uçları kaynaşsın */
.mobile-nav-magaza + .mobile-nav-flash{
    margin-top:0;
    border-top-left-radius:0;
    border-top-right-radius:0;
}
.mobile-nav-magaza:has(+ .mobile-nav-flash){
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
}
.mobile-nav-magaza .magaza-ico{
    width:16px !important;
    height:16px !important;
    color:#C9A961 !important;
    flex-shrink:0;
    filter:drop-shadow(0 1px 1px rgba(139,105,20,.15));
    transform:none !important; /* hover transform taşmaması için */
}
.mobile-nav-magaza:hover{color:#C9A961 !important}
.mobile-nav-magaza:hover .magaza-ico{color:#B8924A !important}

/* Community nav item */
.nav-badge{font-size:.6rem;background:var(--tint);color:var(--fire);padding:2px 6px;border-radius:10px;font-weight:700;margin-left:4px}

/* ============================================
   HERO — Sentez V4
   ============================================ */
.hero{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(60px + 1.5rem) 1.5rem 2rem;overflow:hidden;background:var(--bg)}

/* Layer 0: Flow — Organic SVG Curves */
.flow-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.flow-curve{position:absolute;inset:0;width:100%;height:100%}
.flow-curve--a{animation:flowDriftA 28s ease-in-out infinite alternate}
.flow-curve--b{animation:flowDriftB 32s ease-in-out infinite alternate}
@keyframes flowDriftA{0%{transform:translate(0,0) scale(1)}50%{transform:translate(25px,-15px) scale(1.04)}100%{transform:translate(-15px,18px) scale(.96)}}
@keyframes flowDriftB{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-20px,22px) scale(.95)}100%{transform:translate(18px,-14px) scale(1.05)}}

/* Layer 1: Compass Ring */
.compass-layer{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) perspective(800px) rotateX(12deg);transform-style:preserve-3d;width:520px;height:520px;pointer-events:none;z-index:1;animation:compassSpin 120s linear infinite}
@keyframes compassSpin{from{transform:translate(-50%,-50%) perspective(800px) rotateX(12deg) rotateZ(0deg)}to{transform:translate(-50%,-50%) perspective(800px) rotateX(12deg) rotateZ(360deg)}}
.compass-ring{fill:none;stroke:var(--fire);stroke-opacity:.06;stroke-width:1.2;stroke-dasharray:10 7}
.compass-dot{fill:var(--fire);opacity:.14}
.compass-labels{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:520px;height:520px;pointer-events:none;z-index:1}
.compass-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(var(--a)) translateY(-268px) rotate(calc(-1 * var(--a)));font-family:var(--bf);font-size:.6rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fire);opacity:.25;background:rgba(255,96,0,.02);border:1px solid rgba(255,96,0,.06);border-radius:20px;padding:3px 10px;white-space:nowrap}
.compass-label--sub{font-weight:400;font-size:.55rem;opacity:.15}

/* Shooting Stars */
.compass-orbit{position:absolute;top:50%;left:50%;width:0;height:0;pointer-events:none;z-index:1;animation:starOrbit 8s linear infinite}
.compass-orbit--inner{animation-duration:12s;animation-direction:reverse}
@keyframes starOrbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.compass-star{position:absolute;top:-262.5px;left:-2.5px;width:5px;height:5px;border-radius:50%;background:var(--glow);box-shadow:0 0 6px var(--fire),0 0 14px rgba(255,96,0,.3);opacity:.5}
.compass-star::after{content:'';position:absolute;top:0;right:100%;width:20px;height:100%;background:linear-gradient(to right,transparent,rgba(255,140,64,.4));border-radius:3px 0 0 3px;filter:blur(1px)}
.compass-star--inner{top:-182.5px;left:-1.5px;width:3px;height:3px;opacity:.3;box-shadow:0 0 4px var(--fire)}
.compass-star--inner::after{width:14px}

/* Layer 1.5: TD Monogram + Spectrum */
.monogram-layer{position:absolute;top:36%;left:50%;transform:translate(-50%,-50%);width:260px;height:260px;pointer-events:none;z-index:2;animation:monoBreath 8s ease-in-out infinite}
.monogram-layer::before{content:'';position:absolute;inset:-25%;border-radius:50%;background:radial-gradient(circle,rgba(255,96,0,.06) 0%,rgba(255,96,0,.025) 40%,transparent 65%);pointer-events:none}
@keyframes monoBreath{0%,100%{transform:translate(-50%,-50%) rotate(-1.5deg) scale(.98)}50%{transform:translate(-50%,-50%) rotate(1.5deg) scale(1.02)}}
.monogram-svg{width:100%;height:100%;filter:drop-shadow(0 0 24px rgba(255,96,0,.15)) drop-shadow(0 0 50px rgba(255,96,0,.07))}
.mono-t,.mono-d{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.mono-t{stroke:url(#monoGrad);opacity:.2}
.mono-d{stroke:url(#monoGrad2);opacity:.16}
.spectrum{position:absolute;top:50%;right:-80px;width:280px;height:180px;transform:translateY(-40%);pointer-events:none}
.spec-line{position:absolute;left:0;height:1.5px;border-radius:1px;transform-origin:left center}
.spec-line:nth-child(1){top:15%;width:240px;background:linear-gradient(90deg,var(--lava),transparent);transform:rotate(-16deg);opacity:.05}
.spec-line:nth-child(2){top:30%;width:260px;background:linear-gradient(90deg,var(--ember),transparent);transform:rotate(-8deg);opacity:.04}
.spec-line:nth-child(3){top:45%;width:280px;background:linear-gradient(90deg,var(--fire),transparent);transform:rotate(0deg);opacity:.06}
.spec-line:nth-child(4){top:60%;width:250px;background:linear-gradient(90deg,var(--glow),transparent);transform:rotate(8deg);opacity:.04}
.spec-line:nth-child(5){top:75%;width:220px;background:linear-gradient(90deg,var(--spark),transparent);transform:rotate(16deg);opacity:.03}

/* Layer 2: Pulse Line */
.pulse-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2}
.pulse-layer svg{position:absolute;top:50%;left:0;transform:translateY(-50%);width:100%;height:200px;overflow:visible}
.pulse-line{fill:none;stroke:var(--fire);stroke-width:1.5;opacity:.07;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2000;stroke-dashoffset:2000;animation:drawPulse 2.5s cubic-bezier(.4,0,.2,1) forwards}
@keyframes drawPulse{to{stroke-dashoffset:0}}
.pulse-dot{r:3;fill:var(--fire);opacity:0;filter:drop-shadow(0 0 6px var(--fire)) drop-shadow(0 0 14px rgba(255,96,0,.3));animation:dotFadeIn .3s 2.5s forwards}
@keyframes dotFadeIn{to{opacity:.7}}

/* Layer 3: Content */
.hero-content{position:relative;z-index:3;text-align:center;max-width:640px;width:100%;display:flex;flex-direction:column;align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--bf);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--lava);border:1px solid rgba(255,96,0,.12);background:rgba(255,96,0,.03);padding:6px 18px;border-radius:100px;margin-bottom:14px;opacity:0;animation:fadeUp .6s .3s var(--ease) forwards}
.hero-badge::before{content:'';display:block;width:6px;height:6px;border-radius:50%;background:var(--fire);box-shadow:0 0 8px rgba(255,96,0,.4);animation:dotPulse 2.4s ease-in-out infinite}
@keyframes dotPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}
.hero-title{font-family:var(--hf);font-weight:800;font-size:clamp(2.4rem,5.5vw,3.4rem);line-height:1.08;letter-spacing:-.03em;margin-bottom:10px;background:var(--g-rich);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:fadeUp .7s .5s var(--ease) forwards,gx 6s linear infinite;opacity:0;position:relative;overflow:hidden}
.hero-title::before{content:'';position:absolute;top:0;left:0;width:80px;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);animation:shimmer 3s ease-in-out infinite;pointer-events:none}
.hero-subtitle{font-family:var(--bf);font-size:clamp(.92rem,1.05vw,1.02rem);font-weight:400;color:var(--dim);line-height:1.6;max-width:560px;margin-bottom:24px;opacity:0;animation:fadeUp .7s .7s var(--ease) forwards}

/* Hero CTA */
.hero-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:center;margin-bottom:18px;opacity:0;animation:fadeUp .6s .9s var(--ease) forwards}
.btn-ring{position:relative;display:inline-block}
.btn-ring::after{content:'';position:absolute;inset:-4px;border-radius:100px;border:2px solid var(--fire);animation:ringPulse 2.5s ease-out infinite;pointer-events:none}
@keyframes ringPulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.25);opacity:0}}
.btn-cta{position:relative;display:inline-flex;align-items:center;gap:9px;font-family:var(--bf);font-weight:600;font-size:1rem;color:#fff;text-decoration:none;background:var(--g-rich);background-size:300% 100%;animation:gx 4s linear infinite;padding:14px 36px;border-radius:100px;border:none;cursor:pointer;box-shadow:0 4px 24px rgba(255,96,0,.25),0 1px 3px rgba(0,0,0,.06);transition:transform .3s var(--ease),box-shadow .3s var(--ease);overflow:hidden}
.btn-cta::before{content:'';position:absolute;top:0;left:0;width:50px;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:shimmer 2.5s ease-in-out infinite;pointer-events:none}
.btn-cta:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(255,96,0,.35),0 2px 6px rgba(0,0,0,.08);color:#fff}
.btn-cta svg{width:16px;height:16px;flex-shrink:0;transition:transform .25s var(--ease)}
.btn-cta:hover svg{transform:translateX(3px)}
.btn-ghost{font-family:var(--bf);font-weight:500;font-size:.95rem;color:var(--dim);text-decoration:none;display:inline-flex;align-items:center;gap:4px;padding:8px 4px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.btn-ghost:hover{color:var(--fire);border-bottom-color:var(--fire)}
.btn-ghost svg{width:14px;height:14px;transition:transform .2s var(--ease)}
.btn-ghost:hover svg{transform:translateX(2px)}

/* Social Proof */
.social-proof{display:flex;align-items:center;gap:14px;margin-bottom:16px;opacity:0;animation:fadeUp .6s 1.1s var(--ease) forwards}
.avatars{display:flex;justify-content:center}
.avatars span{width:36px;height:36px;border-radius:50%;border:2.5px solid var(--bg);margin-left:-10px;display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff}
.avatars span:first-child{margin-left:0}
.avatars span:nth-child(1){background:var(--fire)}
.avatars span:nth-child(2){background:var(--ember)}
.avatars span:nth-child(3){background:var(--lava)}
.avatars span:nth-child(4){background:var(--glow);font-size:9px;letter-spacing:-.02em}
.social-body{display:flex;flex-direction:column;align-items:center;gap:2px}
.stars{display:flex;gap:1px;justify-content:center}
.stars svg{width:14px;height:14px;fill:#FBBF24}
.social-text{font-size:13px;color:var(--dim);text-align:center}
.social-text strong{color:var(--text);font-weight:600}

/* Trust Marquee */
.hero-trust{position:relative;z-index:3;width:100%;max-width:720px;margin-top:16px;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);opacity:0;animation:fadeUp .6s 1.3s var(--ease) forwards}
.trust-track{display:flex;gap:36px;animation:trustScroll 35s linear infinite;width:max-content}
.trust-track:hover{animation-play-state:paused}
@keyframes trustScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.trust-item{display:flex;align-items:center;gap:8px;flex-shrink:0;white-space:nowrap}
.trust-icon{width:20px;height:20px;flex-shrink:0;display:grid;place-items:center}
.trust-icon svg{width:18px;height:18px;stroke:var(--fire);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.trust-text{font-size:.87rem;font-weight:600;color:var(--dim);letter-spacing:.01em}

/* Scroll Hint */
.scroll-hint{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--muted);transition:color .2s;margin-top:16px;opacity:0;animation:fadeUp .5s 1.6s var(--ease) forwards}
.scroll-hint:hover{color:var(--sunset)}
.scroll-hint span{font-family:var(--bf);font-size:.65rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.scroll-hint svg{width:18px;height:18px;animation:scrollBob 2s ease-in-out infinite}
@keyframes scrollBob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(5px);opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ============================================
   SECTIONS
   ============================================ */
.section{padding:3rem 0}
.section-tint{background:var(--tint)}
.section-title{font-size:1.5rem;margin-bottom:1.5rem;text-align:center}
.page-title{font-size:1.75rem;margin-bottom:1.5rem}

/* Section Header System */
.sec-header{text-align:center;margin-bottom:2rem}
.sec-tag{display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fire);margin-bottom:.5rem}
.sec-foot{text-align:center;margin-top:2rem}
.sec-more{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:600;color:var(--fire);transition:all .25s var(--ease)}
.sec-more:hover{gap:10px;color:var(--lava)}
.sec-more span{transition:transform .25s var(--ease)}
.sec-more:hover span{transform:translateX(3px)}

/* Scroll Reveal — Product Grids */
[data-reveal]>*{opacity:0;transform:translateY(40px) scale(.97);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
[data-reveal]>.show{opacity:1;transform:translateY(0) scale(1)}

/* ============================================
   CATEGORIES — Ember Trails
   ============================================ */
@property --border-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.cat-section{position:relative;padding:5rem 0;width:100%;overflow:hidden}
#emberCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.cat-section .container{position:relative;z-index:1}
.sec-title{font-family:var(--hf);font-size:2.2rem;font-weight:800;text-align:center;margin-bottom:2.5rem}
.title-line{display:block;width:0;height:3px;margin:.85rem auto 0;background:linear-gradient(90deg,var(--lava),var(--fire),var(--glow),var(--spark));border-radius:2px;animation:lineGrow .9s .7s cubic-bezier(.16,1,.3,1) forwards}
@keyframes lineGrow{to{width:90px}}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.cat-card{position:relative;background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:2rem 1.5rem 1.5rem;cursor:pointer;text-decoration:none;color:var(--text);display:flex;flex-direction:column;min-height:170px;overflow:hidden;transform-style:preserve-3d;will-change:transform,box-shadow;opacity:0;transform:translateY(70px) scale(.94)}
.cat-card.show{opacity:1;transform:translateY(0) scale(1);transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1),background .35s ease,box-shadow .4s ease,border-color .3s ease}
.cat-card::before{content:'';position:absolute;inset:-1px;border-radius:17px;background:conic-gradient(from var(--border-angle),var(--lava),var(--fire),var(--glow),var(--spark),var(--glow),var(--fire),var(--lava));z-index:-1;opacity:0;transition:opacity .45s ease;animation:borderSpin 3.5s linear infinite}
@keyframes borderSpin{to{--border-angle:360deg}}
.cat-card:hover::before{opacity:1}
.cat-card:hover{background:linear-gradient(135deg,var(--fire),var(--ember));border-color:transparent;box-shadow:0 12px 40px rgba(255,96,0,.25),0 4px 12px rgba(255,96,0,.15)}
.cat-card:hover .cat-name{color:#fff}
.cat-card:hover .cat-tag{background:rgba(255,255,255,.2);color:#fff}
.cat-card:hover .cat-bottom{color:rgba(255,255,255,.75)}
.cat-card:hover .cat-num{color:#fff}
.cat-card:hover .cat-arrow{color:#fff}
.cat-card:hover .cat-ltr{background:linear-gradient(135deg,rgba(255,255,255,.25),rgba(255,255,255,.08));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;opacity:.2}
.cat-card::after{content:'';position:absolute;inset:0;border-radius:16px;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.12) 0%,transparent 55%);opacity:0;transition:opacity .3s;pointer-events:none}
.cat-card:hover::after{opacity:1}
.cat-ltr{position:absolute;top:-14px;right:-4px;font-family:var(--hf);font-size:7.5rem;font-weight:800;line-height:1;background:linear-gradient(135deg,var(--fire),var(--glow),var(--spark));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;opacity:.07;pointer-events:none;user-select:none;transition:opacity .45s,transform .5s cubic-bezier(.16,1,.3,1)}
.cat-card:hover .cat-ltr{opacity:.16;transform:translate(-6px,6px) scale(1.06)}
.cat-tag{display:inline-flex;align-self:flex-start;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:.22rem .55rem;border-radius:5px;background:var(--tint);color:var(--ember);margin-bottom:.8rem;position:relative;z-index:1;transition:background .35s ease,color .35s ease}
.cat-name{font-family:var(--hf);font-size:1.3rem;font-weight:800;color:var(--fire);margin-bottom:.3rem;z-index:1;transition:color .35s ease}
.cat-bottom{display:flex;align-items:center;gap:.5rem;margin-top:auto;font-size:.82rem;color:var(--dim);z-index:1;transition:color .35s ease}
.cat-num{font-weight:600;color:var(--fire);font-variant-numeric:tabular-nums;transition:color .35s ease}
.cat-arrow{margin-left:auto;opacity:0;transform:translateX(-10px);transition:all .35s cubic-bezier(.16,1,.3,1);color:var(--fire);font-size:1.1rem}
.cat-card:hover .cat-arrow{opacity:1;transform:translateX(0)}
.cat-shimmer{position:absolute;inset:0;border-radius:16px;overflow:hidden;pointer-events:none;z-index:2}
.cat-shimmer::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transition:none;opacity:0}
.cat-card:hover .cat-shimmer::after{opacity:1;animation:catShimmer .8s .15s ease forwards}
@keyframes catShimmer{to{left:160%}}

/* ============================================
   PRODUCTS GRID
   ============================================ */
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.5rem}
.product-card{display:flex;flex-direction:column;background:linear-gradient(var(--bg),var(--bg)) padding-box,linear-gradient(90deg,var(--border),rgba(216,85,48,.45),rgba(255,140,64,.55),rgba(255,96,0,.35),rgba(216,85,48,.45),var(--border)) border-box;border:2px solid transparent;border-radius:var(--radius);overflow:hidden;transition:all .25s var(--ease);background-size:100% 100%,200% 100%}
.product-card:hover{background:linear-gradient(var(--bg),var(--bg)) padding-box,linear-gradient(90deg,rgba(216,85,48,.6),rgba(255,140,64,.7),rgba(255,96,0,.5),rgba(255,140,64,.7),rgba(216,85,48,.6)) border-box;background-size:100% 100%,200% 100%;box-shadow:0 8px 30px rgba(255,96,0,.15);transform:translateY(-3px);animation:cardGlow 6s linear infinite}
.product-card-link{display:flex;flex-direction:column;flex:1;min-height:0;color:var(--text)}
.product-card-link:hover{color:var(--text)}
.product-card-img{position:relative;aspect-ratio:1;overflow:hidden;background:var(--bg)}
.product-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s var(--ease);-webkit-mask-image:linear-gradient(to top,transparent 0,#000 32px);mask-image:linear-gradient(to top,transparent 0,#000 32px)}
.product-card:hover .product-card-img img{transform:scale(1.05)}
/* Badge konumlama: discount → SOL üst (favori ile çakışmasın), variant → onun altı */
.product-badge{position:absolute;top:.75rem;left:.75rem;right:auto;padding:.25rem .625rem;border-radius:6px;font-size:.75rem;font-weight:700;color:#fff;z-index:2}
.product-badge.discount{background:var(--danger)}
.product-badge.out-of-stock{background:var(--dim);top:auto;bottom:2.25rem;left:.5rem;right:auto;font-size:.55rem;padding:2px 6px;max-width:calc(100% - 1rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Variant badge — discount varsa onun altında, yoksa sol üstte */
.product-badge.variant{top:2.5rem;left:.75rem;right:auto;background:rgba(0,0,0,.6);padding:4px 6px;font-size:0;display:flex;align-items:center;backdrop-filter:blur(4px)}
.product-card-img:not(:has(.product-badge.discount)) .product-badge.variant{top:.75rem}
.product-card-info{display:flex;flex-direction:column;flex:1;padding:0 1.125rem .75rem}
.product-brand{position:absolute;bottom:.5rem;left:.5rem;font-family:var(--bf);font-size:.6rem;font-weight:500;color:rgba(255,255,255,.9);background:rgba(0,0,0,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:.15rem .5rem;border-radius:4px;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 1rem);z-index:2;margin:0}
.product-name{font-family:var(--hf);font-size:1.1rem;font-weight:700;line-height:1.3;margin-bottom:.15rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;background:var(--g-warm);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* Fiyat — eski fiyat üstte (küçük, üstü çizili), güncel/normal fiyat altta */
.product-price{display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.05;min-width:0}
.price-old{text-decoration:line-through;color:var(--dim);font-size:.72rem;font-weight:600;white-space:nowrap}
.price-current{font-family:var(--hf);font-weight:700;color:var(--fire);font-size:1.1rem;white-space:nowrap}

/* Card Rating */
/* Meta satır — yorum + stok, KOMPAKT, başlık üstüne sıkıştırılmış */
.card-meta{display:flex;align-items:center;gap:.4rem;margin:0 0 .1rem;flex-wrap:wrap;line-height:1;min-height:11px}
.card-rating{display:inline-flex;align-items:center;gap:.12rem}
.card-rating svg{width:9px;height:9px;fill:var(--fire);flex-shrink:0}
.card-rating-score{font-size:.62rem;font-weight:700;color:var(--fire);line-height:1}
.card-rating-count{font-size:.58rem;color:var(--muted);font-weight:500;line-height:1}

/* Card Footer */
/* Card-foot: fiyat ve buton ALT hizalı; başlığın hemen altında — kompakt */
.card-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:.5rem;margin-top:.15rem}

/* Stock Indicator */
.card-stock{display:inline-flex;align-items:center;gap:3px;font-size:.58rem;font-weight:600;letter-spacing:.01em;line-height:1}
.card-stock-dot{width:4px;height:4px;border-radius:50%;flex-shrink:0;animation:stockDotPulse 1.8s ease-in-out infinite}
.card-stock.low{color:var(--warn)}
.card-stock.low .card-stock-dot{background:var(--warn);box-shadow:0 0 0 2px rgba(245,158,11,.18)}
.card-stock.out{color:var(--danger)}
.card-stock.out .card-stock-dot{background:var(--danger);box-shadow:0 0 0 2px rgba(220,38,38,.18);animation:none}
@keyframes stockDotPulse{0%,100%{opacity:1}50%{opacity:.5}}

/* Card Add Button */
/* Sepet butonu — card-foot'ta inline, fiyatın yanında, alt boşluk yok */
.btn-card-add{flex-shrink:0;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--g-warm);color:#fff;border:none;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease);box-shadow:0 3px 10px rgba(255,96,0,.3);position:relative;overflow:hidden}
.btn-card-add:hover{transform:scale(1.08);box-shadow:0 5px 14px rgba(255,96,0,.4)}
.btn-card-add:active{transform:scale(.95)}
.btn-card-add svg{width:17px;height:17px;pointer-events:none}
.btn-card-add::after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .4s}
.btn-card-add:hover::after{left:100%}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */
.toast-container{position:fixed;top:1.25rem;right:1.25rem;z-index:9999;display:flex;flex-direction:column;gap:.5rem;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:.625rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:.875rem 1rem;min-width:280px;max-width:380px;box-shadow:var(--shadow-lg);animation:toastIn .3s var(--ease) forwards;position:relative;overflow:hidden}
.toast.out{animation:toastOut .25s var(--ease) forwards}
.toast-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px}
.toast-dot.success{background:var(--success)}
.toast-dot.error{background:var(--danger)}
.toast-dot.warn{background:var(--warn)}
.toast-dot.info{background:var(--info)}
.toast-body{flex:1;min-width:0}
.toast-title{font-weight:700;font-size:.85rem;color:var(--text);margin-bottom:2px}
.toast-detail{font-size:.8rem;color:var(--dim)}
.toast-link{display:inline-block;margin-top:4px;font-size:.8rem;font-weight:600;color:var(--fire)}
.toast-link:hover{color:var(--lava)}
.toast-close{background:none;border:none;color:var(--muted);cursor:pointer;padding:2px;font-size:1rem;line-height:1;flex-shrink:0}
.toast-close:hover{color:var(--text)}
.toast-progress{position:absolute;bottom:0;left:0;height:2px;background:var(--g-warm);animation:toastProgress 3.2s linear forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes toastOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(40px)}}
@keyframes toastProgress{from{width:100%}to{width:0%}}

/* ============================================
   CATEGORY PAGE
   ============================================ */
/* ── Kategori sayfası — section üst boşluğu kompakt + breadcrumb merkezi ── */
body.tpl-category .section.category-page{padding:.5rem 0 2rem}
body.tpl-category .breadcrumb{padding:.65rem 0 .35rem;animation:bcFadeIn .35s ease-out}
@keyframes bcFadeIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
body.tpl-category .breadcrumb-list{
  justify-content:center;font-size:.74rem;
  mask-image:none;-webkit-mask-image:none;
  gap:0;letter-spacing:.01em;
}
body.tpl-category .breadcrumb-item{font-weight:500}
body.tpl-category .breadcrumb-item a{
  color:var(--muted);
  padding:3px 2px;border-radius:6px;
  transition:color .18s ease,background .18s ease;
}
body.tpl-category .breadcrumb-item a:hover{
  color:var(--fire);background:var(--tint);
  padding:3px 8px;
}
body.tpl-category .breadcrumb-item::after{
  content:"›";color:var(--border);margin:0 .45rem;font-size:.85rem;
  font-weight:600;line-height:1;
}
body.tpl-category .breadcrumb-item:last-child::after{display:none}
body.tpl-category .breadcrumb-item.active{
  display:inline-flex;align-items:center;
  padding:3px 10px;
  background:var(--tint);
  color:var(--fire);
  border:1px solid rgba(255,96,0,.18);
  border-radius:999px;
  font-weight:600;
  letter-spacing:.005em;
}
body.tpl-category .breadcrumb-item.active span{
  font-size:.74rem;
  /* Uzun kategori isimleri için ellipsis korunsun */
  max-width:240px;
}

.category-header{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center;gap:.65rem .85rem;margin-bottom:1.5rem}
.category-header-img{
  width:56px;height:56px;flex-shrink:0;
  object-fit:cover;border-radius:14px;
  background:#F5F5F4;
  box-shadow:0 2px 8px rgba(28,18,16,.08);
  border:1px solid var(--border);
}
.category-title{font-size:1.75rem;margin:0}
.category-product-count{
  display:inline-flex;align-items:center;gap:4px;
  color:var(--fire);font-size:.78rem;font-weight:700;
  letter-spacing:.02em;
  padding:4px 10px;border-radius:999px;
  background:var(--tint);border:1px solid rgba(255,96,0,.18);
  white-space:nowrap;align-self:center;
}
.category-desc{color:var(--dim);margin-bottom:.25rem;line-height:1.7}
.category-desc.read-more-wrap{max-height:235px}
.category-desc.read-more-wrap::after{height:60px}
.category-desc+.read-more-btn{margin-top:.125rem;margin-bottom:1.25rem}

/* ── Kategori açıklaması zengin içerik — site teması ile uyumlu tipografi ──
   Admin'den girilen HTML inline style'larındaki Inter fontu ve dış renkleri
   tema fontuna ve değişkenlerine zorlar; kart renklerine dokunmaz (zaten turuncu). */
.category-desc, .category-desc *{font-family:var(--bf)!important}
.category-desc h1,.category-desc h2,.category-desc h3,
.category-desc h4,.category-desc h5,.category-desc h6{
  font-family:var(--hf)!important;
  color:var(--text)!important;
  font-weight:700;letter-spacing:-.01em;line-height:1.25;
  margin:1.5rem 0 .6rem
}
.category-desc h2{font-size:1.55rem}
.category-desc h3{font-size:1.25rem}
.category-desc h4{font-size:1.05rem}
.category-desc h5,.category-desc h6{font-size:.95rem}
.category-desc p{color:var(--dim);line-height:1.7;margin:0 0 .85rem}
.category-desc strong,.category-desc b{color:var(--text);font-weight:700}
.category-desc a{color:var(--fire)!important;text-decoration:underline;text-decoration-color:rgba(255,96,0,.35);text-underline-offset:2px}
.category-desc a:hover{text-decoration-color:var(--fire)}
.category-desc ul,.category-desc ol{padding-left:1.25rem;margin:0 0 .85rem}
.category-desc li{margin-bottom:.35rem;line-height:1.6;color:var(--dim)}
.category-desc table{border-collapse:collapse;width:100%;margin:1rem 0;font-size:.92rem}
.category-desc th,.category-desc td{padding:.65rem .85rem;border:1px solid var(--border);text-align:left}
.category-desc th{background:var(--surface,#F5F5F4);font-weight:700;font-family:var(--hf)!important;color:var(--text)}
.category-desc blockquote{border-left:3px solid var(--fire);padding:.6rem .9rem;margin:.85rem 0;background:var(--tint);border-radius:0 8px 8px 0;color:var(--text)}
.category-desc code{background:var(--surface,#F5F5F4);padding:1px 6px;border-radius:4px;font-size:.88em;font-family:ui-monospace,SFMono-Regular,monospace!important}
.subcategories-wrap{position:relative;margin-bottom:1.5rem;display:flex;flex-direction:column}
.subcategories{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;padding:.25rem 0}
.subcategories--collapsible{position:relative;max-height:92px;overflow:hidden;transition:max-height .4s var(--ease,cubic-bezier(.4,0,.2,1))}
.subcategories--collapsible.is-expanded{max-height:2000px}
.subcategories--collapsible.has-overflow:not(.is-expanded)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:32px;background:linear-gradient(to bottom,transparent,var(--bg) 85%);pointer-events:none}
.subcategory-chip{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .85rem;background:var(--surface);border:1px solid var(--border);border-radius:50px;font-size:.85rem;font-weight:500;color:var(--dim);min-width:0;transition:all .2s;text-decoration:none;justify-content:flex-start}
.subcategory-chip:hover{border-color:var(--fire);color:var(--fire);background:var(--tint)}
.subcategory-chip .chip-icon{width:14px;height:14px;flex-shrink:0;color:var(--ember);transition:color .2s}
.subcategory-chip:hover .chip-icon{color:var(--fire)}
.subcategory-chip .chip-img{width:20px;height:20px;border-radius:5px;object-fit:cover;flex-shrink:0;transition:transform .2s ease}
.subcategory-chip:hover .chip-img{transform:scale(1.06)}
.subcategory-chip .chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.subcategory-chip .count{color:var(--muted);font-size:.74rem;font-weight:600;flex-shrink:0}
.subcategories-toggle{display:none;align-items:center;gap:6px;margin:.9rem auto 0;padding:.5rem 1.05rem;background:var(--tint);color:var(--fire);border:1px solid rgba(255,96,0,.22);border-radius:999px;font-size:.8rem;font-weight:700;letter-spacing:.01em;cursor:pointer;transition:all .2s ease;font-family:var(--bf)}
/* Wrap collapsible (>6 chip) ise toggle hep görünür — kullanıcı tutarlı UX istedi. */
.subcategories-wrap--collapsible .subcategories-toggle{display:inline-flex}
.subcategories-toggle:hover{background:var(--fire);color:#fff;border-color:var(--fire);transform:translateY(-1px);box-shadow:0 4px 12px rgba(255,96,0,.25)}
.subcategories-toggle .toggle-icon{width:13px;height:13px;transition:transform .3s var(--ease,cubic-bezier(.4,0,.2,1))}
.subcategories-toggle[aria-expanded="true"] .toggle-icon{transform:rotate(180deg)}
.subcategories-toggle .toggle-text-less{display:none}
.subcategories-toggle[aria-expanded="true"] .toggle-text-more{display:none}
.subcategories-toggle[aria-expanded="true"] .toggle-text-less{display:inline}

/* Filter Bar */
.filter-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding:1rem 0;border-bottom:1px solid var(--tint2)}
.sort-options{display:flex;align-items:center;gap:.5rem;font-size:.9rem}
.sort-options label{color:var(--dim);font-weight:600}
.sort-options select{padding:.375rem .75rem;border:1px solid var(--border);border-radius:8px;background:var(--bg);font-size:.85rem}

/* Stock Toggle */
.stock-toggle{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.8rem;color:var(--dim);white-space:nowrap;user-select:none}
.stock-toggle input{display:none}
.toggle-switch{position:relative;width:36px;height:20px;background:var(--border);border-radius:10px;transition:background .25s var(--ease);flex-shrink:0}
.toggle-switch::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .25s var(--ease);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.stock-toggle input:checked+.toggle-switch{background:var(--fire)}
.stock-toggle input:checked+.toggle-switch::after{transform:translateX(16px)}
.stock-toggle input:checked~.toggle-label{color:var(--fire);font-weight:700}
.toggle-label{font-weight:600;transition:color .2s}

/* ============================================
   PRODUCT DETAIL
   ============================================ */
.product-detail{padding:.5rem 0}
.product-layout{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;margin-bottom:2.5rem;align-items:start}
.product-gallery{position:sticky;top:105px}
.gallery-main{position:relative;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;aspect-ratio:1;max-width:500px;background:var(--surface)}
.gallery-brand{position:absolute;bottom:.75rem;left:.75rem;font-family:var(--bf);font-size:.7rem;font-weight:500;color:rgba(255,255,255,.9);background:rgba(0,0,0,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:.2rem .6rem;border-radius:4px;text-transform:uppercase;letter-spacing:.08em;z-index:2}
.gallery-discount{position:absolute;top:.75rem;right:.75rem;background:var(--danger);color:#fff;font-size:.8rem;font-weight:700;padding:.3rem .6rem;border-radius:6px;z-index:2}
.gallery-main img{width:100%;height:100%;object-fit:cover}
.gallery-thumbs{display:flex;gap:.5rem;margin-top:.75rem;overflow-x:auto}
.thumb{width:64px;height:64px;border:2px solid var(--border);border-radius:8px;overflow:hidden;flex-shrink:0;padding:0}
.thumb.active{border-color:var(--fire)}
.thumb img{width:100%;height:100%;object-fit:cover}
/* Product Info */
.pd-cat{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fire);margin-bottom:.25rem}

/* Product Rating */
.pd-rating{display:flex;align-items:center;gap:.5rem;margin-bottom:.375rem;cursor:pointer}
.pd-stars{display:inline-flex;gap:2px}
.pd-stars svg{width:16px;height:16px}
.pd-stars .star-full{fill:var(--fire);stroke:none}
.pd-stars .star-half{fill:url(#starGrad);stroke:none}
.pd-stars .star-empty{fill:var(--border);stroke:none}
.pd-rating-score{font-family:var(--hf);font-weight:700;font-size:.9rem;color:var(--fire)}
.pd-rating-count{font-size:.78rem;color:var(--muted);font-weight:500}
.product-detail-name{font-family:var(--hf);font-size:1.6rem;font-weight:800;margin-bottom:.375rem;line-height:1.15;background:linear-gradient(90deg,var(--lava),var(--ember),var(--fire),var(--ember),var(--lava));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gx 6s linear infinite}
.pd-desc{font-size:.9rem;color:var(--dim);line-height:1.6;margin-bottom:.4rem}
.product-sku{font-size:.8rem;color:var(--muted);display:block}

/* Price Row */
.pd-price-row{display:flex;align-items:baseline;gap:10px;margin-bottom:.25rem}
.pd-price{font-family:var(--hf);font-size:2rem;font-weight:800;color:var(--fire)}
.pd-price-old{font-size:.9rem;color:var(--muted);text-decoration:line-through}
.pd-price-save{margin-bottom:1rem;font-size:.8rem;font-weight:600;color:var(--success);display:flex;align-items:center;gap:4px}
.pd-price-save::before{content:'';display:inline-block;width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316A34A' stroke-width='2.5'%3E%3Cpath d='M22 11.08V12a10 10 0 11-5.93-9.14'/%3E%3Cpath d='M22 4L12 14.01l-3-3'/%3E%3C/svg%3E") no-repeat center/contain;flex-shrink:0}

/* Stock */
.pd-stock{display:flex;align-items:baseline;gap:6px;margin-bottom:1rem;flex-wrap:wrap}
.pd-stock .pd-stock-dot{align-self:center}
.pd-stock-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.pd-stock-text{font-size:.78rem;font-weight:600}
.pd-stock.in .pd-stock-text{color:var(--success)}
.pd-stock.in .pd-stock-dot{background:var(--success);box-shadow:0 0 0 3px rgba(22,163,74,.15)}
.pd-stock.out .pd-stock-text{color:var(--danger)}
.pd-stock.out .pd-stock-dot{background:var(--danger)}
.pd-stock-low{
  font-size:.78rem;font-weight:700;
  color:#C2410C;
  margin-left:-2px;
  letter-spacing:.005em;
}
.pd-stock-low::before{
  content:"·";margin-right:.35rem;color:var(--dim);font-weight:400;
}

/* Tükendi — H1 altında minimal pill (button-feel, content-width, shimmer sweep) */
.pd-soldout{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:.45rem;
  margin:.15rem 0 .85rem;padding:.42rem .85rem;
  font-family:var(--bf);font-size:.9rem;font-weight:700;line-height:1;
  color:#B91C1C;
  background:rgba(185,28,28,.07);
  border:1.5px solid rgba(185,28,28,.5);
  border-radius:999px;
  letter-spacing:.02em;
  text-transform:uppercase;
  width:fit-content;max-width:max-content;
}
.pd-soldout::before{
  content:'';position:absolute;top:0;left:0;width:60px;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  animation:shimmer 2.2s ease-in-out infinite;
  pointer-events:none;
}
.pd-soldout-icon{width:16px;height:16px;flex-shrink:0;stroke:currentColor;position:relative;z-index:1}
.pd-soldout-text{display:inline-block;position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){
  .pd-soldout::before{animation:none;display:none}
}

/* Qty info note */
.qty-info{
  margin:-.4rem 0 1rem;font-size:.74rem;color:var(--dim);line-height:1.4;
  display:flex;align-items:center;gap:6px;
  transition:color .2s ease,background .2s ease,padding .2s ease;
  padding:0;
}
.qty-info::before{
  content:"ℹ";display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;
  background:var(--tint);color:var(--fire);font-size:.7rem;font-weight:700;flex-shrink:0;
}
.qty-info strong{color:var(--text);font-weight:700}
.qty-info.is-warn{color:#9A3412}
.qty-info.is-warn::before{background:#FED7AA;color:#C2410C;content:"!"}
.qty-info.is-flash{
  padding:6px 10px;background:#FFF7ED;border:1px solid #FED7AA;border-radius:8px;
  animation:qtyInfoShake .35s ease both;
}
@keyframes qtyInfoShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}

/* Variant Toggle */
.pd-var-toggle{display:flex;align-items:center;gap:6px;margin-bottom:.625rem;font-size:.8rem;font-weight:600;color:var(--fire);transition:color .2s var(--ease)}
.pd-var-toggle:hover{color:var(--lava)}
.pd-var-toggle svg{transition:transform .3s var(--ease)}
.pd-var-toggle.open svg{transform:rotate(180deg)}

/* Variants */
.product-variants{margin-bottom:.75rem;overflow:hidden;max-height:500px;transition:max-height .3s var(--ease),opacity .3s var(--ease),margin .3s var(--ease)}
.product-variants.collapsed{max-height:0!important;opacity:0;margin-bottom:0}
.variant-group{margin-bottom:.75rem}
.variant-label{display:block;font-weight:600;font-size:.85rem;margin-bottom:.375rem}
.variant-options{display:flex;flex-wrap:wrap;gap:.5rem}
.variant-btn{padding:.5rem 1rem;border:1.5px solid var(--border);border-radius:12px;font-size:.85rem;background:var(--bg);text-align:center;cursor:pointer;transition:all .3s var(--ease)}
.variant-btn:hover{border-color:var(--glow)}
.variant-btn.active{border-color:var(--fire);background:var(--tint);color:var(--fire)}

/* CTA */
.pd-cta{display:flex;gap:.75rem;margin-bottom:1rem;align-items:center}
.btn-p-wrap{flex:1}
.btn-p-wrap .btn-pd{width:100%}
.btn-pd{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.875rem 1.5rem;border:none;border-radius:50px;font-family:var(--bf);font-size:.95rem;font-weight:600;cursor:pointer;overflow:hidden;background:linear-gradient(90deg,var(--lava),var(--ember),var(--fire),var(--glow),var(--fire),var(--ember),var(--lava));background-size:200% 100%;animation:gx 4s linear infinite;color:#fff;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.btn-pd svg{width:18px;height:18px;flex-shrink:0}
.btn-pd::before{content:'';position:absolute;top:0;left:0;width:50px;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:shimmer 2.5s ease-in-out infinite;pointer-events:none}
.btn-pd:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,96,0,.3)}
.btn-pd:disabled{opacity:.5;cursor:not-allowed;transform:none;animation:none}
.btn-pd:disabled::before{animation:none}
@keyframes shimmer{0%{transform:translateX(-150%) skewX(-15deg)}100%{transform:translateX(350%) skewX(-15deg)}}

/* Qty Selector */
.qty-selector{display:flex;align-items:center;border:1px solid var(--border);border-radius:50px}
.qty-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--dim)}
.qty-btn:hover{color:var(--fire)}
.qty-selector input{width:48px;text-align:center;border:none;font-weight:600;font-size:1rem;background:transparent}
.qty-selector input:focus{outline:none}

/* Favorite */
.pd-fav{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--border);background:var(--bg);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s var(--ease);flex-shrink:0}
.pd-fav:hover{border-color:var(--fire);background:var(--tint)}
.pd-fav svg{color:var(--dim);transition:all .3s var(--ease)}
.pd-fav:hover svg{color:var(--fire)}
.pd-fav.active{border-color:var(--fire);background:var(--tint)}
.pd-fav.active svg{color:var(--fire);fill:var(--fire)}

/* WhatsApp */
.pd-wa{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.65rem 1.25rem;border-radius:8px;background:var(--whatsapp);color:#fff;font-size:.85rem;font-weight:600;transition:all .2s var(--ease);margin-bottom:1rem}
.pd-wa:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(37,211,102,.3);color:#fff}
.pd-wa svg{flex-shrink:0}

/* Payment Info (Rotating Text) */
.pd-payment-info{font-size:.82rem;color:rgba(255,255,255,.85);background:var(--text);padding:.65rem 1rem;border-radius:8px;margin-bottom:1rem;line-height:1.6;text-align:center}
.pd-payment-info strong{color:#FF8C00;font-weight:700;text-shadow:0 0 6px rgba(255,96,0,.4)}

/* Quantity Discount Table */
.qd-box{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:1rem}
.qd-table{width:100%;border-collapse:collapse}
.qd-table th{padding:.5rem .75rem;font-size:.7rem;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.06em;text-align:left;border-bottom:1px solid var(--border);background:var(--surface)}
.qd-table td{padding:.5rem .75rem;font-size:.85rem;border-bottom:1px solid var(--border)}
.qd-table tr:last-child td{border-bottom:none}
.qd-table tr:hover td{background:var(--tint)}
.qd-table td strong{color:var(--fire);font-weight:700}
.qd-badge{display:inline-block;padding:2px 8px;border-radius:4px;background:var(--tint);color:var(--fire);font-size:.75rem;font-weight:700}
.qd-foot{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;background:var(--surface);border-top:1px solid var(--border)}
.qd-foot-title{font-family:var(--hf);font-size:.72rem;font-weight:700;color:var(--dim)}
.qd-foot-note{font-size:.68rem;font-weight:500;color:var(--muted)}

/* Meta line */
.product-meta-line{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.product-meta-line .product-sku{margin:0}
.stock-warning{font-size:.75rem;font-weight:700;color:var(--warn);display:flex;align-items:center;gap:4px}
.stock-warning::before{content:"";width:6px;height:6px;background:var(--warn);border-radius:50%}
.product-cats{font-size:.85rem;color:var(--dim)}
.product-cats a{color:var(--fire);margin-left:.25rem}
.product-cats a::after{content:", "}
.product-cats a:last-child::after{content:""}

/* Description */
.product-description{border-top:1px solid var(--border);padding-top:2rem;margin-bottom:2.5rem}
.product-description>h2{font-family:var(--hf);font-size:1.5rem;font-weight:800;margin-bottom:1.25rem;display:flex;align-items:center;gap:.625rem;background:var(--g-rich);background-size:300% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gx 6s linear infinite}
.product-description>h2::before{content:"";width:4px;height:1.25em;background:var(--g-warm);border-radius:2px;flex-shrink:0;-webkit-text-fill-color:initial}

/* product-detail icindeki TUM h etiketleri — WC icerikten class'siz gelir */
.product-detail h1,.product-detail h2,.product-detail h3,.product-detail h4,.product-detail h5,.product-detail h6{font-family:var(--hf);font-weight:700;color:var(--text);line-height:1.3}

/* Read More Collapse */
.read-more-wrap{position:relative;max-height:180px;overflow:hidden}
.read-more-wrap::after{content:'';position:absolute;bottom:0;left:0;right:0;height:70px;background:linear-gradient(to bottom,transparent,var(--bg));pointer-events:none;transition:opacity .3s}
.read-more-wrap.expanded{max-height:none;overflow:visible}
.read-more-wrap.expanded::after{opacity:0;pointer-events:none}
.read-more-wrap.no-clamp{max-height:none;overflow:visible}
.read-more-wrap.no-clamp::after{display:none}
.read-more-btn{display:flex;align-items:center;justify-content:center;gap:.375rem;width:100%;padding:.5rem;margin-top:.375rem;font-family:var(--bf);font-size:.78rem;font-weight:600;color:var(--fire);background:transparent;border:1px dashed var(--border);border-radius:var(--radius);cursor:pointer;transition:all .2s}
.read-more-btn:hover{background:var(--tint);border-color:var(--fire)}
.read-more-btn svg{width:12px;height:12px;transition:transform .2s}
.read-more-wrap.expanded+.read-more-btn svg{transform:rotate(180deg)}

/* desc-content icerigi: aciklamalar, WC HTML */
.desc-content{color:var(--dim);line-height:1.8;font-size:.95rem}
.desc-content h2{font-size:1.3rem;font-weight:800;color:var(--lava);margin:2.25rem 0 .75rem;padding-bottom:.5rem;border-bottom:2px solid var(--tint2)}
.desc-content h3{font-size:1.1rem;font-weight:700;color:var(--ember);margin:1.75rem 0 .625rem;padding-left:.75rem;border-left:3px solid var(--fire)}
.desc-content h4{font-family:var(--bf);font-size:1rem;font-weight:700;color:var(--text);margin:1.5rem 0 .5rem}
.desc-content h2:first-child,.desc-content h3:first-child,.desc-content h4:first-child{margin-top:0}
.desc-content p{margin-bottom:1rem}
.desc-content p>strong:only-child,.desc-content p>b:only-child{display:block;font-family:var(--hf);font-size:1.05rem;font-weight:700;color:var(--ember);margin:.5rem 0 .25rem}
.desc-content strong,.desc-content b{color:var(--text);font-weight:700}
.desc-content em,.desc-content i{font-style:italic;color:var(--text)}
.desc-content a{color:var(--fire);text-decoration:underline;text-underline-offset:2px}
.desc-content a:hover{color:var(--lava)}
.desc-content ul,.desc-content ol{margin-bottom:1.25rem;padding-left:1.75rem}
.desc-content ul{list-style:disc}
.desc-content ol{list-style:decimal}
.desc-content li{margin-bottom:.5rem;line-height:1.7}
.desc-content li::marker{color:var(--fire)}
.desc-content blockquote{margin:1.5rem 0;padding:1rem 1.25rem;border-left:3px solid var(--fire);background:var(--tint);border-radius:0 var(--radius) var(--radius) 0;font-style:italic}
.desc-content table{width:100%;border-collapse:collapse;margin:1.5rem 0;border-radius:var(--radius);overflow:hidden}
.desc-content th,.desc-content td{padding:.625rem .875rem;border:1px solid var(--border);text-align:left;font-size:.9rem}
.desc-content th{background:var(--surface);font-weight:700;color:var(--text);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
.desc-content td{color:var(--dim)}
.desc-content tr:hover td{background:var(--tint)}
.desc-content img{border-radius:var(--radius);margin:1.5rem 0;box-shadow:var(--shadow)}
.desc-content hr{border:none;height:1px;background:var(--border);margin:2rem 0}

/* ============================================
   MOBILE STICKY PRICE BAR (ürün sayfası)
   ============================================ */
.mobile-sticky-cta{display:none}

/* ============================================
   GLOBAL STICKY CTA BAR (tüm sayfalar, mobil)
   ============================================ */
.sticky-cta{display:none}
.chatbot-overlay{position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:998;opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.chatbot-overlay.visible{opacity:1;pointer-events:auto}

.chatbot-panel{position:fixed;bottom:72px;right:16px;left:16px;max-width:400px;max-height:70vh;z-index:1000;background:var(--bg);border-radius:20px;border:1px solid var(--border);box-shadow:0 16px 48px rgba(0,0,0,.12);display:flex;flex-direction:column;opacity:0;pointer-events:none;transform:translateY(20px) scale(.96);transition:none}
.chatbot-panel.open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1);animation:chatIn .3s var(--ease)}
.chatbot-panel.closing{animation:chatOut .25s var(--ease) forwards}
@keyframes chatIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes chatOut{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(20px) scale(.96)}}
@keyframes dotBlink{0%,80%,100%{opacity:.3}40%{opacity:1}}

@media(min-width:480px){.chatbot-panel{left:auto;right:16px;width:380px}}

.chatbot-header{display:flex;align-items:center;gap:10px;padding:16px;border-bottom:1px solid var(--border);flex-shrink:0}
.chatbot-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--ember),var(--fire));display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chatbot-avatar svg{width:18px;height:18px;color:#fff}
.chatbot-header-text{flex:1}
.chatbot-header-title{font-size:14px;font-weight:700;color:var(--text)}
.chatbot-header-status{font-size:10px;color:var(--success);font-weight:600;display:flex;align-items:center;gap:4px}
.chatbot-header-status::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.chatbot-close{width:32px;height:32px;border-radius:50%;border:none;background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s var(--ease);flex-shrink:0}
.chatbot-close:hover{background:var(--border)}
.chatbot-close svg{width:16px;height:16px;color:var(--dim)}

.chatbot-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;min-height:200px;max-height:50vh;scrollbar-width:thin}
.chat-msg{max-width:85%;padding:10px 14px;border-radius:14px;font-size:13px;line-height:1.5}
.chat-msg.bot{align-self:flex-start;background:var(--tint);color:var(--text);border-bottom-left-radius:4px;line-height:1.65;word-wrap:break-word;overflow-wrap:break-word}
.chat-msg.bot br{display:block;content:'';margin-top:4px}
.chat-msg.bot strong{color:var(--text);font-weight:700}
.chat-msg.bot .chat-link{color:var(--fire);text-decoration:underline;text-underline-offset:2px;font-weight:600;word-break:break-all}
.chat-msg.bot .chat-link:hover{opacity:.75}
.chat-msg.user{align-self:flex-end;background:var(--fire);color:#fff;border-bottom-right-radius:4px}
.chat-typing{align-self:flex-start;padding:10px 14px;background:var(--tint);border-radius:14px;border-bottom-left-radius:4px;display:flex;gap:4px}
.chat-typing span{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:dotBlink 1.4s infinite}
.chat-typing span:nth-child(2){animation-delay:.2s}
.chat-typing span:nth-child(3){animation-delay:.4s}

.chatbot-input{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border);flex-shrink:0}
.chatbot-input input{flex:1;padding:10px 14px;border:1px solid var(--border);border-radius:50px;font-family:var(--bf);font-size:13px;color:var(--text);background:var(--surface);outline:none;transition:border-color .3s var(--ease)}
.chatbot-input input:focus{border-color:var(--fire)}
.chatbot-input input::placeholder{color:var(--muted)}
.chatbot-send{width:40px;height:40px;border-radius:50%;border:none;background:var(--fire);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s var(--ease),transform .2s var(--ease);flex-shrink:0}
.chatbot-send:hover{background:var(--lava);transform:scale(1.05)}
.chatbot-send svg{width:16px;height:16px}

/* Görüşmeden Ayrıl butonu */
.chatbot-leave{width:28px;height:28px;border-radius:50%;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s var(--ease);flex-shrink:0;color:var(--muted)}
.chatbot-leave:hover{background:var(--danger);color:#fff}

/* Admin mesajı */
.chat-msg.admin{align-self:flex-start;background:linear-gradient(135deg,#EFF6FF,#DBEAFE);color:var(--text);border-bottom-left-radius:4px;border-left:3px solid #3B82F6}

/* Hızlı Butonlar */
.chat-quick-btns{display:flex;gap:6px;flex-wrap:wrap;padding:4px 0}
.chat-quick-btn{padding:6px 14px;border-radius:50px;border:1px solid var(--fire);background:transparent;color:var(--fire);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--bf);transition:all .2s var(--ease)}
.chat-quick-btn:hover{background:var(--fire);color:#fff}

/* ── Chat Ürün Kartları ── */
.chat-product-single,.chat-product-grid{padding:6px 0;width:100%}
.chat-product-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chat-product-single{display:block}

.chat-product-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:all .25s var(--ease);box-shadow:0 1px 3px rgba(0,0,0,.04)}
.chat-product-card:hover{border-color:var(--fire);box-shadow:0 4px 12px rgba(255,96,0,.1);transform:translateY(-1px)}

/* Görsel — üst kısmı TAMAMEN doldurur */
.cp-img{width:100%;height:160px;position:relative;overflow:hidden;background:#f5f5f4}
.chat-product-card.single .cp-img{height:220px}
.cp-img img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .3s var(--ease)}
.chat-product-card:hover .cp-img img{transform:scale(1.05)}

/* Badge */
.cpb{position:absolute;font-size:8px;font-weight:700;padding:3px 8px;border-radius:6px;z-index:1}
.cpb-disc{top:6px;right:6px;background:var(--danger);color:#fff}
.cpb-out{bottom:6px;left:6px;background:rgba(0,0,0,.6);color:#fff;backdrop-filter:blur(4px)}

/* Link wrapper */
.cp-link{display:flex;flex-direction:column;text-decoration:none;color:inherit;flex:1}

/* Bilgi */
.cp-info{padding:8px 10px 4px;flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cp-brand{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.cp-name{font-size:11px;font-weight:700;color:var(--text);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.chat-product-card.single .cp-name{font-size:13px}
.cp-desc{font-size:10px;color:var(--dim);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Alt kısım — fiyat + sepet butonu */
.cp-foot{padding:6px 10px 8px;display:flex;align-items:center;justify-content:space-between;gap:4px}
.cp-price{font-size:13px;font-weight:800;color:var(--fire)}
.chat-product-card.single .cp-price{font-size:15px}
.cp-old{font-size:9px;color:var(--dim);text-decoration:line-through}
.cp-cart-btn{width:30px;height:30px;border-radius:50%;border:none;background:var(--fire);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s var(--ease);box-shadow:0 2px 6px rgba(255,96,0,.2)}
.cp-cart-btn:hover{background:var(--lava);transform:scale(1.1)}
.cp-cart-btn:active{transform:scale(.95)}

/* Rating yıldızları */
.cp-rating{display:flex;align-items:center;gap:3px;font-size:9px;color:var(--muted);margin-top:2px}
.cp-rating-stars{color:#F59E0B;letter-spacing:-.5px;font-size:10px}
.cp-rating-count{color:var(--dim);font-size:9px}

/* Stok durumu rozeti */
.cpb-stock-low{top:6px;left:6px;background:linear-gradient(135deg,#F59E0B,#D97706);color:#fff}
.cpb-hot{top:6px;left:6px;background:linear-gradient(135deg,#EF4444,#DC2626);color:#fff;animation:pulse-hot 2s infinite}
@keyframes pulse-hot{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* Ürün kartı premium hover glow */
.chat-product-card{position:relative}
.chat-product-card::before{content:'';position:absolute;inset:0;border-radius:12px;padding:1px;background:linear-gradient(135deg,transparent,rgba(255,96,0,.3),transparent);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s;pointer-events:none}
.chat-product-card:hover::before{opacity:1}

/* ═══════════════════════════════════════════════
   KATEGORİ CHIP'LERİ (Chat içi — AI öneriyor)
   ═══════════════════════════════════════════════ */
.chat-cat-chips{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
    gap:8px;
    padding:8px 0 4px;
    width:100%;
}
.chat-cat-chip{
    display:flex;
    flex-direction:column;
    background:#fff;
    border:1px solid var(--border);
    border-radius:10px;
    overflow:hidden;
    text-decoration:none;
    color:inherit;
    transition:all .25s var(--ease);
    box-shadow:0 1px 3px rgba(0,0,0,.04);
    position:relative;
}
.chat-cat-chip:hover{
    border-color:var(--fire);
    box-shadow:0 4px 12px rgba(255,96,0,.12);
    transform:translateY(-2px);
}
.ccc-img{
    width:100%;
    height:70px;
    background:linear-gradient(135deg,#FAFAF9,#F5F5F4);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    position:relative;
}
.ccc-img img{
    width:100%;height:100%;
    object-fit:cover;
    transition:transform .3s var(--ease);
}
.chat-cat-chip:hover .ccc-img img{transform:scale(1.08)}
.ccc-ph{font-size:22px;opacity:.4}
.ccc-body{
    padding:6px 8px 7px;
    display:flex;flex-direction:column;gap:1px;
    background:#fff;
}
.ccc-name{
    font-size:10.5px;
    font-weight:700;
    color:var(--text);
    line-height:1.25;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:26px;
}
.ccc-count{
    font-size:8.5px;
    color:var(--fire);
    font-weight:600;
    letter-spacing:.2px;
}
/* Arrow icon on hover */
.chat-cat-chip::after{
    content:'→';
    position:absolute;
    top:4px;right:6px;
    font-size:12px;
    color:var(--fire);
    opacity:0;
    transition:all .25s var(--ease);
    z-index:2;
    text-shadow:0 1px 2px rgba(0,0,0,.15);
}
.chat-cat-chip:hover::after{opacity:1;right:4px}

/* Featured (öne çıkan) kategori kartı — v2 */
.chat-cat-chip.chat-cat-featured{
    grid-column:span 2;
    border:1.5px solid rgba(255,96,0,.35);
    box-shadow:0 2px 8px rgba(255,96,0,.1), 0 1px 2px rgba(0,0,0,.04);
    background:linear-gradient(135deg,#fff 0%, #FFF8F3 100%);
    flex-direction:row;
}
.chat-cat-chip.chat-cat-featured .ccc-img{
    width:92px;height:82px;flex:0 0 92px;
}
.chat-cat-chip.chat-cat-featured .ccc-body{
    flex:1;
    padding:10px 12px;
    justify-content:center;
    gap:4px;
    background:transparent;
}
.chat-cat-chip.chat-cat-featured .ccc-name{
    font-size:12.5px;
    min-height:0;
    -webkit-line-clamp:1;
}
.chat-cat-chip.chat-cat-featured .ccc-count{
    font-size:10px;
}
.chat-cat-chip.chat-cat-featured::before{
    content:'Öne Çıkan';
    position:absolute;
    top:6px;right:6px;
    background:linear-gradient(135deg,#FF6000,#E05500);
    color:#fff;
    font-size:8.5px;
    font-weight:700;
    padding:2px 6px;
    border-radius:10px;
    letter-spacing:.3px;
    z-index:2;
}
.chat-cat-chip.chat-cat-featured:hover{
    border-color:var(--fire);
    box-shadow:0 6px 18px rgba(255,96,0,.2);
}

@media(max-width:420px){
    .chat-cat-chip.chat-cat-featured{grid-column:span 2}
    .chat-cat-chip.chat-cat-featured .ccc-img{width:76px;height:70px;flex:0 0 76px}
}

@media(max-width:420px){
    .chat-cat-chips{grid-template-columns:repeat(2,1fr)}
    .ccc-img{height:60px}
    .ccc-name{font-size:10px;min-height:24px}
}

/* ── Desktop Destek Butonları ── */
.desktop-support-btns{display:none}
@media(min-width:769px){
    .desktop-support-btns{display:flex;flex-direction:column;gap:10px;position:fixed;bottom:24px;right:24px;z-index:997}
    .dsb{display:flex;align-items:center;gap:10px;padding:12px 20px;border-radius:50px;border:none;text-decoration:none;cursor:pointer;font-family:var(--bf);font-size:13px;font-weight:700;transition:all .3s var(--ease);box-shadow:0 4px 16px rgba(0,0,0,.08);position:relative;overflow:hidden}
    .dsb-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .dsb-icon svg{width:18px;height:18px}
    .dsb-label{white-space:nowrap}

    /* AI Destek butonu — gradient animasyonlu */
    .dsb-ai{background:var(--bg);color:var(--text);border:1.5px solid var(--border)}
    .dsb-ai:hover{border-color:var(--fire);color:var(--fire);transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,96,0,.15)}
    .dsb-ai.active{background:linear-gradient(90deg,var(--lava),var(--ember),var(--fire),var(--glow),var(--fire),var(--ember),var(--lava));background-size:200% 100%;animation:gx 4s linear infinite;color:#fff;border-color:transparent}
    .dsb-ai.active::before{content:'';position:absolute;top:0;left:0;width:40px;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2.5s ease-in-out infinite}
    .dsb-dot{width:8px;height:8px;border-radius:50%;background:var(--success);flex-shrink:0;animation:dotPulse 2s infinite}

    /* WhatsApp butonu */
    .dsb-wa{background:var(--whatsapp);color:#fff}
    .dsb-wa:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(37,211,102,.25)}

    @keyframes dotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
}

/* ============================================
   PRODUCT TABS
   ============================================ */
.product-tabs{border-top:1px solid var(--border);padding-top:2rem;margin-bottom:2.5rem}
.tab-bar{display:flex;gap:0;border-bottom:2px solid var(--border);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tab-bar::-webkit-scrollbar{display:none}
.tab-btn{padding:.75rem 1.25rem;font-family:var(--bf);font-size:.85rem;font-weight:600;color:var(--dim);white-space:nowrap;border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .2s var(--ease),border-color .2s var(--ease)}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{color:var(--fire);border-bottom-color:var(--fire)}
.tab-btn .tab-count{font-size:.75rem;color:var(--muted);font-weight:500;margin-left:4px}
.tab-btn.active .tab-count{color:var(--fire)}
.tab-panel{display:none;padding:1.5rem 0}
.tab-panel.active{display:block}

/* Review List */
.review-list{display:flex;flex-direction:column;gap:1.25rem}
.review-item{padding:1rem 1.25rem;background:var(--surface);border-radius:var(--radius);border:1px solid var(--border)}
.review-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem;flex-wrap:wrap}
.review-stars{display:inline-flex;gap:2px}
.review-stars svg{width:14px;height:14px;fill:var(--fire)}
.review-stars svg.empty{fill:var(--border)}
.review-author{font-weight:700;font-size:.85rem;color:var(--text)}
.review-date{font-size:.75rem;color:var(--muted);margin-left:auto}
.review-text{font-size:.9rem;color:var(--dim);line-height:1.7}
.review-reply{margin-top:.75rem;padding:.75rem 1rem;background:var(--tint);border-left:3px solid var(--fire);border-radius:0 8px 8px 0;font-size:.85rem;color:var(--dim);line-height:1.6}
.review-reply strong{display:block;font-size:.78rem;color:var(--fire);margin-bottom:.25rem}
.review-reply p{margin:0}
.review-empty{text-align:center;padding:2rem 1rem;color:var(--dim);font-size:.9rem}

/* Question List */
.qa-list{display:flex;flex-direction:column;gap:1rem}
.qa-item{padding:1rem 1.25rem;background:var(--surface);border-radius:var(--radius);border:1px solid var(--border)}
.qa-question{font-weight:700;font-size:.9rem;color:var(--text);margin-bottom:.5rem;display:flex;gap:.5rem}
.qa-question::before{content:"S:";color:var(--fire);font-weight:800;flex-shrink:0}
.qa-answer{font-size:.9rem;color:var(--dim);line-height:1.7;padding-left:1.5rem;display:flex;gap:.5rem}
.qa-answer::before{content:"C:";color:var(--success);font-weight:800;flex-shrink:0}
.qa-date{font-size:.72rem;color:var(--muted);margin-top:.375rem;padding-left:1.5rem}

/* Tab Forms */
.tab-form{margin-top:1.5rem;padding:1.25rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.tab-form h3{font-family:var(--hf);font-size:1rem;font-weight:700;margin-bottom:1rem;color:var(--text)}
.form-row{margin-bottom:.875rem}
.form-row label{display:block;font-size:.8rem;font-weight:600;color:var(--dim);margin-bottom:.25rem}
.form-row input,.form-row textarea,.form-row select{width:100%;padding:.625rem .875rem;border:1px solid var(--border);border-radius:8px;font-size:.9rem;background:var(--bg);color:var(--text);transition:border-color .2s var(--ease)}
.form-row input:focus,.form-row textarea:focus{outline:none;border-color:var(--fire);box-shadow:0 0 0 3px rgba(255,96,0,.08)}
.form-row textarea{min-height:80px;resize:vertical}

/* Star Rating Input */
.star-input{display:flex;gap:4px;cursor:pointer}
.star-input svg{width:24px;height:24px;fill:var(--border);transition:fill .15s}
.star-input svg.active{fill:var(--fire)}
.star-input svg:hover,.star-input svg:hover~svg{fill:var(--fire)}

/* Suggestion Radio Options */
.suggestion-options{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.875rem}
.suggestion-option{display:flex;align-items:center;gap:.625rem;padding:.625rem .875rem;border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:all .15s var(--ease);font-size:.88rem;color:var(--dim)}
.suggestion-option:hover{border-color:var(--border-h);background:var(--tint)}
.suggestion-option input[type="checkbox"]{accent-color:var(--fire);width:16px;height:16px;flex-shrink:0}
.suggestion-option.selected{border-color:var(--fire);background:var(--tint);color:var(--text)}
.suggestion-other-input{margin-top:.5rem;display:none}
.suggestion-other-input.visible{display:block}

/* Form Submit */
.form-submit{display:flex;align-items:center;gap:1rem;margin-top:1rem}
.form-submit .btn{padding:.625rem 1.5rem;font-size:.88rem}
.form-msg{font-size:.85rem;font-weight:600}
.form-msg.success{color:var(--success)}
.form-msg.error{color:var(--danger)}

/* Related */
.related-products{border-top:1px solid var(--border);padding-top:2rem}

/* ============================================
   SEARCH PAGE
   ============================================ */
.search-page-form{display:flex;max-width:600px;margin:0 auto 2rem;gap:.75rem}
.search-page-form input{flex:1;padding:.75rem 1rem;border:2px solid var(--border);border-radius:var(--radius);font-size:1rem}
.search-page-form input:focus{outline:none;border-color:var(--fire)}

/* Empty state */
.empty-state{text-align:center;padding:3rem 1rem;color:var(--dim)}
.empty-state a{color:var(--fire);font-weight:600}

/* ============================================
   BREADCRUMB
   ============================================ */
.breadcrumb{padding:.5rem 0;margin-bottom:0;background:transparent;border:none;overflow:hidden}
.breadcrumb .container{max-width:1200px;margin:0 auto;padding:0 1rem}
.breadcrumb-list{display:flex;flex-wrap:nowrap;align-items:center;list-style:none;font-size:.75rem;gap:0;margin:0;padding:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(to right,#000 90%,transparent);-webkit-mask-image:linear-gradient(to right,#000 90%,transparent)}
.breadcrumb-list::-webkit-scrollbar{display:none}
.breadcrumb-item{display:flex;align-items:center;white-space:nowrap;flex-shrink:0}
.breadcrumb-item::after{content:"/";color:var(--muted);margin:0 .375rem;font-size:.7rem;flex-shrink:0}
.breadcrumb-item:last-child::after{display:none}
.breadcrumb-item a{color:var(--muted);transition:color .2s}
.breadcrumb-item a:hover{color:var(--fire)}
.breadcrumb-item.active{color:var(--dim);font-weight:500}
.breadcrumb-item.active span{overflow:hidden;text-overflow:ellipsis;max-width:220px;display:inline-block;white-space:nowrap}

/* ============================================
   PAGINATION
   ============================================ */
.pagination{display:flex;justify-content:center;align-items:center;gap:.5rem;margin-top:2rem;padding-top:2rem;border-top:1px solid var(--border)}
.pagination-btn{display:flex;align-items:center;gap:.25rem;padding:.5rem 1rem;border:1px solid var(--border);border-radius:8px;font-size:.85rem;font-weight:600;color:var(--text)}
.pagination-btn:hover{border-color:var(--fire);color:var(--fire)}
.pagination-numbers{display:flex;gap:.25rem}
.pagination-num{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:.85rem;font-weight:600;color:var(--dim)}
.pagination-num:hover{background:var(--tint);color:var(--fire)}
.pagination-num.active{background:var(--g-warm);color:#fff}
.pagination-dots{width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--muted)}

/* ============================================
   FOOTER
   ============================================ */
.site-footer{background:var(--text);color:#fff;padding:3rem 0 0}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2rem}
.footer-title{font-size:1.5rem;margin-bottom:.75rem}
.footer-desc{color:rgba(255,255,255,.6);font-size:.9rem;line-height:1.6}
.footer-heading{font-size:.85rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:.75rem;color:rgba(255,255,255,.5)}
.footer-links{list-style:none}
.footer-links li{margin-bottom:.5rem}
.footer-links a{color:rgba(255,255,255,.7);font-size:.9rem;transition:color .2s}
.footer-links a:hover{color:var(--glow)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:1.5rem 0;text-align:center;font-size:.8rem;color:rgba(255,255,255,.4)}
.footer-legal{margin-top:.5rem;color:rgba(255,255,255,.3)}

/* ============================================
   BLOG
   ============================================ */
/* Blog Header */
.blog-header{text-align:center;margin-bottom:2rem}
.blog-header-desc{font-size:1rem;color:var(--dim);margin-top:.5rem}

/* Blog Kategori Filtreleri */
.blog-categories{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:2rem}
.blog-cat-pill{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 1rem;border-radius:20px;font-size:.85rem;font-weight:600;text-decoration:none;border:1px solid var(--border);color:var(--dim);background:var(--bg);transition:all .2s var(--ease)}
.blog-cat-pill:hover{border-color:var(--fire);color:var(--fire)}
.blog-cat-pill.active{background:var(--fire);color:#fff;border-color:var(--fire)}
.blog-cat-count{font-size:.7rem;opacity:.7}

/* Blog Grid */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem}
.blog-grid--related{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

/* Blog Kart */
.blog-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:all .2s var(--ease)}
.blog-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.blog-card a{text-decoration:none;color:inherit;display:block}
.blog-card-img{aspect-ratio:16/9;overflow:hidden;background:var(--surface);position:relative;isolation:isolate}
.blog-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s var(--ease)}
.blog-card:hover .blog-card-img img{transform:scale(1.04)}
/* Dikey/kare görsel — kesmeden, marka tint + ışık vignette ile zarif yerleşim */
.blog-card-img--contain{background:radial-gradient(ellipse at center,var(--surface) 0%,var(--tint) 55%,#FFE8D6 100%)}
.blog-card-img--contain::before{content:'';position:absolute;inset:0;z-index:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.6) 0%,transparent 55%),radial-gradient(circle at 75% 85%,rgba(255,176,112,.2) 0%,transparent 55%);pointer-events:none}
.blog-card-img--contain img{object-fit:contain;padding:16px;position:relative;z-index:1;filter:drop-shadow(0 6px 16px rgba(28,18,16,.12))}

/* ─── Blog Yazar Meta Kutusu (marka kimliği — PREMIUM) ─── */
.blog-author-box{
    margin:3rem 0 0;
    display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;
    background:linear-gradient(135deg,#FFF8F2 0%,var(--tint) 55%,#FFE8D6 100%);
    border:1px solid rgba(255,96,0,.16);
    border-radius:20px;
    padding:22px 28px;
    position:relative;overflow:hidden;
    box-shadow:0 6px 24px rgba(255,96,0,.07),inset 0 1px 0 rgba(255,255,255,.5)
}
.blog-author-box::before{content:'';position:absolute;top:-20%;right:-5%;width:40%;height:130%;background:radial-gradient(ellipse,rgba(255,96,0,.12),transparent 65%);pointer-events:none;z-index:0}
.blog-author-box::after{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--g-warm);border-radius:20px 0 0 20px;z-index:1}

/* Avatar — büyük, tek parça, alignment net */
.blog-author-avatar{
    position:relative;z-index:2;
    width:84px;height:84px;border-radius:50%;
    display:grid;place-items:center;font-size:38px;color:#fff;
    box-shadow:0 10px 28px rgba(0,0,0,.18),inset 0 2px 0 rgba(255,255,255,.28),0 0 0 5px rgba(255,255,255,.65);
    line-height:1;flex-shrink:0
}

/* Body — tipografi hiyerarşisi */
.blog-author-body{position:relative;z-index:2;min-width:0}
.blog-author-name-row{display:flex;flex-direction:column;gap:3px;margin-bottom:.75rem}

/* İsim — blog-post-content h3 miraslarını resetle */
.blog-author-name,
.blog-post-content .blog-author-box .blog-author-name{
    counter-increment:none !important;
    font-family:var(--hf);font-size:1.35rem;font-weight:800;
    color:var(--text) !important;letter-spacing:-.015em;line-height:1.15;
    margin:0 !important;padding:0 !important;
    display:block !important;min-height:0 !important;
    border:none !important;background:none !important
}
.blog-author-name::before,
.blog-author-name::after,
.blog-post-content .blog-author-box .blog-author-name::before,
.blog-post-content .blog-author-box .blog-author-name::after{
    content:none !important;display:none !important
}

/* Rol — marka renk, compact */
.blog-author-role{font-family:var(--bf);font-size:.82rem;font-weight:700;letter-spacing:.005em;line-height:1.35;text-transform:none}

/* Bio — drop-cap/first-letter miraslarını tamamen resetle */
.blog-author-bio,
.blog-post-content .blog-author-box .blog-author-bio{
    font-family:var(--bf);font-size:.92rem !important;font-weight:400 !important;
    color:var(--text) !important;line-height:1.65 !important;
    margin:0 0 .85rem !important;padding:0 !important
}
.blog-author-bio::first-letter,
.blog-post-content .blog-author-box .blog-author-bio::first-letter,
.blog-post-content .blog-author-box p::first-letter,
.blog-post-content .blog-author-box p:first-of-type::first-letter{
    font-size:inherit !important;float:none !important;color:inherit !important;
    font-weight:inherit !important;padding:0 !important;line-height:inherit !important
}

/* Meta — ince çizgi üstü */
.blog-author-meta{
    display:flex;align-items:center;gap:8px;
    font-family:var(--bf);font-size:.78rem;color:var(--dim);font-weight:500;
    padding-top:.75rem;border-top:1px dashed rgba(255,96,0,.18)
}
.blog-author-meta strong{color:var(--fire);font-weight:700;font-size:.85rem;font-family:var(--hf)}
.blog-author-dot{opacity:.4}

@media(max-width:640px){
    .blog-author-box{grid-template-columns:1fr;text-align:center;padding:20px 22px;gap:14px}
    .blog-author-avatar{width:72px;height:72px;font-size:32px;margin:0 auto}
    .blog-author-name-row{align-items:center}
    .blog-author-name,.blog-post-content .blog-author-box .blog-author-name{font-size:1.2rem}
    .blog-author-meta{justify-content:center;flex-wrap:wrap}
}

/* ═══════════════════════════════════════════════════════════
   BLOG POST SAYFASI — Magazin Tarzı V2
   Hero + 2 kolon body + zengin tipografi + inline bileşenler
   ═══════════════════════════════════════════════════════════ */

.blog-article{background:var(--bg);position:relative}

/* ─── HERO ─── */
.blog-hero{position:relative;padding:2.25rem 0 2.5rem;overflow:hidden}
.blog-hero::after{content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(540px,80%);height:3px;background:linear-gradient(90deg,transparent,var(--fire),transparent);border-radius:3px;opacity:.55}

/* Blog sayfalarında breadcrumb — metin standart konumda, zemin yukarı doğru boyanır */
body:has(.blog-article) .breadcrumb,
body:has(.blog-list-hero) .breadcrumb{
    background:
        radial-gradient(ellipse at 20% 200%,rgba(255,96,0,.08) 0%,transparent 60%),
        linear-gradient(180deg,var(--surface),var(--surface));
    padding:.5rem 0;
    position:relative;
    overflow:visible
}
body:has(.blog-article) .breadcrumb::before,
body:has(.blog-list-hero) .breadcrumb::before{
    content:'';
    position:absolute;left:0;right:0;bottom:100%;
    height:28px;
    background:linear-gradient(180deg,transparent,var(--surface));
    pointer-events:none
}
.blog-hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 20% 10%,rgba(255,96,0,.06) 0%,transparent 55%),radial-gradient(ellipse at 85% 90%,rgba(216,85,48,.05) 0%,transparent 55%),linear-gradient(180deg,var(--surface),var(--bg));z-index:0}
.blog-hero-inner{position:relative;z-index:1;max-width:900px;margin:0 auto;text-align:center}
.blog-hero-meta{display:inline-flex;align-items:center;gap:8px;font-family:var(--bf);font-size:.8rem;font-weight:600;color:var(--dim);margin-bottom:1.1rem;flex-wrap:wrap;justify-content:center}
.blog-hero-cat{background:var(--g-warm);color:#fff !important;padding:5px 13px;border-radius:50px;text-decoration:none;font-weight:700;letter-spacing:.02em;font-size:.72rem;text-transform:uppercase;box-shadow:0 3px 10px rgba(216,85,48,.25);transition:transform .2s var(--ease)}
.blog-hero-cat:hover{transform:translateY(-1px)}
.blog-hero-meta-dot{color:var(--muted);opacity:.6}
.blog-hero-read,.blog-hero-date{font-family:var(--bf)}
.blog-hero-title{font-family:var(--hf);font-size:clamp(1.9rem,4.5vw,3.2rem);line-height:1.1;font-weight:800;margin:0 0 1.25rem;letter-spacing:-.02em}
.blog-hero-title .gx{background-size:200% 100%}
.blog-hero-excerpt{font-family:var(--bf);font-size:1.05rem;color:var(--dim);line-height:1.65;max-width:680px;margin:0 auto 1.75rem;font-weight:400}
.blog-hero-bottom{display:flex;align-items:center;justify-content:center;gap:2rem;padding-top:1.25rem;border-top:1px solid var(--border);flex-wrap:wrap}
.blog-hero-author{display:flex;align-items:center;gap:12px}
.blog-hero-avatar{width:48px;height:48px;border-radius:50%;color:#fff;display:grid;place-items:center;font-size:22px;flex-shrink:0;box-shadow:0 4px 14px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.25)}
.blog-hero-author-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.blog-hero-author-text strong{font-family:var(--hf);font-size:.95rem;font-weight:800;color:var(--text)}
.blog-hero-author-text span{font-size:.72rem;color:var(--dim);font-weight:500;margin-top:2px}
.blog-hero-stats{display:flex;gap:14px;font-family:var(--bf);font-size:.82rem;color:var(--dim);font-weight:500}
.blog-hero-stats span{display:inline-flex;align-items:center;gap:4px}

/* ─── COVER — görselin kendi oranında, asla kırpılmaz ─── */
.blog-post-cover{
    margin:0 auto 3rem;max-width:1100px;width:calc(100% - 32px);
    border-radius:22px;overflow:hidden;position:relative;
    max-height:640px;
    background:linear-gradient(135deg,var(--tint),var(--surface));
    box-shadow:0 20px 50px -20px rgba(28,18,16,.35),0 0 0 1px rgba(255,96,0,.05);
    display:flex;align-items:center;justify-content:center
}
.blog-post-cover img{
    width:100%;height:100%;
    object-fit:contain;object-position:center;display:block
}
/* Dikey/kare görsellerde tint radial + drop shadow premium vignette */
.blog-post-cover.blog-post-cover--tall{
    max-height:560px;aspect-ratio:4/5;
    background:radial-gradient(ellipse at center,var(--surface) 0%,var(--tint) 55%,#FFE8D6 100%)
}
.blog-post-cover.blog-post-cover--tall::before{
    content:'';position:absolute;inset:0;z-index:0;
    background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.55) 0%,transparent 55%),radial-gradient(circle at 75% 85%,rgba(255,176,112,.18) 0%,transparent 55%);
    pointer-events:none
}
.blog-post-cover.blog-post-cover--tall img{
    width:auto !important;height:auto !important;max-width:100%;max-height:100%;
    padding:24px;position:relative;z-index:1;
    filter:drop-shadow(0 10px 28px rgba(28,18,16,.18))
}

/* ─── BODY — Geniş içerik, her cihazda akıllı responsive ─── */
.blog-post-body{position:relative;max-width:1100px;margin:0 auto;padding:1rem clamp(16px, 3vw, 24px) 3rem;box-sizing:border-box}

/* ─── SOL: PAYLAŞIM — içeriğin solunda dikey şerit ─── */
.blog-share{position:sticky;top:90px;float:left;width:48px;margin-left:-72px;display:flex;flex-direction:column;align-items:center;gap:10px;z-index:2}
.blog-share-label{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--bf);font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.blog-share-btn{width:40px;height:40px;border-radius:50%;background:var(--bg);border:1px solid var(--border);color:var(--dim);display:grid;place-items:center;cursor:pointer;transition:all .2s var(--ease);position:relative;text-decoration:none}
.blog-share-btn:hover{border-color:var(--fire);color:var(--fire);transform:translateY(-2px);box-shadow:0 6px 18px rgba(255,96,0,.18)}
.blog-share-copy-ok{position:absolute;font-size:11px;background:var(--success);color:#fff;padding:2px 8px;border-radius:50px;right:-42px;opacity:0;transition:opacity .25s;pointer-events:none}
.blog-share-copy.copied .blog-share-copy-ok{opacity:1}

/* ─── ORTA: İÇERİK ─── Body içinde tam genişlik */
.blog-post-content{font-family:var(--bf);font-size:17px;line-height:1.78;color:var(--text);max-width:none;width:100%;margin:0;padding:0}
.blog-post-content > :first-child{margin-top:0}
.blog-post-content p{margin:0 0 1.25rem;color:var(--text)}
.blog-post-content > p:first-of-type{font-size:1.08em;color:var(--text);font-weight:500;line-height:1.7}
/* H2 — Marka gradient metin + parıldayan nokta + alt ışık */
.blog-post-content h2{
    font-family:var(--hf);font-size:1.75rem;line-height:1.2;font-weight:800;margin:2.75rem 0 1.15rem;
    letter-spacing:-.02em;position:relative;padding:.2rem 0 .6rem;
    background:var(--g-warm);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
    display:block
}
.blog-post-content h2::after{
    content:'';position:absolute;left:0;bottom:0;width:56px;height:3px;border-radius:3px;
    background:var(--g-warm);box-shadow:0 2px 12px rgba(255,96,0,.35)
}

/* H3 — PREMIUM: Numaralı gradient chip + marka vurgusu (codepen-tier) */
.blog-post-content{counter-reset:blog-h3-counter}
.blog-post-content h3{
    counter-increment:blog-h3-counter;
    font-family:var(--hf);font-size:1.28rem;line-height:1.35;font-weight:800;margin:2.25rem 0 1rem;
    letter-spacing:-.012em;color:var(--text);position:relative;padding:8px 0 8px 58px;min-height:44px;display:flex;align-items:center;
    border-left:none !important;border-radius:0 !important;background:none !important
}
.blog-post-content h3::before{
    content:counter(blog-h3-counter, decimal-leading-zero);
    position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:44px;height:44px;border-radius:13px;
    background:var(--g-warm);color:#fff;
    display:grid;place-items:center;
    font-family:var(--hf);font-size:.92rem;font-weight:800;letter-spacing:-.02em;
    box-shadow:0 8px 22px rgba(216,85,48,.32),inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1px rgba(255,96,0,.15);
    transition:transform .3s var(--ease)
}
.blog-post-content h3:hover::before{transform:translateY(-50%) scale(1.08) rotate(-3deg)}
.blog-post-content h3::after{
    content:'';position:absolute;left:58px;right:0;bottom:-6px;height:1px;
    background:linear-gradient(90deg,rgba(255,96,0,.35),transparent 75%);
    opacity:.8
}

/* H4 — Gradient chip daha küçük, harfli marka vurgusu */
.blog-post-content h4{
    font-family:var(--hf);font-size:1.08rem;font-weight:800;margin:1.5rem 0 .6rem;
    letter-spacing:-.005em;color:var(--text);position:relative;padding-left:26px;display:flex;align-items:center;gap:4px;min-height:28px
}
.blog-post-content h4::before{
    content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:18px;height:18px;border-radius:6px;
    background:var(--g-warm);
    box-shadow:0 3px 10px rgba(216,85,48,.3),inset 0 1px 0 rgba(255,255,255,.3)
}
.blog-post-content strong,
.blog-post-content p>strong:only-child,
.blog-post-content p>b:only-child{display:inline;font-family:inherit;font-size:inherit;color:var(--text);font-weight:700;margin:0}
.blog-post-content a{color:var(--fire);text-decoration:underline;text-decoration-color:rgba(255,96,0,.35);text-underline-offset:3px;transition:all .2s}
.blog-post-content a:hover{color:var(--ember);text-decoration-color:var(--ember)}
.blog-post-content ul,.blog-post-content ol{margin:0 0 1.5rem;padding-left:1.5rem}
.blog-post-content li{margin-bottom:.5rem}
.blog-post-content li::marker{color:var(--fire)}
.blog-post-content img{border-radius:14px;margin:1.75rem auto;display:block;max-width:100%;height:auto;box-shadow:0 10px 30px -10px rgba(28,18,16,.25)}
.blog-post-content blockquote{background:linear-gradient(135deg,var(--tint),rgba(255,228,200,.5));border-left:4px solid var(--fire);border-radius:0 14px 14px 0;padding:18px 22px;margin:1.75rem 0;font-family:var(--hf);font-size:1.08rem;font-style:italic;color:var(--text);line-height:1.6;position:relative}
.blog-post-content blockquote p:last-child{margin-bottom:0}
.blog-post-content code{background:var(--tint);padding:2px 7px;border-radius:4px;font-family:'Courier New',monospace;font-size:.92em;color:var(--ember)}
/* Dekoratif separator — marka 3 noktalı + gradient line */
.blog-post-content hr{
    border:none;height:24px;margin:2.75rem 0;
    background:none;position:relative;display:flex;align-items:center;justify-content:center;
    overflow:visible
}
.blog-post-content hr::before{
    content:'';position:absolute;left:0;right:0;top:50%;height:1px;
    background:linear-gradient(90deg,transparent,var(--border) 18%,var(--border-h) 48%,var(--border-h) 52%,var(--border) 82%,transparent)
}
.blog-post-content hr::after{
    content:'◆ ◆ ◆';position:relative;background:var(--bg);padding:0 16px;
    color:var(--fire);font-size:.7rem;letter-spacing:.4em;z-index:1
}

/* İki H2 arası otomatik gradient kararsız olursa hr ekle tavsiye; kullanıcıya kalır */
.blog-post-content table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.95em}
.blog-post-content table th,.blog-post-content table td{padding:.75rem 1rem;border-bottom:1px solid var(--border);text-align:left}
.blog-post-content table th{background:var(--tint);color:var(--text);font-family:var(--hf);font-weight:700;font-size:.92em}

/* ═══ AI-ENRICH BİLEŞENLERİ — İçeriğe marka dokunuşu ═══ */
/* Uyarı/ipucu kutusu — <aside class="blog-callout blog-callout--tip"> */
.blog-callout{display:flex;gap:14px;padding:16px 18px;border-radius:14px;margin:1.75rem 0;line-height:1.55;font-size:.98em}
.blog-callout-ico{flex-shrink:0;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:18px}
.blog-callout-body{flex:1;min-width:0}
.blog-callout-body p:last-child{margin-bottom:0}
.blog-callout-body strong:first-child{display:block;margin-bottom:4px;font-family:var(--hf);font-size:1em;font-weight:800}
.blog-callout--tip{background:linear-gradient(135deg,#FFF4EB,#FFE8D6);border:1px solid rgba(255,96,0,.18)}
.blog-callout--tip .blog-callout-ico{background:var(--g-warm);color:#fff}
.blog-callout--tip .blog-callout-body strong:first-child{color:var(--ember)}
.blog-callout--warn{background:linear-gradient(135deg,#FEF3C7,#FEF8E4);border:1px solid #F59E0B}
.blog-callout--warn .blog-callout-ico{background:#F59E0B;color:#fff}
.blog-callout--warn .blog-callout-body strong:first-child{color:#92400E}
.blog-callout--info{background:linear-gradient(135deg,#DBEAFE,#EFF6FF);border:1px solid #3B82F6}
.blog-callout--info .blog-callout-ico{background:#3B82F6;color:#fff}
.blog-callout--info .blog-callout-body strong:first-child{color:#1E40AF}

/* Stat blok — sayı/oran vitrini */
.blog-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin:2rem 0;padding:20px;background:linear-gradient(135deg,var(--tint),rgba(255,232,214,.5));border-radius:18px;border:1px solid rgba(255,96,0,.12)}
.blog-stat{text-align:center}
.blog-stat-num{font-family:var(--hf);font-size:2rem;font-weight:800;background:var(--g-warm);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1;display:block}
.blog-stat-lbl{font-family:var(--bf);font-size:.78rem;font-weight:600;color:var(--dim);margin-top:6px;display:block;letter-spacing:.02em}

/* CTA kartı — içerik içinde ürün linki */
.blog-inline-cta{display:flex;align-items:center;gap:16px;padding:18px 22px;margin:2rem 0;background:linear-gradient(135deg,var(--text),#2D1A12);color:#FAFAF8;border-radius:16px;position:relative;overflow:hidden}
.blog-inline-cta::before{content:'';position:absolute;top:-50%;right:-10%;width:60%;height:200%;background:radial-gradient(ellipse,rgba(255,96,0,.25),transparent 60%);pointer-events:none}
.blog-inline-cta-ico{flex-shrink:0;font-size:32px;position:relative;z-index:1}
.blog-inline-cta-body{flex:1;min-width:0;position:relative;z-index:1}
.blog-inline-cta-body h4{font-family:var(--hf);font-size:1.1rem;font-weight:800;margin:0 0 4px;color:#fff}
.blog-inline-cta-body p{margin:0;font-size:.9rem;color:rgba(255,255,255,.75);line-height:1.5}
.blog-inline-cta-btn{flex-shrink:0;padding:10px 20px;background:var(--g-warm);color:#fff !important;border-radius:50px;font-weight:700;font-size:.88rem;text-decoration:none !important;box-shadow:0 4px 14px rgba(216,85,48,.4);position:relative;z-index:1;white-space:nowrap;transition:transform .2s}
.blog-inline-cta-btn:hover{transform:translateY(-2px)}

/* Özellik listesi — icon + label */
.blog-feature-list{list-style:none;padding:0;margin:1.75rem 0;display:grid;gap:10px}
.blog-feature-list li{display:flex;gap:12px;padding:12px 14px;background:var(--tint);border-radius:12px;border:1px solid rgba(255,96,0,.1)}
.blog-feature-list li::marker{content:none}
.blog-feature-list li::before{content:'✓';flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--g-warm);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800}

/* Side-by-side görsel + metin */
.blog-split{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;margin:2rem 0}
.blog-split img{margin:0 !important}
.blog-split-text p:last-child{margin-bottom:0}
@media(max-width:720px){.blog-split{grid-template-columns:1fr}}

/* ─── ETİKETLER ─── */
.blog-post-tags{display:flex;flex-wrap:wrap;gap:8px;margin:2.5rem 0 0;padding-top:1.5rem;border-top:1px solid var(--border);align-items:center}
.blog-tags-label{font-family:var(--bf);font-size:.78rem;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;margin-right:4px}
.blog-tag{display:inline-block;padding:6px 12px;background:var(--tint);color:var(--ember);border-radius:50px;font-size:.78rem;font-weight:600;transition:all .2s var(--ease)}
.blog-tag:hover{background:var(--g-warm);color:#fff;transform:translateY(-1px)}

/* ─── SAĞ: İLGİLİ YAZI RIBBON ─── */
.blog-aside{position:sticky;top:90px}
.blog-aside-title{font-family:var(--hf);font-size:.8rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin:0 0 1rem}
.blog-aside-list{display:flex;flex-direction:column;gap:10px}
.blog-aside-item{display:flex;gap:10px;padding:10px;background:var(--bg);border:1px solid var(--border);border-radius:12px;text-decoration:none;transition:all .2s var(--ease)}
.blog-aside-item:hover{border-color:var(--border-h);box-shadow:0 4px 14px rgba(255,96,0,.08);transform:translateY(-1px)}
.blog-aside-thumb{flex-shrink:0;width:58px;height:58px;border-radius:10px;overflow:hidden;background:var(--tint)}
.blog-aside-thumb img{width:100%;height:100%;object-fit:cover}
.blog-aside-body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.blog-aside-body strong{font-family:var(--hf);font-size:.82rem;font-weight:700;color:var(--text);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-aside-body span{font-size:.68rem;color:var(--muted);font-weight:500}

/* Yazar kutusu — body sonu */
.blog-post-content .blog-author-box{margin:3rem 0 0}

/* İlgili yazılar — altta geniş */
.blog-related{margin:3rem auto 0;padding:2.5rem 0 1rem;border-top:1px solid var(--border);max-width:1180px}
.blog-related-title{font-family:var(--hf);font-size:1.6rem;font-weight:800;text-align:center;margin-bottom:1.75rem;letter-spacing:-.01em}

/* ─── RESPONSIVE ─── */
@media(max-width:1200px){
    .blog-post-body{padding:1rem 20px 3rem}
    .blog-share{margin-left:0;float:none;position:static;flex-direction:row;justify-content:flex-start;width:auto;padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid var(--border)}
    .blog-share-label{writing-mode:horizontal-tb;transform:none;margin:0 8px 0 0;font-size:.7rem}
}
@media(max-width:720px){
    .blog-hero{padding:1.75rem 0 1.5rem}
    .blog-hero-title{font-size:1.9rem}
    .blog-hero-excerpt{font-size:.95rem}
    .blog-hero-bottom{gap:1rem;padding-top:1rem}
    .blog-post-body{grid-template-columns:1fr;gap:0;padding:.5rem 0 2rem}
    .blog-share{position:static;flex-direction:row;justify-content:center;padding:14px 0;margin-bottom:1.5rem;background:var(--surface);border-radius:50px;border:1px solid var(--border)}
    .blog-share-label{writing-mode:horizontal-tb;transform:none;margin:0 8px 0 12px;font-size:.65rem}
    .blog-post-content{font-size:16px;line-height:1.7}
    .blog-post-content h2{font-size:1.4rem;margin:1.75rem 0 .75rem}
    .blog-post-content h3{font-size:1.15rem;margin:1.5rem 0 .5rem}
    .blog-post-cover{border-radius:14px;margin-bottom:1.5rem}
    .blog-inline-cta{flex-direction:column;text-align:center;gap:12px}
    .blog-related-title{font-size:1.3rem}
}
.blog-card-body{padding:1.25rem}
.blog-card-meta{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
.blog-card-cat{display:inline-block;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--fire);font-weight:700;background:var(--tint);padding:2px 8px;border-radius:6px;text-decoration:none}
.blog-card-read{font-size:.75rem;color:var(--muted)}
.blog-card-title{font-family:var(--hf);font-size:1.1rem;font-weight:700;margin-bottom:.5rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-card-excerpt{font-size:.9rem;color:var(--dim);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5}
.blog-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:.75rem}
.blog-card-date{font-size:.8rem;color:var(--muted)}
.blog-card-author{font-size:.8rem;color:var(--muted)}

/* Öne Çıkan Kart */
.blog-card--featured{margin-bottom:2rem;border:2px solid var(--tint)}
.blog-card--featured a{display:grid;grid-template-columns:1.2fr 1fr;gap:0}
.blog-card--featured .blog-card-img{aspect-ratio:auto;min-height:300px}
.blog-card--featured .blog-card-body{padding:2rem;display:flex;flex-direction:column;justify-content:center}
.blog-card--featured .blog-card-title{font-size:1.5rem;-webkit-line-clamp:3}
.blog-card--featured .blog-card-excerpt{-webkit-line-clamp:4}

/* Blog Post Detay */
.blog-post-header{text-align:center;margin-bottom:2rem}
.blog-post-meta-top{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:.75rem;font-size:.85rem;color:var(--dim)}
.blog-post-meta-sep{opacity:.4}
.blog-post-read{font-size:.85rem;color:var(--muted)}
.blog-post-title{font-size:2rem;line-height:1.2;margin-bottom:.75rem}
.blog-post-author-row{display:flex;align-items:center;justify-content:center;gap:1.5rem;font-size:.85rem;color:var(--muted)}
/* Eski dar kural V1 — V2 magazin layout devraldı (üst bloklarda) */
/* Eski dar kural — V2 magazin layout devraldı */
.blog-post-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:2rem 0;padding-top:1.5rem;border-top:1px solid var(--border)}
.blog-tag{font-size:.8rem;padding:.375rem .75rem;background:var(--surface);border-radius:8px;color:var(--dim)}

/* İlgili Yazılar */
.blog-related{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border)}
.blog-related-title{font-family:var(--hf);font-size:1.25rem;margin-bottom:1.5rem;text-align:center}

/* Top Campaign Banner */
.top-campaign-banner{display:block;width:100%;position:relative;overflow:hidden}
.top-campaign-banner a{display:block}
.top-campaign-banner img{width:100%;height:auto;display:block;max-height:80px;object-fit:cover}
.banner-close{position:absolute;top:50%;right:12px;transform:translateY(-50%);background:rgba(0,0,0,.5);color:#fff;border:none;border-radius:50%;width:24px;height:24px;cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center}
.banner-close:hover{background:rgba(0,0,0,.7)}

/* Campaign Hero */
.hero--campaign{background-size:cover;background-position:center;min-height:500px;position:relative}
.hero--campaign-overlay{position:absolute;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}
.hero--campaign-content{max-width:700px;padding:2rem}

/* ============================================
   ADMIN
   ============================================ */
.admin-layout{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.admin-sidebar{background:var(--text);color:#fff;padding:1.5rem}
.admin-sidebar a{color:rgba(255,255,255,.7);display:block;padding:.5rem .75rem;border-radius:8px;font-size:.9rem;margin-bottom:.25rem}
.admin-sidebar a:hover,.admin-sidebar a.active{background:rgba(255,255,255,.1);color:#fff}
.admin-content{padding:2rem}
.admin-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
.admin-table{width:100%;border-collapse:collapse}
.admin-table th,.admin-table td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--border);font-size:.9rem}
.admin-table th{background:var(--surface);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}
.admin-table tr:hover td{background:var(--tint)}
.admin-table img{width:40px;height:40px;object-fit:cover;border-radius:6px}

/* ============================================
   MEGA MENU
   ============================================ */
.mega-menu{display:none;position:absolute;top:100%;left:0;right:0;width:100vw;margin-left:calc(-50vw + 50%);background:var(--bg);border-top:2px solid var(--fire);box-shadow:0 12px 40px rgba(0,0,0,.1);z-index:90;animation:megaFadeIn .2s var(--ease)}
.nav-item.has-mega:hover .mega-menu{display:block}
.nav-item.has-mega:hover>a{color:var(--fire);border-bottom-color:var(--fire)}
.nav-item.has-mega:hover>a svg{transform:rotate(180deg)}
@keyframes megaFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

.mega-menu-inner{max-width:1200px;margin:0 auto;padding:1.5rem 1rem;display:grid;grid-template-columns:280px 1fr;gap:2rem}
.mega-col--cats{border-right:1px solid var(--border);padding-right:2rem}
.mega-heading{display:block;font-family:var(--bf);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:.75rem}
.mega-link{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;font-size:.85rem;color:var(--text);border-radius:8px;transition:all .15s var(--ease);text-decoration:none}
.mega-link:hover{background:var(--tint);color:var(--fire);padding-left:16px}
.mega-count{color:var(--muted);font-size:.75rem}
.mega-link--all{color:var(--fire);font-weight:700;margin-top:8px;border-top:1px solid var(--border);padding-top:12px;border-radius:0 0 8px 8px}

.mega-col--featured{display:flex;flex-direction:column;max-width:820px}
.mega-products{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}

/* Kart: kategori sayfasındaki .product-card ile aynı hissiyat — dual-gradient border + hover glow */
.mega-product{
    position:relative;display:block;
    border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--text);
    background:
        linear-gradient(var(--bg),var(--bg)) padding-box,
        linear-gradient(90deg,var(--border),rgba(216,85,48,.45),rgba(255,140,64,.55),rgba(255,96,0,.35),rgba(216,85,48,.45),var(--border)) border-box;
    border:2px solid transparent;
    background-size:100% 100%,200% 100%;
    transition:all .25s var(--ease);
}
.mega-product:hover{
    color:var(--text);
    background:
        linear-gradient(var(--bg),var(--bg)) padding-box,
        linear-gradient(90deg,rgba(216,85,48,.6),rgba(255,140,64,.7),rgba(255,96,0,.5),rgba(255,140,64,.7),rgba(216,85,48,.6)) border-box;
    background-size:100% 100%,200% 100%;
    box-shadow:0 8px 24px rgba(255,96,0,.15);
    transform:translateY(-3px);
    animation:cardGlow 6s linear infinite;
}

/* Görsel alanı */
.mega-product-img{position:relative;aspect-ratio:1;overflow:hidden;background:var(--surface)}
.mega-product-img::after{
    content:"";position:absolute;bottom:0;left:0;right:0;height:20px;
    background:linear-gradient(to top,var(--bg),transparent);pointer-events:none;
}
.mega-product-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s var(--ease)}
.mega-product:hover .mega-product-img img{transform:scale(1.05)}

/* Brand etiketi — sol alt */
.mega-product-brand{
    position:absolute;left:8px;bottom:8px;z-index:2;
    padding:3px 8px;border-radius:6px;
    background:rgba(255,255,255,.92);backdrop-filter:blur(6px);
    color:var(--text);font-size:.62rem;font-weight:700;letter-spacing:.02em;
}
/* İndirim badge — sağ üst */
.mega-product-badge{
    position:absolute;top:8px;right:8px;z-index:2;
    padding:3px 8px;border-radius:6px;
    background:linear-gradient(135deg,#DC2626,#EF4444);
    color:#fff;font-size:.65rem;font-weight:700;
}
.mega-product-badge--out{background:linear-gradient(135deg,#525252,#3f3f3f)}
.mega-product.is-outofstock{opacity:.75;filter:grayscale(.15)}
.mega-product.is-outofstock:hover{opacity:.95;filter:none}

/* Gövde */
.mega-product-info{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px}
.mega-product-name{
    margin:0;font-family:var(--bf);font-size:.78rem;font-weight:600;color:var(--text);line-height:1.3;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    min-height:2em;
}
.mega-product-foot{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.mega-product-price{font-family:var(--hf);font-size:.95rem;font-weight:800;color:var(--fire)}
.mega-product-old{font-size:.7rem;font-weight:600;color:var(--muted);text-decoration:line-through}

/* Mega Tab Menu (Sarma Atölyesi) */
.mega-tabs{display:grid;grid-template-columns:200px 1fr;gap:0;min-height:220px}
.mega-tab-list{border-right:1px solid var(--border);padding:4px 0}
.mega-tab-btn{width:100%;padding:10px 16px;text-align:left;background:none;border:none;border-left:3px solid transparent;font-family:var(--bf);font-size:.82rem;font-weight:600;color:var(--dim);cursor:pointer;transition:all .2s var(--ease);display:flex;align-items:center;justify-content:space-between;gap:8px}
.mega-tab-btn:hover{color:var(--text);background:var(--surface)}
.mega-tab-btn.active{color:var(--fire);border-left-color:var(--fire);background:var(--tint)}
.mega-tab-count{font-size:.7rem;color:var(--muted);font-weight:700;background:var(--surface);padding:2px 6px;border-radius:10px}
.mega-tab-btn.active .mega-tab-count{background:rgba(255,96,0,.1);color:var(--fire)}
.mega-tab-content{padding:4px 20px}
.mega-tab-panel{display:none}
.mega-tab-panel.active{display:block}
.mega-tab-panel .mega-heading{margin-bottom:10px}
.mega-tab-links{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px}
.mega-tab-links .mega-link{padding:6px 10px;font-size:.82rem}
.mega-tab-panel .mega-link--all{margin-top:8px;border-top:1px solid var(--border);padding-top:10px}

/* Mobile sub-heading for grouped categories */
.mobile-sub-heading{display:block;font-family:var(--bf);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--fire);padding:12px 12px 4px;margin-top:4px}
.mobile-sub-heading:first-child{margin-top:0}

/* ============================================
   FLASH PRODUCTS — 3D CIRCULAR GALLERY
   Auto-rotating ring. GPU-composited, single animated element.
   ============================================ */

/* Section & background */
.fg-section,.flash-section{position:relative;overflow:hidden;padding:44px 0 48px;background:linear-gradient(135deg,#1C1210 0%,#2D1A12 30%,#3D2015 60%,#2D1A12 100%)}
.flash-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.flash-sparkle{display:none} /* eski sparkle'lar artık yok */
.flash-glow{
    position:absolute;top:50%;left:50%;
    width:720px;height:720px;border-radius:50%;
    background:radial-gradient(circle,rgba(255,96,0,.12) 0%,transparent 70%);
    transform:translate(-50%,-50%);
    animation:fg-glow 5s ease-in-out infinite alternate;
    will-change:opacity;
}
@keyframes fg-glow{from{opacity:.55}to{opacity:1}}

/* Inner wrapper */
.fg-inner{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:0 16px}

/* Header */
.fg-header{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;margin-bottom:8px}
.flash-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:20px;background:linear-gradient(135deg,var(--fire),var(--glow));color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.05em}
.flash-title{margin:0;font-family:var(--hf);font-size:2.25rem;font-weight:800;line-height:1.1}
.flash-desc{margin:0;max-width:600px;font-size:.9rem;color:rgba(255,255,255,.68)}
.flash-timer{display:flex;align-items:center;gap:6px;margin-top:6px}
.flash-timer-block{min-width:52px;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);text-align:center}
.flash-timer-num{display:block;font-family:var(--bf);font-size:1.2rem;font-weight:700;color:#fff;line-height:1}
.flash-timer-label{display:block;margin-top:2px;font-size:.6rem;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.05em}
.flash-timer-sep{font-size:1.2rem;font-weight:700;color:var(--fire);line-height:1}

/* Footer */
.fg-footer{text-align:center;margin-top:4px}
.flash-see-all{display:inline-flex;align-items:center;gap:6px;padding:10px 24px;border:1px solid rgba(255,255,255,.2);border-radius:50px;background:rgba(28,18,16,.35);color:var(--spark);font-size:.9rem;font-weight:600;text-decoration:none;transition:all .2s}
.flash-see-all:hover{color:#fff;background:rgba(255,96,0,.25);border-color:var(--fire)}

/* 3D Scene — isolate paint + hafif kenar fade */
.fg-scene{
    position:relative;height:640px;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    perspective:2200px;perspective-origin:50% 50%;
    isolation:isolate;
    contain:layout paint;
    transform:translateZ(0); /* GPU layer hint */
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}

/* Ring — tek animasyonlu GPU katmanı */
.fg-ring{
    --w:390px;
    --h:540px;
    --gap:32px;
    --r:calc((var(--w) + var(--gap)) / 2 / tan(180deg / var(--n)));
    position:relative;width:var(--w);height:var(--h);
    transform-style:preserve-3d;
    animation:fg-spin 70s linear infinite;
    will-change:transform;
    backface-visibility:hidden;
}
@keyframes fg-spin{
    from{transform:translate3d(0,0,calc(-1 * var(--r))) rotateY(0)}
    to  {transform:translate3d(0,0,calc(-1 * var(--r))) rotateY(-360deg)}
}

/* Kart — ring üstünde radyal sabit konum */
.fg-card{
    position:absolute;inset:0;
    transform-style:preserve-3d;
    transform:rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--r));
}
.fg-card-inner{
    position:absolute;inset:0;
    transform-style:preserve-3d;
    /* Hysteresis: flip-back'te 200ms gecikme → mouse kısa süre ayrılırsa açık kalır
       (yanlışlıkla ön yüze tıklanıp ürün sayfasına gitmeyi engeller) */
    transition:transform .55s ease-out .2s;
}
.fg-card:hover .fg-card-inner{transform:rotateY(180deg);transition-delay:0s}

/* Güvence: kart flip olduğunda ön yüzün link'i tıklanamaz olsun */
.fg-card:hover .fg-card-front{pointer-events:none}
.fg-card:hover .fg-card-back {pointer-events:auto}

.fg-card-front,.fg-card-back{
    position:absolute;inset:0;overflow:hidden;
    border-radius:18px;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    /* Koyu outline (edge-on titreme gizlenir) + hafif drop — paint ucuz tutuldu */
    box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 8px 20px rgba(0,0,0,.28);
}

/* Front: ürün kartı */
.fg-card-front{background:#F5F0EA;display:flex;flex-direction:column}
.fg-card-front .product-card{
    --bg:#F5F0EA;
    width:100%;height:100%;margin:0;border-radius:0;
    display:flex;flex-direction:column;
    background:#F5F0EA;border:1px solid rgba(255,96,0,.18);
    animation:none;
}
.fg-card-front .product-card-link{flex:1;display:flex;flex-direction:column;min-height:0}
.fg-card-front .product-card-img{flex:1;min-height:0;background:#F5F0EA}
.fg-card-front .product-card-img img{width:100%;height:100%;object-fit:cover;display:block;-webkit-mask-image:linear-gradient(to top,transparent 0,#000 28px);mask-image:linear-gradient(to top,transparent 0,#000 28px)}
.fg-card-front .product-card-info{flex:0 0 auto;background:linear-gradient(180deg,#F5F0EA,#EDE6DC);border-top:1px solid rgba(28,18,16,.05);padding:.7rem 1rem}
.fg-card-front .product-card-info .card-foot{margin-top:.35rem;padding-top:0}
.fg-card-front .product-card-info .card-meta{margin:0 0 .2rem}

/* Back: flip yüzü */
.fg-card-back{
    transform:rotateY(180deg);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
    padding:28px 22px;text-align:center;
    background:linear-gradient(135deg,#1C1210,#3D2015);color:#F5F0EA;
}
.fg-back-brand{font-size:.7rem;font-weight:700;color:var(--spark);text-transform:uppercase;letter-spacing:.12em;opacity:.85}
.fg-back-title{display:block;margin:0;font-family:var(--hf);font-size:1.25rem;font-weight:800;line-height:1.25;color:#fff}
.fg-back-price{margin:4px 0 10px;font-family:var(--hf);font-size:1.45rem;font-weight:800;background:var(--g-warm);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.fg-back-cta{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:200px;padding:11px 22px;border-radius:50px;background:linear-gradient(135deg,var(--fire),var(--glow));color:#fff;font-family:var(--bf);font-size:.85rem;font-weight:700;text-decoration:none;box-shadow:0 6px 20px rgba(255,96,0,.35);transition:transform .2s,box-shadow .2s}
.fg-back-cta:hover{color:#fff;transform:translateY(-2px);box-shadow:0 10px 26px rgba(255,96,0,.5);filter:brightness(1.08)}
/* Sepete ekle — CTA altında aynı genişlik, ikincil ton */
.fg-back-add{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:200px;margin-top:6px;padding:10px 20px;border-radius:50px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);color:#F5F0EA;font-family:var(--bf);font-size:.8rem;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.fg-back-add:hover{background:rgba(255,96,0,.18);border-color:var(--fire);transform:translateY(-2px)}
.fg-back-add svg{flex-shrink:0}
/* Ön yüzdeki sepet + favori ikonu gizli — action sadece arka yüzde, ön sadece görsel */
.fg-card-front .btn-card-add,
.fg-card-front .product-card-fav{display:none}

/* Herhangi bir kart hover'landığında ring rotasyonu dursun (mouse çıkınca devam) */
/* Halkayı sadece kart üzerinde değil, sahne üzerine mouse girince de durdur.
   Kullanıcı büyük hedef alanla rahatça tıklayabilsin. */
.fg-scene:hover .fg-ring,
.fg-ring:has(.fg-card:hover),
.fg-ring.is-paused{animation-play-state:paused}

/* Accessibility */
@media (prefers-reduced-motion:reduce){
    .fg-ring,.flash-glow{animation:none !important}
    .fg-card-inner{transition:none}
}

/* Desktop 3D mode: JS tarafından eklenen kopya kartlar gizli (sadece mobil flat loop içindir) */
@media (min-width:901px){
    .fg-card[aria-hidden="true"]{display:none}
}

/* Mobile / tablet — 3D kapalı, CSS marquee (GPU translate, tık yok) */
@media (max-width:900px){
    .flash-glow{display:none}
    .fg-scene{
        height:400px;
        display:flex;align-items:center;
        perspective:none;overflow:hidden;
        contain:layout paint;
    }
    .fg-ring{
        width:max-content;height:auto;
        display:flex;gap:14px;padding:0 16px;
        transform:none;
        animation:fg-marquee 45s linear infinite;
        will-change:transform;
    }
    .fg-ring.is-paused{animation-play-state:paused}
    .fg-card{
        position:relative;inset:auto;
        flex:0 0 240px;width:240px;height:360px;
        transform:none;
        perspective:1200px; /* her karta kendi perspektifi — flip 3D olsun */
    }
    /* Mobilde flip JS tarafından .is-flipped class'ı ile yönetilir: ilk tap flip eder
       (navigate'i blokla), ikinci tap butona gider. Card dışı tap ise flip'i kapatır. */
    .fg-card.is-flipped .fg-card-inner{transform:rotateY(180deg)}
    .fg-card.is-flipped .fg-card-front{pointer-events:none}
    .fg-card.is-flipped .fg-card-back {pointer-events:auto}
    /* Mobilde arka yüzdeki "Sepete Ekle" butonu: yuvarlak icon, merkezi sepet ikonu */
    .fg-back-add{
        width:62px;height:62px;min-width:0;padding:0;gap:0;margin-top:10px;
        display:grid;place-items:center;
        border-radius:50%;
        background:linear-gradient(135deg,var(--fire),var(--glow));
        border:0;
        box-shadow:0 8px 22px rgba(255,96,0,.4);
        line-height:0;
    }
    .fg-back-add:hover{background:linear-gradient(135deg,var(--fire),var(--glow));border-color:transparent;transform:translateY(-2px) scale(1.04)}
    .fg-back-add svg{width:30px;height:30px;display:block}
    .fg-back-add span{display:none} /* "Sepete Ekle" metnini gizle — icon yeterli */
    .flash-title{font-size:1.65rem}
}
/* Klonlanan kartlar toplam track genişliğinin yarısını oluşturur → -50% tam bir set */
@keyframes fg-marquee{
    from{transform:translateX(0)}
    to  {transform:translateX(-50%)}
}
@media (max-width:480px){
    .fg-scene{height:380px}
    .fg-card{flex:0 0 220px;width:220px;height:340px}
    .flash-title{font-size:1.5rem}
    .flash-timer-num{font-size:1rem}
    .flash-timer-block{min-width:44px;padding:6px 10px}
}

/* ============================================
   HERO ALTI — ÇARK + KARGOM NEREDE CTA BANDI
   ============================================ */
.hero-cta-section{padding:24px 0 36px;position:relative}
@media (max-width:640px){
    /* Hero altında nefes + KEŞFET iconu o alanın zarif kaptanı */
    .scroll-hint{display:inline-flex !important;flex-direction:column;margin-top:10px !important;gap:3px !important}
    .scroll-hint span{font-size:.58rem !important;letter-spacing:.12em}
    .scroll-hint svg{width:14px !important;height:14px !important}
    .hero{padding-bottom:1.25rem !important}
    .hero-cta-section{padding:24px 0 28px}
    /* Mobilde yan yana, biraz daha havalı, kompakt kart */
    .hero-cta-grid{grid-template-columns:1fr 1fr !important;gap:10px}
    .hero-cta-card{
        grid-template-columns:1fr !important;grid-template-rows:auto auto;
        gap:6px !important;padding:14px 14px 12px !important;border-radius:14px !important;
        text-align:left;position:relative;
        box-shadow:0 4px 14px rgba(0,0,0,.08);
        min-height:auto
    }
    .hero-cta-card::before{opacity:.2}
    .hero-cta-icon{width:30px !important;height:30px !important;border-radius:8px !important}
    .hero-cta-icon svg{width:16px !important;height:16px !important}
    .hero-cta-body{gap:1px}
    .hero-cta-eyebrow{font-size:.58rem;letter-spacing:.08em}
    .hero-cta-title{font-size:.85rem !important;line-height:1.18}
    .hero-cta-desc{display:none !important}
    /* Buton: sağ ÜST köşede ikonla hizalı küçük yuvarlak — metni agresif gizle */
    .hero-cta-btn{
        position:absolute !important;top:14px !important;right:14px !important;bottom:auto !important;
        width:26px !important;height:26px !important;padding:0 !important;gap:0 !important;
        background:transparent !important;border:1px solid rgba(255,140,64,.45) !important;
        box-shadow:none !important;justify-content:center;align-items:center;
        font-size:0 !important;line-height:0 !important;color:transparent !important;
        text-indent:-9999px;overflow:hidden;white-space:nowrap
    }
    .hero-cta-btn svg{width:11px !important;height:11px !important;color:var(--spark);text-indent:0;flex-shrink:0}
    .hero-cta-card:hover .hero-cta-btn{transform:none !important;background:var(--fire) !important;border-color:var(--fire) !important}
}
.hero-cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hero-cta-card{
    position:relative;display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:14px;
    padding:11px 16px;border-radius:14px;text-decoration:none;overflow:hidden;
    background:linear-gradient(135deg,#1C1210 0%,#2D1A12 55%,#3D2015 100%);
    border:1px solid rgba(255,96,0,.18);
    box-shadow:0 10px 28px rgba(0,0,0,.1);
    transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
    isolation:isolate;
}
.hero-cta-card::before{
    content:'';position:absolute;inset:0;z-index:-1;opacity:.35;
    background:radial-gradient(300px 140px at 0% 50%,rgba(255,96,0,.35) 0%,transparent 60%);
    transition:opacity .3s var(--ease);
}
.hero-cta-card:hover{transform:translateY(-2px);border-color:var(--fire);box-shadow:0 14px 34px rgba(255,96,0,.16)}
.hero-cta-card:hover::before{opacity:.65}
.hero-cta-icon{
    width:40px;height:40px;border-radius:10px;
    display:grid;place-items:center;
    background:linear-gradient(135deg,rgba(255,96,0,.22),rgba(255,176,112,.08));
    border:1px solid rgba(255,96,0,.3);
    color:var(--spark);
}
.hero-cta-icon svg{width:20px;height:20px}
.hero-cta-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.hero-cta-eyebrow{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--spark);opacity:.85}
.hero-cta-title{margin:0;font-family:var(--hf);font-size:1rem;font-weight:800;color:#fff;line-height:1.2}
.hero-cta-desc{margin:0;font-size:.76rem;line-height:1.4;color:rgba(255,255,255,.7);max-width:320px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero-cta-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:50px;background:linear-gradient(135deg,var(--fire),var(--glow));color:#fff;font-size:.76rem;font-weight:700;white-space:nowrap;transition:transform .2s}
.hero-cta-btn svg{width:12px;height:12px}
.hero-cta-card:hover .hero-cta-btn{transform:translateX(4px)}
/* Kargo kartı — ikinci tonlama */
.hero-cta-card--kargo::before{background:radial-gradient(300px 140px at 100% 50%,rgba(255,140,64,.3) 0%,transparent 60%)}

@media (max-width:820px){
    .hero-cta-grid{grid-template-columns:1fr 1fr;gap:10px}
    .hero-cta-card{grid-template-columns:36px 1fr;gap:12px;padding:10px 14px}
    .hero-cta-icon{width:36px;height:36px;border-radius:9px}
    .hero-cta-icon svg{width:18px;height:18px}
    .hero-cta-title{font-size:.95rem}
    .hero-cta-desc{font-size:.72rem}
    .hero-cta-btn{grid-column:1 / -1;justify-content:center;margin-top:4px;padding:11px 18px}
}

/* ============================================
   MOBİL HERO — Hibrit Optimize: premium görünüm + performans
   Strateji:
   - flow-layer, compass, monogram, orbit görünür (küçültülmüş, yavaşlatılmış)
   - pulse-layer (offset-path pahalı) ve flow-curve--b (ikinci path) kapalı
   - GPU layer promotion (transform:translateZ(0)) + will-change akıllı
   - content-visibility:auto → viewport dışındayken 0 maliyet
   - İlk frame'de animasyonlar kısa delay (100ms) sonra başlar → clean first paint
   ============================================ */
@media (max-width:768px){
    /* pulse-layer + ikinci flow eğrisi: mobil için kapalı (offset-path pahalı) */
    .pulse-layer{display:none}
    .flow-curve--b{display:none}

    /* Hero container — GPU isolated, viewport dışı hesaplama yok */
    .hero{
        contain:layout paint;
        isolation:isolate;
    }

    /* flow-layer --a tek eğri, hafif opaklıkla zemin */
    .flow-layer{transform:translateZ(0)}
    .flow-curve--a{opacity:.6}

    /* Compass: küçük + daha yavaş rotate (120s → 180s CPU budget ↓) */
    .compass-layer{
        width:360px;height:360px;
        animation-duration:180s;
        transform:translate(-50%,-50%) perspective(800px) rotateX(12deg) translateZ(0);
        will-change:transform;
    }
    .compass-labels{width:360px;height:360px}
    .compass-label{
        font-size:.5rem;padding:2px 7px;
        transform:translate(-50%,-50%) rotate(var(--a)) translateY(-186px) rotate(calc(-1 * var(--a)));
    }
    .compass-label--sub{font-size:.45rem}

    /* Orbit yıldızları — tek yıldız yeter */
    .compass-orbit--inner{display:none}
    .compass-star{top:-180px}

    /* Monogram biraz daha küçük + breathing yavaşla */
    .monogram-layer{width:180px;height:180px;top:30%;animation-duration:12s;will-change:opacity,transform}
    .spectrum{width:180px;right:-40px}
    .spec-line:nth-child(1){width:140px}
    .spec-line:nth-child(2){width:160px}
    .spec-line:nth-child(3){width:180px}
    .spec-line:nth-child(4){width:150px}
    .spec-line:nth-child(5){width:120px}

    /* CTA alanı öncelikli olsun diye arka plan katmanları pointer-events'siz */
    .flow-layer,.compass-layer,.compass-labels,.compass-orbit,.monogram-layer{pointer-events:none}
}

/* Çok küçük ekranlar (telefonlar) — daha agresif sadeleşme */
@media (max-width:480px){
    /* Compass label'ların yarısı gizli → DOM yoğunluğu yarıya iner */
    .compass-label--sub{display:none}
    .compass-layer{width:300px;height:300px;animation-duration:240s}
    .compass-labels{width:300px;height:300px}
    .compass-label{transform:translate(-50%,-50%) rotate(var(--a)) translateY(-156px) rotate(calc(-1 * var(--a)))}
    .compass-star{top:-150px}
    .monogram-layer{width:150px;height:150px}
    .spectrum{display:none} /* spectrum line'lar çok küçük ekranda gizli */
}

/* Düşük-güç cihazlar / motion kapalı */
@media (prefers-reduced-motion:reduce){
    .flow-layer,.flow-curve,.compass-layer,.compass-orbit,.compass-star,.monogram-layer,.pulse-layer,.trust-track{
        animation:none !important;
    }
}

/* Düşük cihaz RAM'i (JS tarafından eklenir: .low-end-device → statik mod) */
.low-end-device .compass-layer,
.low-end-device .compass-orbit,
.low-end-device .monogram-layer,
.low-end-device .flow-layer,
.low-end-device .pulse-layer{animation:none !important}

/* ============================================
   MOBILE DRAWER
   ============================================ */
/* Mobil drawer — viewport'un EN ÜSTÜNDEN başlar (header üstüne çıkar).
   Alt: --mobile-bottom-safe (JS ile sticky-cta + ürün-cta + cart-mobile-bar
   yüksekliğinden hesaplanır). Tüm cihazlarda nokta atışı son bulur. */
.mobile-drawer{display:none;position:fixed;top:0;bottom:var(--mobile-bottom-safe,60px);left:0;width:85vw;max-width:360px;background:var(--bg);z-index:200;overflow-y:auto;-webkit-overflow-scrolling:touch;transform:translateX(-100%);transition:transform .3s var(--ease);box-shadow:4px 0 24px rgba(0,0,0,.15);
  /* Tema scrollbar — Firefox */
  scrollbar-width:thin;scrollbar-color:var(--fire) rgba(255,96,0,.08);
}
.mobile-drawer.open{transform:translateX(0)}
.mobile-drawer-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:var(--mobile-bottom-safe,60px);background:rgba(0,0,0,.5);z-index:199;opacity:0;transition:opacity .3s;pointer-events:none}
.mobile-drawer-overlay.visible{opacity:1;pointer-events:auto}
.mobile-drawer-inner{padding:1rem;min-height:100%}
/* Drawer iç-X kapama (drawer main-bar'ı kapladığı için gerekli) */
.mobile-drawer-topbar{
  position:sticky;top:0;
  display:flex;justify-content:flex-end;
  margin:-1rem -1rem .75rem;     /* drawer-inner padding'ini eat et — tam üst kenara yapışsın */
  padding:.55rem .75rem;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  z-index:3;
}
.mobile-drawer-close{
  width:36px;height:36px;border-radius:10px;
  background:var(--surface,#F5F5F4);border:1px solid var(--border);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--text);cursor:pointer;
  transition:background .15s,border-color .15s,color .15s,transform .12s;
}
.mobile-drawer-close:hover,.mobile-drawer-close:active{
  background:var(--tint);border-color:var(--fire);color:var(--fire);
  transform:rotate(90deg);
}

/* Tema scrollbar — Webkit (drawer + pane ortak) */
.mobile-drawer::-webkit-scrollbar,
.mobile-nav-pane::-webkit-scrollbar{width:6px;height:6px}
.mobile-drawer::-webkit-scrollbar-track,
.mobile-nav-pane::-webkit-scrollbar-track{background:rgba(255,96,0,.06);border-radius:3px}
.mobile-drawer::-webkit-scrollbar-thumb,
.mobile-nav-pane::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--fire),var(--lava,#D85530));
  border-radius:3px;
  box-shadow:0 0 4px rgba(255,96,0,.25);
}
.mobile-drawer::-webkit-scrollbar-thumb:hover,
.mobile-nav-pane::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,var(--lava,#D85530),var(--fire));
}
/* Firefox — pane */
.mobile-nav-pane{scrollbar-width:thin;scrollbar-color:var(--fire) rgba(255,96,0,.08)}

/* Mobile search */
.mobile-search{margin-bottom:1rem}
.mobile-search input{width:100%;padding:.75rem 1rem;border:1.5px solid var(--border);border-radius:var(--radius);font-size:.9rem;background:var(--surface);font-family:var(--bf)}
.mobile-search input:focus{outline:none;border-color:var(--fire)}

/* Mobile auth */
.mobile-auth{display:flex;gap:.5rem;margin-bottom:1rem}
.mobile-auth-btn{flex:1;text-align:center;padding:.625rem !important;font-size:.85rem !important}
.mobile-user-info{display:flex;justify-content:space-between;align-items:center;padding:.75rem;background:var(--tint);border-radius:var(--radius);margin-bottom:1rem;font-size:.85rem;font-weight:600}
.mobile-user-info a{color:var(--fire);font-weight:700;text-decoration:none}

/* Mobile categories */
.mobile-nav-item{display:flex;align-items:center;justify-content:space-between;padding:.875rem .75rem;font-size:.9rem;font-weight:600;color:var(--text);border-bottom:1px solid var(--border);cursor:pointer;font-family:var(--bf);width:100%;text-align:left;background:none;text-decoration:none}
.mobile-nav-item:hover{color:var(--fire)}
.mobile-nav-item svg{width:14px;height:14px;color:var(--muted);transition:transform .2s}
.mobile-nav-flash{color:var(--fire);background:var(--tint);border-radius:8px;margin-bottom:4px;border-bottom:none}
.mobile-nav-toggle.open svg{transform:rotate(180deg)}
/* Eski accordion içeriği — yeni side-pane DOM'dan clone alıyor.
   display:none ile görünmez, JS hata verirse fallback için show edilebilir. */
.mobile-nav-sub{display:none;padding-left:1rem}
.mobile-nav-sub.open{display:none}

/* ═══ Mobil Subkategori Side-Pane ═══ */
.mobile-nav-pane{
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:var(--bg);
  z-index:5;                    /* drawer-topbar (z:3) üstünde — pane kendi başlığını gösterir */
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  pointer-events:none;
  visibility:hidden;
}
.mobile-nav-pane.open{
  transform:translateX(0);
  pointer-events:auto;
  visibility:visible;
}
.mobile-nav-pane-header{
  display:flex;align-items:center;gap:.65rem;
  padding:.95rem 1rem;
  border-bottom:1px solid var(--border);
  background:var(--bg);
  position:sticky;top:0;z-index:2;
}
.mobile-nav-pane-back{
  flex-shrink:0;
  width:36px;height:36px;border-radius:10px;
  background:var(--surface,#F5F5F4);border:1px solid var(--border);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--text);cursor:pointer;
  transition:background .15s,border-color .15s;
}
.mobile-nav-pane-back:hover,.mobile-nav-pane-back:active{
  background:var(--tint);border-color:var(--fire);color:var(--fire);
}
.mobile-nav-pane-title{
  font-weight:700;font-size:1rem;color:var(--text);
  flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mobile-nav-pane-progress{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:rgba(255,96,0,.10);
  overflow:hidden;
}
.mobile-nav-pane-progress-bar{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--fire),var(--glow,#FFB347),var(--fire));
  background-size:200% 100%;
  border-radius:0 2px 2px 0;
  transition:width .12s linear;
  animation:mnppShine 3s linear infinite;
}
@keyframes mnppShine{0%{background-position:0 0}100%{background-position:200% 0}}
.mobile-nav-pane-cta{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin:.85rem 1rem .25rem;padding:.7rem 1rem;
  background:linear-gradient(135deg,var(--fire),var(--lava,#D85530));
  color:#fff;border-radius:10px;font-size:.88rem;font-weight:700;
  text-decoration:none;
  box-shadow:0 4px 12px rgba(255,96,0,.18);
  transition:transform .15s,box-shadow .15s;
}
.mobile-nav-pane-cta:hover,.mobile-nav-pane-cta:active{
  transform:translateY(-1px);box-shadow:0 6px 16px rgba(255,96,0,.24);color:#fff;
}
.mobile-nav-pane-content{
  padding:.5rem 1rem 1.5rem;
  display:flex;flex-direction:column;
}
/* Side-pane içindeki link'ler ve heading'ler — drawer link stilini koruyalım */
.mobile-nav-pane-content .mobile-sub-link{
  display:block;padding:.65rem .25rem;font-size:.92rem;
  color:var(--text);text-decoration:none;
  border-bottom:1px solid var(--border);
  transition:color .15s,padding-left .2s;
}
.mobile-nav-pane-content .mobile-sub-link:last-child{border-bottom:none}
.mobile-nav-pane-content .mobile-sub-link:hover{color:var(--fire);padding-left:.5rem}
.mobile-nav-pane-content .mobile-sub-heading{
  display:block;padding:.85rem .25rem .35rem;
  font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim);
}
.mobile-sub-link{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;font-size:.82rem;color:var(--dim);text-decoration:none;transition:color .15s}
.mobile-sub-link:hover{color:var(--fire)}
.mobile-sub-all{color:var(--fire);font-weight:700;border-top:1px solid var(--border);margin-top:4px;padding-top:10px}

/* Mobile footer */
.mobile-drawer-footer{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--border)}
.mobile-drawer-footer a{display:flex;align-items:center;gap:8px;padding:10px .75rem;font-size:.85rem;color:var(--dim);text-decoration:none;border-radius:8px;transition:all .15s}
.mobile-drawer-footer a:hover{color:var(--fire);background:var(--tint)}
.mobile-drawer-footer a svg{width:16px;height:16px;flex-shrink:0}
.mobile-drawer-wa{color:var(--whatsapp) !important;font-weight:600;margin-top:.5rem;background:rgba(37,211,102,.08);border-radius:8px}

/* ============================================
   RESPONSIVE
   ============================================ */
@media(max-width:768px){
  /* Header responsive — mobilde 3-col grid: HAMBURGER | LOGO (true-center) | ACTIONS
     1fr auto 1fr ile sol+sağ esnek, logo TAM ortada, asimetrik buton genişliklerinden etkilenmez */
  .top-bar{font-size:.65rem}
  .main-bar-inner{grid-template-columns:1fr auto 1fr;gap:.5rem}
  .main-bar-inner > .logo{justify-self:center;grid-column:2;transform:none}
  .main-bar-inner > .header-actions{justify-self:end;grid-column:3}
  .mobile-menu-btn{display:flex;grid-column:1;justify-self:start}
  .logo-img{height:36px}
  .search-form{display:none}
  .header-actions{gap:.25rem}
  /* Mobilde Favorilerim sepet'in solunda (dropdown | favori | sepet) */
  .header-fav-btn{display:inline-flex}
  .header-fav-btn svg{width:18px;height:18px}
  .header-auth{display:none}
  .header-user-btn .header-user-name{display:none}
  .main-nav{display:none}
  .mobile-drawer{display:block}
  .mobile-drawer-overlay{display:block}

  /* Flash responsive — 3D gallery zaten kendi mobile fallback'ini çözüyor */

  /* Mega menu responsive — hidden on mobile */
  .mega-menu{display:none !important}

  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .sec-title{font-size:1.8rem;margin-bottom:2rem}
  .cat-section{padding:3.5rem 0}

  .hero{padding:calc(60px + 2rem) 1.25rem 5rem}
  .compass-layer{width:400px;height:400px}
  .compass-labels{width:400px;height:400px}
  .compass-label{font-size:.5rem;padding:2px 7px;transform:translate(-50%,-50%) rotate(var(--a)) translateY(-208px) rotate(calc(-1 * var(--a)))}
  .compass-label--sub{font-size:.45rem}
  .monogram-layer{width:200px;height:200px;top:30%}
  .spectrum{width:200px;right:-50px}
  .spec-line:nth-child(1){width:160px}
  .spec-line:nth-child(2){width:180px}
  .spec-line:nth-child(3){width:200px}
  .spec-line:nth-child(4){width:170px}
  .spec-line:nth-child(5){width:140px}
  .pulse-layer{z-index:4}
  .pulse-layer svg{top:46%}
  .compass-star{top:-202.5px}
  .compass-star--inner{top:-142.5px}
  .hero-actions{gap:14px}
  .btn-cta{padding:12px 28px;font-size:.96rem}
  .trust-track{gap:28px}
  .trust-icon svg{width:16px;height:16px}
  .trust-text{font-size:.8rem}

  .product-layout{grid-template-columns:1fr;gap:.5rem}
  .product-gallery{position:static}
  .products-grid{grid-template-columns:repeat(2,1fr);gap:1rem}
  .product-name{font-size:.95rem}
  .price-current{font-size:1rem}

  .footer-grid{grid-template-columns:1fr 1fr;gap:1.5rem}
  .category-header{gap:.55rem;margin-bottom:1rem}
  .category-header-img{width:42px;height:42px;border-radius:10px}
  .category-title{font-size:1.25rem}
  .subcategories{grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem}
  .subcategory-chip{padding:.32rem .55rem;font-size:.72rem;gap:.3rem;border-radius:36px}
  .subcategory-chip .chip-icon{width:11px;height:11px}
  .subcategory-chip .chip-img{width:16px;height:16px;border-radius:4px}
  .subcategory-chip .count{font-size:.64rem}
  /* 3 satır + 4. satır yarım peek (4. satırda devam olduğunu gösterir) */
  .subcategories--collapsible{max-height:104px}
  .subcategories--collapsible:not(.is-expanded)::after{height:32px}
  /* Mobile: 2-col → 7+ chip varsa toggle göster (3+ satır) */
  /* Mobile toggle visibility de JS ile (.has-overflow). Eski nth-child kuralı kaldırıldı — gerçek overflow'a bakılıyor. */
  .subcategories-toggle{font-size:.7rem;padding:.4rem .85rem;margin:.35rem auto 0}
  .filter-bar{flex-wrap:wrap;gap:.625rem;padding:.75rem 0}
  .stock-toggle{font-size:.75rem}
  .stock-toggle .toggle-switch{width:32px;height:18px}
  .stock-toggle .toggle-switch::after{width:14px;height:14px}
  .stock-toggle input:checked+.toggle-switch::after{transform:translateX(14px)}

  .product-detail-name{font-size:1.15rem}
  .desc-content h2{font-size:1.15rem}
  .desc-content h3{font-size:1rem}
  .pd-soldout{font-size:.78rem;padding:.36rem .75rem;margin:.2rem 0 .7rem;gap:.35rem}
  .pd-soldout-icon{width:14px;height:14px}
  .pd-payment-info{font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .tab-btn{padding:.625rem .875rem;font-size:.78rem}
  .tab-panel{padding:1rem 0}
  .tab-form{padding:1rem}
  .review-item,.qa-item{padding:.875rem 1rem}

  /* Mobilde fiyat/CTA/WA'yı sayfadan gizle — sticky bar'da göster */
  .pd-price-row,.pd-price-save,.pd-stock,.pd-cta,.pd-wa{display:none!important}

  /* ── Global Sticky CTA Bar (tüm sayfalarda) ── */
  .sticky-cta{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:999;background:var(--bg);padding:10px 12px;gap:8px;align-items:center;box-shadow:0 -4px 16px rgba(0,0,0,.06)}
  .sticky-cta-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border:none;border-radius:50px;font-family:var(--bf);font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;transition:transform .2s var(--ease),box-shadow .2s var(--ease);position:relative;overflow:hidden}
  .sticky-cta-wa{background:var(--whatsapp);color:#fff}
  .sticky-cta-wa:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(37,211,102,.3);color:#fff}
  .sticky-cta-wa svg{width:18px;height:18px;flex-shrink:0}
  .sticky-cta-ai{background:var(--bg);border:1.5px solid var(--border);color:var(--text);transition:all .3s var(--ease)}
  .sticky-cta-ai:hover{border-color:var(--fire);color:var(--fire)}
  .sticky-cta-ai.active{background:linear-gradient(90deg,var(--lava),var(--ember),var(--fire),var(--glow),var(--fire),var(--ember),var(--lava));background-size:200% 100%;animation:gx 4s linear infinite;color:#fff;border-color:transparent;overflow:hidden}
  .sticky-cta-ai.active::before{content:'';position:absolute;top:0;left:0;width:40px;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2.5s ease-in-out infinite}
  .sticky-cta-ai svg{width:18px;height:18px;flex-shrink:0}
  .ai-status{width:8px;height:8px;border-radius:50%;background:var(--border);transition:background .3s var(--ease);flex-shrink:0}
  .sticky-cta-ai.active .ai-status{background:#4ADE80}
  .sticky-cta-div{width:1px;height:28px;background:var(--border);flex-shrink:0}

  /* ── Mobil Sticky Fiyat Barı (ürün sayfası) ── */
  .mobile-sticky-cta{display:flex;align-items:center;position:fixed;left:0;right:0;z-index:998;background:var(--bg);padding:10px 12px;gap:10px;bottom:0;margin-bottom:56px}
  .mobile-sticky-cta::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;background:var(--border)}
  .msc-left{display:flex;flex-direction:column;gap:1px;flex-shrink:0}
  .msc-old{display:block!important;font-size:.72rem;color:var(--muted)!important;text-decoration:line-through!important;line-height:1.3}
  .msc-current{display:block;font-family:var(--hf);font-size:1.2rem;font-weight:800;color:var(--fire);line-height:1.2}
  .msc-save{display:block;font-size:.65rem;font-weight:600;color:var(--success);line-height:1.2}
  /* Mobil Qty Selector */
  .msc-qty{display:flex;align-items:center;gap:0;border:1.5px solid var(--border);border-radius:50px;overflow:hidden;flex-shrink:0}
  .msc-qty-btn{width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:var(--surface);border:none;font-size:13px;font-weight:700;color:var(--text);cursor:pointer;transition:background .15s}
  .msc-qty-btn:active{background:var(--border)}
  .msc-qty-val{width:38px;text-align:center;font-size:12px;font-weight:700;color:var(--text);border:none;background:transparent;padding:0;-moz-appearance:textfield;appearance:textfield}
  .msc-qty-val::-webkit-outer-spin-button,.msc-qty-val::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  .msc-qty-val:focus{outline:none}
  /* Favori */
  .msc-fav{width:32px;height:32px;flex-shrink:0;border:1.5px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg);cursor:pointer;transition:all .2s var(--ease)}
  .msc-fav:hover{border-color:var(--fire)}
  .msc-fav svg{width:14px;height:14px}
  /* Sepete Ekle */
  .msc-cart{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;padding:9px 12px;font-family:var(--bf);font-size:12px;font-weight:600;border:none;border-radius:50px;background:var(--fire);color:#fff;cursor:pointer;transition:all .2s var(--ease)}
  .msc-cart:hover{background:var(--lava)}
  .msc-cart:disabled{opacity:.5;cursor:not-allowed}

  /* Sayfa altında boşluk */
  .product-detail{padding-bottom:130px}
  body{padding-bottom:60px}

  .admin-layout{grid-template-columns:1fr}
  .admin-sidebar{display:none}

  .blog-grid{grid-template-columns:1fr}
  .blog-card--featured a{grid-template-columns:1fr}
  .blog-card--featured .blog-card-img{min-height:200px}
  .blog-card--featured .blog-card-title{font-size:1.2rem}
  .blog-post-title{font-size:1.5rem}
  .blog-categories{gap:.375rem}
  .blog-cat-pill{padding:.375rem .75rem;font-size:.8rem}
}

@media(max-width:480px){
  .products-grid{grid-template-columns:repeat(2,1fr);gap:.625rem}
  .product-card-info{padding:0 .875rem .75rem}
  .product-name{font-size:.88rem}
  .btn-card-add{width:32px;height:32px}
  .btn-card-add svg{width:14px;height:14px}
  .toast{min-width:auto;max-width:calc(100vw - 2rem)}
  .toast-container{left:1rem;right:1rem}
  .cat-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}
  .cat-section{padding:3rem 0}
  .sec-title{font-size:1.5rem;margin-bottom:1.5rem}
  .cat-card{min-height:auto;padding:1rem .85rem .85rem}
  .cat-tag{font-size:.52rem;padding:.18rem .45rem;margin-bottom:.5rem}
  .cat-name{font-size:1rem;margin-bottom:.2rem}
  .cat-bottom{font-size:.72rem;gap:.35rem}
  .cat-ltr{font-size:4rem;top:-8px;right:-2px}
  .hero{padding:calc(56px + .25rem) 1rem 1.25rem;min-height:auto}
  .compass-layer{width:300px;height:300px}
  .compass-labels{width:300px;height:300px}
  .compass-label{font-size:.45rem;padding:2px 6px;transform:translate(-50%,-50%) rotate(var(--a)) translateY(-157px) rotate(calc(-1 * var(--a)))}
  .compass-label--sub{display:none}
  .monogram-layer{width:160px;height:160px;top:26%}
  .spectrum{display:none}
  .hero-badge{font-size:.65rem;padding:5px 14px}
  .hero-subtitle{font-size:1rem;margin-bottom:32px}
  .pulse-layer{z-index:4}
  .pulse-layer svg{top:48%;bottom:auto;transform:translateY(-50%)}
  .compass-star{top:-157.5px}
  .compass-star--inner{top:-107.5px}
  .hero-actions{flex-direction:column;width:100%;align-items:center;margin-bottom:24px}
  .btn-ring{width:60%;margin:0 auto}
  .btn-cta{width:100%;justify-content:center}
  .btn-ghost{justify-content:center}
  .social-proof{flex-direction:column;text-align:center;gap:10px}
  .trust-track{gap:24px}
  .trust-icon svg{width:15px;height:15px}
  .trust-text{font-size:.76rem}
  .section{padding:2rem 0}
}

/* Safe area (iPhone notch) */
@supports(padding-bottom:env(safe-area-inset-bottom)){
  .sticky-cta{padding-bottom:calc(8px + env(safe-area-inset-bottom))}
}

/* ═══ MOBILE HERO COMPACT — Çark+Kargo kartlarını viewport'a sokmak için hero'yu sıkıştır ═══ */
@media (max-width:480px){
    .hero{padding:calc(56px + .25rem) 1rem 1rem}
    .hero-badge{margin-bottom:10px;font-size:.62rem;padding:4px 12px}
    .hero-title{font-size:clamp(1.9rem,8vw,2.4rem);margin-bottom:8px;line-height:1.05}
    .hero-subtitle{font-size:.92rem;margin-bottom:14px;line-height:1.5;max-width:340px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
    .hero-actions{margin-bottom:12px;gap:8px}
    .btn-cta{padding:12px 24px;font-size:.98rem}
    .btn-ghost{padding:6px 12px;font-size:.86rem}
    .social-proof{margin-bottom:6px;gap:6px;font-size:.75rem}
    .hero-trust{margin-top:10px}
    .trust-text{font-size:.7rem}
    .compass-layer{opacity:.35}
    .spectrum{display:none}
    /* İki CTA kartının zaten kompakt olduğu varsayımı — bölüm üstü minimum hava */
    .hero-cta-section,
    .section:first-of-type{padding-top:.5rem;padding-bottom:.5rem}
}

@media(prefers-reduced-motion:reduce){
  .gx,.product-detail-name,.product-description>h2,.btn-pd,.product-card:hover,.cat-card::before,.title-line{animation:none!important}
  .cat-card{opacity:1!important;transform:none!important}
  .title-line{width:90px!important}
  .btn-pd::before{animation:none!important}
  .sticky-cta-ai.active{animation:none!important}
  .chatbot-panel.open,.chatbot-panel.closing{animation:none!important}
  .chat-typing span{animation:none}
  .flow-curve,.compass-layer,.compass-orbit,.monogram-layer,.pulse-line,.pulse-dot{animation:none!important}
  .hero-badge,.hero-title,.hero-subtitle,.hero-actions,.social-proof,.hero-trust,.scroll-hint{opacity:1!important;transform:none!important;animation:none!important}
  .trust-track{animation:none!important}
  .btn-ring::after{animation:none!important}
  .btn-cta{animation:none!important}
  .btn-cta::before{animation:none!important}
  .hero-title::before{animation:none!important}
  .compass-star,.compass-star--inner{animation:none!important}
  .pulse-line{stroke-dashoffset:0!important;opacity:.07!important}
  .pulse-dot{opacity:.7!important}
  [data-reveal]>*{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---- Stock Notify ---- */
.stock-notify-box{border:1px dashed var(--ember);border-radius:8px;padding:1rem;margin-bottom:1rem;background:rgba(255,96,0,.04)}
.stock-notify-header{display:flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:600;color:var(--ember);margin-bottom:.75rem}
.stock-notify-header svg{flex-shrink:0;color:var(--ember)}
.stock-notify-form{display:flex;gap:.5rem}
.stock-notify-form input[type="email"]{flex:1;padding:.6rem .875rem;border:1px solid var(--border);border-radius:8px;font-size:.85rem;background:var(--bg);color:var(--text);font-family:var(--bf)}
.stock-notify-form input[type="email"]:focus{outline:none;border-color:var(--ember);box-shadow:0 0 0 3px rgba(255,96,0,.1)}
.stock-notify-form button{display:flex;align-items:center;gap:.35rem;padding:.6rem 1rem;background:var(--ember);color:#fff;border:none;border-radius:8px;font-size:.82rem;font-weight:600;cursor:pointer;white-space:nowrap;font-family:var(--bf);transition:all .2s var(--ease)}
.stock-notify-form button:hover{background:var(--fire);transform:translateY(-1px)}
.stock-notify-form button svg{flex-shrink:0}
.stock-notify-success{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:#16A34A;font-weight:500}
.msc-notify-btn{background:var(--ember)!important;white-space:nowrap}
.msc-notify-btn:hover{background:var(--fire)!important}
@media(max-width:480px){
  .stock-notify-form{flex-direction:column}
  .stock-notify-form button{justify-content:center}
}

/* Stok Bildirim V2 — Seçenek 3 (Tercih Kartları) */
.sn3-box{border:1px dashed var(--ember);border-radius:8px;padding:.85rem;margin-bottom:1rem;background:rgba(255,96,0,.04)}
.sn3-header{display:flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:600;color:var(--ember);margin-bottom:.25rem}
.sn3-header svg{flex-shrink:0}
.sn3-sub{font-size:.7rem;color:var(--dim);margin-bottom:.6rem}
.sn3-options{display:flex;gap:.5rem;margin-bottom:.6rem}
.sn3-opt{flex:1;display:flex;align-items:center;gap:.5rem;padding:.5rem .65rem;border:2px solid var(--border);border-radius:8px;cursor:pointer;transition:all .25s;background:var(--bg);position:relative}
.sn3-opt:hover{border-color:var(--sunset)}
.sn3-opt.selected{border-color:var(--fire);background:var(--tint)}
.sn3-opt.selected::after{content:'\2713';position:absolute;top:4px;right:6px;font-size:.55rem;font-weight:800;color:#fff;background:var(--fire);width:14px;height:14px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.sn3-opt-icon{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface);color:var(--ember);transition:all .25s;flex-shrink:0}
.sn3-opt-icon svg{width:15px;height:15px}
.sn3-opt.selected .sn3-opt-icon{background:var(--fire);color:#fff}
.sn3-opt-label{font-size:.75rem;font-weight:600;color:var(--dim)}
.sn3-opt.selected .sn3-opt-label{color:var(--ember)}
.sn3-fields{display:flex;gap:.5rem}
.sn3-field input{width:100%;padding:.5rem .7rem;border:1px solid var(--border);border-radius:8px;font-size:.82rem;background:var(--bg);color:var(--text);font-family:var(--bf);transition:border-color .2s}
.sn3-field input:focus{outline:none;border-color:var(--fire);box-shadow:0 0 0 3px rgba(255,96,0,.1)}
.sn3-error{font-size:.7rem;color:var(--danger);margin-top:.25rem}
.sn3-error:empty{display:none}
.sn3-submit{display:flex;align-items:center;justify-content:center;gap:.35rem;width:100%;padding:.55rem;margin-top:.5rem;background:var(--ember);color:#fff;border:none;border-radius:8px;font-size:.82rem;font-weight:600;cursor:pointer;font-family:var(--bf);transition:all .2s var(--ease)}
.sn3-submit:hover:not(:disabled){background:var(--fire);transform:translateY(-1px)}
.sn3-submit:disabled{opacity:.45;cursor:not-allowed}
.sn3-submit svg{flex-shrink:0}
.sn3-success{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:#16A34A;font-weight:500}
@media(max-width:480px){
  .sn3-options{gap:.4rem}
  .sn3-opt{padding:.45rem .5rem;gap:.4rem}
  .sn3-fields{flex-direction:column;gap:.4rem}
}

/* ---- Utilities ---- */
.text-center{text-align:center}
.mt-1{margin-top:.5rem}
.mt-2{margin-top:1rem}
.mt-3{margin-top:1.5rem}
.mb-1{margin-bottom:.5rem}
.mb-2{margin-bottom:1rem}
.mb-3{margin-bottom:1.5rem}

/* ─── Yasal Uyarı — Ürün Detay ─── */
.product-legal-warning{margin-top:1rem;display:flex;flex-direction:column;gap:.2rem;background:#FEF3C7;border:1px solid #F59E0B;border-left:4px solid #D85530;border-radius:10px;padding:.7rem .85rem;color:#92400E;font-size:.78rem;line-height:1.45}
.product-legal-warning strong{color:#B91C1C;font-weight:800;letter-spacing:.3px;font-size:.82rem}

/* ═══════════════════════════════════════════════════════════
   ANASAYFA E-E-A-T YENİ BÖLÜMLER — Marka dili korunmuştur
   (var(--fire), var(--g-warm), Fraunces + Space Grotesk)
   ═══════════════════════════════════════════════════════════ */

/* Alt başlık — header altına kısa açıklama */
.sec-subtitle{font-family:var(--bf);font-size:.95rem;color:var(--dim);text-align:center;max-width:560px;margin:-1.25rem auto 2rem;line-height:1.55}
.sec-subtitle strong{color:var(--text);font-weight:700}

/* ─── 1. TRUST BAR ────────────────────────────────────────── */
.hp-trustbar{background:linear-gradient(var(--bg),var(--bg)) padding-box,linear-gradient(90deg,var(--border),rgba(216,85,48,.2),rgba(255,140,64,.25),rgba(216,85,48,.2),var(--border)) border-box;border-top:1px solid transparent;border-bottom:1px solid transparent;background-size:100% 100%,200% 100%;animation:cardGlow 10s linear infinite;padding:20px 0}
.hp-trustbar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;list-style:none;padding:0;margin:0}
.hp-trust-item{display:flex;align-items:center;gap:12px;padding:4px 8px}
.hp-trust-ico{flex-shrink:0;width:38px;height:38px;border-radius:10px;background:var(--tint);color:var(--fire);display:grid;place-items:center}
.hp-trust-ico svg{width:20px;height:20px}
.hp-trust-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.hp-trust-text strong{font-family:var(--hf);font-size:14px;font-weight:700;color:var(--text);line-height:1.2}
.hp-trust-text span{font-size:11.5px;color:var(--dim);line-height:1.3}
@media(max-width:720px){
    .hp-trustbar-grid{grid-template-columns:repeat(2,1fr);gap:10px}
    .hp-trust-item{padding:2px}
    .hp-trust-ico{width:34px;height:34px}
    .hp-trust-ico svg{width:16px;height:16px}
    .hp-trust-text strong{font-size:12.5px}
    .hp-trust-text span{font-size:10.5px}
}

/* ─── 2. EXPERTISE HIGHLIGHT ──────────────────────────────── */
.hp-expert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:1rem}
.hp-expert-card{position:relative;background:linear-gradient(var(--bg),var(--bg)) padding-box,linear-gradient(135deg,var(--border),rgba(216,85,48,.18),rgba(255,140,64,.22),var(--border)) border-box;border:1.5px solid transparent;background-size:100% 100%,200% 100%;animation:cardGlow 12s linear infinite;border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:10px;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.hp-expert-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(255,96,0,.12)}
.hp-expert-kind{font-family:var(--bf);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fire);background:var(--tint);padding:4px 10px;border-radius:50px;align-self:flex-start}
.hp-expert-title{font-family:var(--hf);font-size:1.15rem;font-weight:800;line-height:1.25;color:var(--text);margin:4px 0 0}
.hp-expert-desc{font-size:13.5px;color:var(--dim);line-height:1.55;margin:0;flex:1}
.hp-expert-meta{display:flex;gap:8px;font-size:11.5px;color:var(--muted);font-weight:500}
.hp-expert-cta{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-family:var(--hf);font-size:14px;font-weight:700;color:var(--fire);align-self:flex-start;transition:gap .2s var(--ease)}
.hp-expert-cta:hover{color:var(--ember);gap:10px}
.hp-expert-cta span{font-size:1.1em;transition:transform .2s var(--ease)}
@media(max-width:900px){.hp-expert-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.hp-expert-grid{grid-template-columns:1fr}}

/* ─── 3. REVIEWS WALL ─────────────────────────────────────── */
.hp-reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hp-review-card{background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:12px;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.hp-review-card:hover{border-color:var(--border-h);box-shadow:0 8px 24px rgba(255,96,0,.08)}
.hp-review-stars{display:flex;gap:2px;color:var(--fire)}
.hp-review-stars svg{width:16px;height:16px}
.hp-review-text{font-family:var(--bf);font-size:14px;line-height:1.6;color:var(--text);margin:0;font-style:italic;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.hp-review-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:10px;border-top:1px dashed var(--border)}
.hp-review-author{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.hp-review-avatar{width:34px;height:34px;border-radius:50%;background:var(--g-warm);color:#fff;display:grid;place-items:center;font-family:var(--hf);font-size:14px;font-weight:800;flex-shrink:0}
.hp-review-author strong{display:block;font-size:13px;color:var(--text);font-weight:700;line-height:1.2}
.hp-review-verified{font-size:10.5px;color:var(--success);font-weight:600;letter-spacing:.02em}
.hp-review-product{flex-shrink:0;width:42px;height:42px;border-radius:10px;overflow:hidden;background:var(--tint);display:block}
.hp-review-product img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.hp-reviews-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.hp-reviews-grid{grid-template-columns:1fr}}

/* ─── 4. BRAND STORY ──────────────────────────────────────── */
.hp-brand-wrap{display:grid;grid-template-columns:minmax(0,280px) 1fr;gap:40px;align-items:center;max-width:1080px;margin:0 auto}
.hp-brand-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:24px;background:linear-gradient(135deg,var(--tint),var(--tint2));border-radius:20px;position:relative;overflow:hidden}
.hp-brand-stats::before{content:'';position:absolute;top:-30%;right:-20%;width:60%;height:60%;background:radial-gradient(circle,rgba(255,96,0,.15),transparent 70%);pointer-events:none}
.hp-brand-badge{grid-column:1 / -1;font-family:var(--hf);font-size:1.1rem;font-weight:800;text-align:center;letter-spacing:.02em;margin-bottom:6px}
.hp-brand-badge--logo{display:flex;align-items:center;justify-content:center;padding:6px 0 10px;margin-bottom:2px}
.hp-brand-badge--logo img{height:78px;width:auto;max-width:100%;display:block;object-fit:contain;aspect-ratio:403/260;filter:drop-shadow(0 2px 6px rgba(204,74,0,.18))}
@media(max-width:768px){.hp-brand-badge--logo img{height:64px}}
.hp-brand-stat{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;background:rgba(255,255,255,.6);border-radius:12px;position:relative;z-index:1}
.hp-brand-num{font-family:var(--hf);font-size:1.5rem;font-weight:800;background:var(--g-warm);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1}
.hp-brand-lbl{font-size:10.5px;color:var(--dim);font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-top:4px}
.hp-brand-story .sec-tag{margin-bottom:.4rem}
.hp-brand-title{text-align:left;margin-bottom:1rem;font-size:1.9rem}
.hp-brand-story p{font-size:15px;color:var(--text);line-height:1.7;margin:0 0 .9rem}
.hp-brand-ctas{display:flex;gap:10px;margin-top:1.2rem;flex-wrap:wrap}
@media(max-width:820px){
    .hp-brand-wrap{grid-template-columns:1fr;gap:28px}
    .hp-brand-title{text-align:center;font-size:1.6rem}
    .hp-brand-story{text-align:center}
    .hp-brand-ctas{justify-content:center}
}

/* ─── 5. FAQ SNAPSHOT ─────────────────────────────────────── */
.hp-faq-list{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.hp-faq-item{background:var(--bg);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:border-color .25s var(--ease)}
.hp-faq-item[open]{border-color:var(--border-h);box-shadow:0 4px 14px rgba(255,96,0,.05)}
.hp-faq-q{list-style:none;cursor:pointer;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;font-family:var(--hf);font-size:15px;font-weight:700;color:var(--text)}
.hp-faq-q::-webkit-details-marker{display:none}
.hp-faq-q:hover{color:var(--fire)}
.hp-faq-arrow{color:var(--fire);flex-shrink:0;transition:transform .25s var(--ease)}
.hp-faq-item[open] .hp-faq-arrow{transform:rotate(180deg)}
.hp-faq-a{padding:0 20px 16px;font-size:14px;line-height:1.7;color:var(--dim)}
@media(max-width:640px){.hp-faq-q{font-size:14px;padding:14px 16px}.hp-faq-a{font-size:13px;padding:0 16px 14px}}

/* ─── 6. SİLO HUB ─────────────────────────────────────────── */
.hp-silo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hp-silo-card{position:relative;background:linear-gradient(var(--bg),var(--bg)) padding-box,linear-gradient(135deg,var(--border),rgba(216,85,48,.18),rgba(255,140,64,.22),var(--border)) border-box;border:1.5px solid transparent;background-size:100% 100%,200% 100%;animation:cardGlow 14s linear infinite;border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:10px;transition:transform .25s var(--ease),box-shadow .25s var(--ease);overflow:hidden}
.hp-silo-card:hover{transform:translateY(-4px);box-shadow:0 14px 36px rgba(255,96,0,.12)}
.hp-silo-card::before{content:'';position:absolute;top:-40%;right:-20%;width:60%;height:80%;background:radial-gradient(ellipse,rgba(255,96,0,.08),transparent 70%);pointer-events:none;z-index:0}
.hp-silo-ico{position:relative;z-index:1;width:52px;height:52px;border-radius:14px;background:var(--g-warm);color:#fff;display:grid;place-items:center;box-shadow:0 6px 18px rgba(216,85,48,.25)}
.hp-silo-ico svg{width:26px;height:26px}
.hp-silo-title{position:relative;z-index:1;font-family:var(--hf);font-size:1.25rem;font-weight:800;color:var(--text);margin:6px 0 0}
.hp-silo-desc{position:relative;z-index:1;font-size:13.5px;color:var(--dim);line-height:1.55;margin:0;flex:1}
.hp-silo-links{position:relative;z-index:1;display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.hp-silo-link{display:inline-flex;align-items:center;gap:4px;padding:7px 14px;border-radius:50px;font-family:var(--bf);font-size:12.5px;font-weight:700;transition:all .2s var(--ease)}
.hp-silo-link-primary{background:var(--g-warm);color:#fff;box-shadow:0 3px 10px rgba(216,85,48,.22)}
.hp-silo-link-primary:hover{transform:translateX(2px);color:#fff;filter:brightness(1.08)}
.hp-silo-link-secondary{background:var(--tint);color:var(--fire);border:1px solid transparent}
.hp-silo-link-secondary:hover{border-color:var(--border-h);background:var(--bg);color:var(--ember)}
@media(max-width:900px){.hp-silo-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.hp-silo-grid{grid-template-columns:1fr}}

/* ═══ BLOG FEED — Minimal, akıcı, 20 yazı ═══ */
.hp-blogfeed-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin-top:.5rem}
.hp-blogfeed-card{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--border);border-radius:14px;overflow:hidden;text-decoration:none;transition:all .3s var(--ease);position:relative}
.hp-blogfeed-card:hover{transform:translateY(-3px);border-color:var(--border-h);box-shadow:0 14px 34px -14px rgba(255,96,0,.22)}
.hp-blogfeed-card.is-featured{border-color:rgba(255,96,0,.28);background:linear-gradient(180deg,#FFF9F2,var(--bg))}
.hp-blogfeed-thumb{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,var(--tint),var(--surface))}
.hp-blogfeed-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.hp-blogfeed-card:hover .hp-blogfeed-thumb img{transform:scale(1.055)}
.hp-blogfeed-thumb--contain{background:radial-gradient(ellipse at center,var(--surface) 0%,var(--tint) 60%,#FFE8D6 100%);display:flex;align-items:center;justify-content:center;padding:14px}
.hp-blogfeed-thumb--contain img{width:auto !important;height:auto !important;max-width:100%;max-height:100%;object-fit:contain;padding:0;filter:drop-shadow(0 4px 12px rgba(28,18,16,.1))}
.hp-blogfeed-thumb--empty{display:grid;place-items:center}
.hp-blogfeed-thumb-ico{font-size:2.4rem;opacity:.28}
.hp-blogfeed-pin{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);display:grid;place-items:center;font-size:13px;box-shadow:0 4px 12px rgba(28,18,16,.14);line-height:1}
.hp-blogfeed-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.hp-blogfeed-top{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;font-family:var(--bf)}
.hp-blogfeed-cat{background:var(--tint);color:var(--ember);padding:3px 9px;border-radius:50px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:10px;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-blogfeed-date{color:var(--muted);font-weight:600;white-space:nowrap}
.hp-blogfeed-title{font-family:var(--hf);font-size:1rem;font-weight:800;line-height:1.3;color:var(--text);margin:0;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s var(--ease)}
.hp-blogfeed-card:hover .hp-blogfeed-title{color:var(--ember)}
.hp-blogfeed-excerpt{font-family:var(--bf);font-size:12.5px;color:var(--dim);line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.hp-blogfeed-meta{display:flex;align-items:center;justify-content:space-between;margin-top:4px;padding-top:8px;border-top:1px dashed var(--border);font-size:11.5px;color:var(--muted);font-family:var(--bf);font-weight:600}
.hp-blogfeed-arrow{color:var(--fire);font-size:1rem;transition:transform .25s var(--ease)}
.hp-blogfeed-card:hover .hp-blogfeed-arrow{transform:translateX(4px)}
@media(max-width:640px){
    .hp-blogfeed-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
    .hp-blogfeed-body{padding:12px 14px 14px}
    .hp-blogfeed-title{font-size:.95rem}
}

/* ═══════════════════════════════════════════════════════════
   BLOG LISTING SAYFASI — Hero + Filter + Featured + Grid
   ═══════════════════════════════════════════════════════════ */

/* ─── Hero ─── */
.blog-list-hero{position:relative;padding:2.25rem 0 2.5rem;overflow:hidden;text-align:center}
.blog-list-hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 20% 10%,rgba(255,96,0,.06) 0%,transparent 55%),radial-gradient(ellipse at 85% 90%,rgba(216,85,48,.05) 0%,transparent 55%),linear-gradient(180deg,var(--surface),var(--bg));z-index:0}
.blog-list-hero-inner{position:relative;z-index:1;max-width:780px;margin:0 auto}
.blog-list-hero-inner .sec-tag{display:inline-block;margin-bottom:.9rem}
.blog-list-hero-title{font-family:var(--hf);font-size:clamp(1.9rem,4vw,2.75rem);line-height:1.1;font-weight:800;margin:0 0 1rem;letter-spacing:-.02em}
.blog-list-hero-desc{font-family:var(--bf);font-size:1.02rem;color:var(--dim);line-height:1.65;margin:0}
.blog-list-hero::after{content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(480px,80%);height:3px;background:linear-gradient(90deg,transparent,var(--fire),transparent);border-radius:3px;opacity:.5}

/* ─── Filter Pills — modern, scroll horizontal mobile ─── */
.blog-filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:2rem 0 2.25rem;padding:4px}
.blog-filter-pill{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:50px;font-family:var(--bf);font-size:.82rem;font-weight:700;text-decoration:none;border:1.5px solid var(--border);color:var(--dim);background:var(--bg);transition:all .25s var(--ease);letter-spacing:.01em;white-space:nowrap}
.blog-filter-pill:hover{border-color:var(--border-h);color:var(--fire);transform:translateY(-1px)}
.blog-filter-pill.is-active{background:var(--g-warm);color:#fff !important;border-color:transparent;box-shadow:0 6px 18px rgba(216,85,48,.28)}
.blog-filter-count{font-size:.7rem;padding:2px 8px;border-radius:50px;background:var(--tint);color:var(--ember);font-weight:800;min-width:22px;text-align:center}
.blog-filter-pill.is-active .blog-filter-count{background:rgba(255,255,255,.25);color:#fff}
@media(max-width:720px){
    .blog-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;justify-content:flex-start;padding:4px 4px 12px;scroll-snap-type:x proximity}
    .blog-filters::-webkit-scrollbar{display:none}
    .blog-filter-pill{flex-shrink:0;scroll-snap-align:start}
}

/* ─── Featured Hero Kart — kompakt ─── */
.blog-featured-hero{display:grid;grid-template-columns:360px 1fr;gap:0;background:var(--bg);border:1.5px solid var(--border);border-radius:18px;overflow:hidden;text-decoration:none;margin:0 auto 2rem;max-width:900px;transition:all .3s var(--ease);position:relative}
.blog-featured-hero:hover{border-color:var(--border-h);transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(255,96,0,.18)}
.blog-featured-hero-img{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--tint),var(--surface));aspect-ratio:4/3}
.blog-featured-hero-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.blog-featured-hero:hover .blog-featured-hero-img img{transform:scale(1.04)}
.blog-featured-hero-img.is-contain{background:radial-gradient(ellipse at center,var(--surface) 0%,var(--tint) 55%,#FFE8D6 100%);display:flex;align-items:center;justify-content:center;padding:18px}
.blog-featured-hero-img.is-contain img{width:auto !important;height:auto !important;max-width:100%;max-height:100%;object-fit:contain;padding:0;filter:drop-shadow(0 8px 20px rgba(28,18,16,.12))}
.blog-featured-hero-ico{font-size:3rem;opacity:.3}
.blog-featured-badge{position:absolute;top:11px;left:11px;padding:4px 11px;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);color:var(--ember);border-radius:50px;font-family:var(--bf);font-size:10px;font-weight:800;letter-spacing:.04em;box-shadow:0 3px 10px rgba(28,18,16,.12);z-index:1}
.blog-featured-hero-body{padding:1.35rem 1.6rem;display:flex;flex-direction:column;justify-content:center;gap:.55rem;min-width:0}
.blog-featured-hero-top{display:flex;align-items:center;gap:7px;font-family:var(--bf);font-size:.74rem;color:var(--dim);font-weight:600;flex-wrap:wrap}
.blog-featured-cat{background:var(--g-warm);color:#fff;padding:2px 10px;border-radius:50px;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.blog-featured-dot{color:var(--muted);opacity:.5}
.blog-featured-hero-title{font-family:var(--hf);font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.22;font-weight:800;color:var(--text);letter-spacing:-.015em;margin:.1rem 0 .15rem;transition:color .2s;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-featured-hero:hover .blog-featured-hero-title{color:var(--ember)}
.blog-featured-hero-excerpt{font-family:var(--bf);font-size:.88rem;color:var(--dim);line-height:1.6;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-featured-hero-cta{display:inline-flex;align-items:center;gap:5px;margin-top:.3rem;font-family:var(--hf);font-size:.86rem;font-weight:800;color:var(--fire);transition:gap .2s}
.blog-featured-hero-cta span{transition:transform .2s}
.blog-featured-hero:hover .blog-featured-hero-cta{gap:9px}
@media(max-width:720px){
    .blog-featured-hero{grid-template-columns:1fr;max-width:100%}
    .blog-featured-hero-img{aspect-ratio:16/10}
    .blog-featured-hero-body{padding:1.1rem 1.25rem}
    .blog-featured-hero-title{font-size:1.1rem}
}

/* ─── Grid ─── */
.blog-list-grid{margin-bottom:2.5rem}

/* ═══════════════════════════════════════════════════════════
   TASARIM DİSİPLİNİ — Anasayfa Ritim Normalize (Final Pass)
   Tüm section spacing / typography ölçeği tek kaynaktan.
   ═══════════════════════════════════════════════════════════ */
:root{
    --sec-py:64px;        /* section dikey padding (desktop) */
    --sec-py-sm:40px;     /* section dikey padding (mobile) */
    --sec-gap:24px;       /* grid/card arası standart */
    --card-pad:22px;      /* tüm kartlar */
    --card-pad-sm:18px;
    --card-radius:16px;
    --title-mb:1.75rem;   /* sec-title alt */
    --title-mb-sub:.75rem; /* subtitle varsa küçült */
    --header-mb:2.25rem;  /* sec-header alt */
}

/* Standart section padding — asimetrileri eşitle */
.section{padding:var(--sec-py) 0}
.cat-section{padding:var(--sec-py) 0}
.trend-section{padding:var(--sec-py) 0}
.fg-section,.flash-section{padding:var(--sec-py) 0}

/* Section header ritmi */
.sec-header{margin-bottom:var(--header-mb)}
.sec-title{font-size:2rem;margin-bottom:var(--title-mb);line-height:1.15}
/* Subtitle altına ek nefes vermek yerine title'ı sıkıştır */
.sec-header:has(.sec-subtitle) .sec-title{margin-bottom:var(--title-mb-sub)}
.sec-subtitle{margin:0 auto 0;font-size:.95rem;padding-top:.25rem}
.sec-header:has(.sec-subtitle){margin-bottom:calc(var(--header-mb) + .25rem)}

/* Card standardizasyon — tüm hp-* kartlar eşit */
.hp-expert-card,.hp-review-card,.hp-silo-card{padding:var(--card-pad);border-radius:var(--card-radius)}
.hp-expert-grid,.hp-reviews-grid,.hp-silo-grid{gap:var(--sec-gap)}

/* Trust bar — biraz daha nefes + içerik daha dengeli */
.hp-trustbar{padding:22px 0;margin-bottom:-8px}
.hp-trustbar-grid{gap:20px}
.hp-trust-item{padding:6px 4px}

/* Expertise kart dengeleme — iç boşluk daha havalı */
.hp-expert-card{gap:12px}
.hp-expert-title{font-size:1.1rem}
.hp-expert-desc{font-size:14px;line-height:1.6}
.hp-expert-cta{margin-top:auto;padding-top:4px}

/* Review kart dengeleme */
.hp-review-card{gap:14px}
.hp-review-text{-webkit-line-clamp:5}

/* Brand story dengeleme */
.hp-brand-wrap{gap:44px;max-width:1100px}
.hp-brand-title{font-size:1.85rem}
.hp-brand-story p{font-size:15.5px}

/* FAQ dengeleme */
.hp-faq-list{gap:12px}
.hp-faq-q{padding:18px 22px;font-size:15.5px}
.hp-faq-a{padding:0 22px 18px;font-size:14.5px}

/* Silo dengeleme */
.hp-silo-card{gap:12px;padding:26px}
.hp-silo-title{font-size:1.3rem}
.hp-silo-desc{font-size:14px;line-height:1.6}
.hp-silo-links{gap:10px;margin-top:10px}

/* Mobil: tüm ritim birlikte küçülür */
@media(max-width:820px){
    :root{--sec-py:var(--sec-py-sm);--sec-gap:18px;--card-pad:var(--card-pad-sm);--header-mb:1.75rem;--title-mb:1.25rem;--title-mb-sub:.5rem}
    .sec-title{font-size:1.6rem}
    .hp-brand-title{font-size:1.5rem}
    .hp-silo-card{padding:22px}
    .hp-silo-title{font-size:1.15rem}
    .hp-expert-title{font-size:1.05rem}
    .hp-faq-q{padding:15px 18px;font-size:14.5px}
    .hp-faq-a{padding:0 18px 15px;font-size:13.5px}
    .hp-trustbar{padding:16px 0}
    .hp-trustbar-grid{gap:14px}
}

/* Çok küçük ekran */
@media(max-width:520px){
    .sec-title{font-size:1.5rem}
    .hp-brand-title{font-size:1.4rem}
    .sec-subtitle{font-size:.88rem}
}

/* ═══════════════════════════════════════════════════════════
   CİLA PASOSU — Trend ritmi + Trust tipografi + Silo oran
   ═══════════════════════════════════════════════════════════ */

/* — Trend section üst boşluk dengeleme — */
.trend-section{padding:calc(var(--sec-py) - 12px) 0 var(--sec-py)}
.trend-wrap .sec-tag{margin-bottom:.75rem}
.trend-wrap .sec-title{margin-bottom:1.5rem}

/* — Trend tab butonları biraz büyüt — */
.trend-tab{padding:10px 18px;font-size:12.5px;font-weight:700;letter-spacing:.02em}
.trend-tab svg{width:14px;height:14px}
.trend-tabs{grid-template-columns:minmax(0,240px) minmax(0,240px);gap:10px;padding-bottom:24px}
.trend-tabs .trend-tab:nth-child(5){min-width:240px}
@media(max-width:768px){
    .trend-tab{padding:8px 14px;font-size:11.5px}
    .trend-tab svg{width:12px;height:12px}
}

/* — Trust bar tipografi — hero-subtitle diline hizalı, biraz daha prezantabl — */
.hp-trustbar{padding:26px 0;margin-bottom:-4px}
.hp-trustbar-grid{gap:22px}
.hp-trust-text strong{
    font-family:var(--bf);
    font-size:14.5px;
    font-weight:700;
    color:var(--text);
    letter-spacing:.01em;
    line-height:1.25
}
.hp-trust-text span{
    font-family:var(--bf);
    font-size:12.5px;
    font-weight:400;
    color:var(--dim);
    line-height:1.4
}
.hp-trust-ico{width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,var(--tint),rgba(255,228,200,.55));color:var(--fire);box-shadow:inset 0 0 0 1px rgba(255,96,0,.08)}
.hp-trust-ico svg{width:22px;height:22px;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:720px){
    .hp-trustbar{padding:18px 0}
    .hp-trustbar-grid{gap:16px}
    .hp-trust-ico{width:40px;height:40px;border-radius:11px}
    .hp-trust-ico svg{width:19px;height:19px}
    .hp-trust-text strong{font-size:13px}
    .hp-trust-text span{font-size:11.5px}
}

/* — Expertise kart: blog kapak görseli AKILLI yerleşim — */
.hp-expert-card.has-cover{padding:0;overflow:hidden;display:flex;flex-direction:column}
.hp-expert-cover{display:block;width:100%;aspect-ratio:16/9;overflow:hidden;position:relative;background:linear-gradient(135deg,var(--tint),var(--surface));isolation:isolate}
.hp-expert-cover img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .45s var(--ease)}
.hp-expert-card.has-cover:hover .hp-expert-cover img{transform:scale(1.04)}

/* Dikey/kare/logo görsel → marka tint üzerinde contain + sıcak vignette */
.hp-expert-cover.is-contain{background:radial-gradient(ellipse at center,var(--surface) 0%,var(--tint) 55%,#FFE8D6 100%)}
.hp-expert-cover.is-contain::before{
    content:'';position:absolute;inset:0;z-index:0;
    background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.7) 0%,transparent 55%),
               radial-gradient(circle at 70% 80%,rgba(255,176,112,.18) 0%,transparent 55%);
    pointer-events:none
}
.hp-expert-cover.is-contain img{object-fit:contain;padding:18px;position:relative;z-index:1;filter:drop-shadow(0 8px 20px rgba(28,18,16,.12))}
.hp-expert-card.has-cover:hover .hp-expert-cover.is-contain img{transform:scale(1.06)}

.hp-expert-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}

/* — Silo hub yeniden oran — daha havalı, dengeli — */
.hp-silo-card{padding:28px 24px;gap:14px;border-radius:18px}
.hp-silo-ico{width:56px;height:56px;border-radius:16px;box-shadow:0 8px 22px rgba(216,85,48,.28),inset 0 1px 0 rgba(255,255,255,.25)}
.hp-silo-ico svg{width:28px;height:28px;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.75}
.hp-silo-title{font-family:var(--hf);font-size:1.35rem;font-weight:800;letter-spacing:-.01em;margin:8px 0 0}
.hp-silo-desc{font-family:var(--bf);font-size:14px;font-weight:400;color:var(--dim);line-height:1.6;margin:0;flex:1}
.hp-silo-links{gap:8px;margin-top:14px}
.hp-silo-link{padding:8px 16px;font-size:12.5px;font-weight:700;letter-spacing:.02em}
.hp-silo-link-primary{box-shadow:0 4px 14px rgba(216,85,48,.3)}
.hp-silo-link-primary:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(216,85,48,.42)}
@media(max-width:900px){
    .hp-silo-card{padding:22px 20px}
    .hp-silo-ico{width:50px;height:50px;border-radius:14px}
    .hp-silo-ico svg{width:24px;height:24px}
    .hp-silo-title{font-size:1.2rem}
    .hp-silo-desc{font-size:13.5px}
}

/* ═══════════════════════════════════════════════════════════════════
   HAKKIMIZDA / İLETİŞİM / FAVORİLER
   ═══════════════════════════════════════════════════════════════════ */

/* ─── HAKKIMIZDA ─── */
.about-hero{padding:3rem 0 1.5rem;text-align:center;position:relative;overflow:hidden}
.about-hero-inner{max-width:740px;margin:0 auto;padding:0 1rem}
.about-h1{font-family:var(--hf);font-weight:800;font-size:clamp(2rem,4.5vw,3rem);line-height:1.1;margin:.5rem 0 1rem}
.about-lead{font-size:clamp(.95rem,1.2vw,1.05rem);line-height:1.7;color:var(--dim)}

.about-stats-section{padding:2.5rem 0}
.about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:1.5rem}
.about-stat{background:var(--bg);border:1.5px solid transparent;background-image:linear-gradient(var(--bg),var(--bg)),linear-gradient(135deg,var(--border),rgba(216,85,48,.2),var(--border));background-origin:border-box;background-clip:padding-box,border-box;border-radius:18px;padding:1.75rem 1.25rem;text-align:center;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.about-stat:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(255,96,0,.1)}
.about-stat-num{display:block;font-family:var(--hf);font-size:clamp(2rem,3.5vw,2.6rem);font-weight:800;background:var(--g-main);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1;margin-bottom:.3rem}
.about-stat-unit{font-size:.6em;opacity:.75}
.about-stat-lbl{display:block;font-size:.82rem;color:var(--dim);font-weight:500}
@media(max-width:900px){.about-stats{grid-template-columns:1fr 1fr;gap:.9rem}.about-stat{padding:1.25rem .75rem}}

.about-story-section{padding:2.5rem 0}
.about-story{max-width:820px;margin:0 auto}
.about-story-head{text-align:center;margin-bottom:1.5rem}
.about-story-body p{font-size:1rem;line-height:1.75;color:var(--text);margin-bottom:1rem}
.about-quote{background:linear-gradient(135deg,var(--tint),var(--tint2));border-left:4px solid var(--fire);padding:1.5rem 1.5rem 1.5rem 3rem;border-radius:0 14px 14px 0;margin:1.75rem 0;position:relative;font-style:italic;line-height:1.7;color:var(--text)}
.about-quote-mark{position:absolute;top:.2rem;left:.75rem;font-family:var(--hf);font-size:3.5rem;color:var(--fire);opacity:.5;line-height:1}
.about-quote-foot{margin-top:.75rem;font-style:normal;font-weight:600;color:var(--ember);font-size:.85rem}

.about-mv-section{padding:2.5rem 0;background:var(--surface)}
.about-mv{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.about-mv-card{background:var(--bg);border:1px solid var(--border);border-radius:18px;padding:2rem 1.75rem}
.about-mv-ico{font-size:2.25rem;margin-bottom:.75rem}
.about-mv-title{font-family:var(--hf);font-size:1.35rem;font-weight:700;color:var(--fire);margin:0 0 .65rem}
.about-mv-card p{font-size:.95rem;line-height:1.7;color:var(--dim);margin:0}
@media(max-width:768px){.about-mv{grid-template-columns:1fr}}

.about-why-section{padding:2.5rem 0}
.about-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:1.5rem}
.about-why-card{background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:1.5rem 1.25rem;transition:all .25s var(--ease)}
.about-why-card:hover{border-color:var(--border-h);box-shadow:0 8px 22px rgba(255,96,0,.08);transform:translateY(-2px)}
.about-why-ico{width:48px;height:48px;border-radius:12px;background:var(--tint);display:grid;place-items:center;margin-bottom:.85rem;color:var(--fire)}
.about-why-ico svg{width:24px;height:24px}
.about-why-title{font-family:var(--hf);font-size:1.05rem;font-weight:700;color:var(--text);margin:0 0 .35rem}
.about-why-card p{font-size:.88rem;line-height:1.6;color:var(--dim);margin:0}
@media(max-width:900px){.about-why-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.about-why-grid{grid-template-columns:1fr}}

.about-team-section{padding:2.5rem 0;background:var(--surface)}
.about-team{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:1.5rem}
.about-team-card{background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:1.75rem 1.25rem;text-align:center}
.about-team-avatar{width:72px;height:72px;border-radius:50%;background:var(--g-soft);color:#fff;display:grid;place-items:center;margin:0 auto 1rem}
.about-team-avatar svg{width:32px;height:32px}
.about-team-role{font-family:var(--hf);font-size:1.05rem;font-weight:700;color:var(--text);margin:0 0 .4rem}
.about-team-bio{font-size:.85rem;line-height:1.6;color:var(--dim);margin:0}
.about-team-note{text-align:center;font-size:.82rem;color:var(--muted);margin-top:1.5rem;max-width:620px;margin-left:auto;margin-right:auto}
@media(max-width:768px){.about-team{grid-template-columns:1fr}}

.about-legal-section{padding:2rem 0}
.about-legal{max-width:820px;margin:0 auto;display:flex;gap:1.25rem;background:#FFF8EA;border:1.5px solid #FBBF24;border-left-width:5px;border-radius:14px;padding:1.5rem}
.about-legal-ico{font-size:2rem;flex-shrink:0}
.about-legal-body h3{font-family:var(--hf);font-size:1.1rem;font-weight:700;color:#92400E;margin:0 0 .6rem}
.about-legal-body p{font-size:.9rem;line-height:1.6;color:#78350F;margin:0 0 .6rem}
.about-legal-body a{color:var(--ember);font-weight:600}

.about-cta-section{padding:3rem 0;background:linear-gradient(135deg,var(--tint),#FFE8D6);text-align:center}
.about-cta h2{font-family:var(--hf);font-size:clamp(1.6rem,3vw,2rem);font-weight:800;margin:0 0 .6rem}
.about-cta p{font-size:1rem;color:var(--dim);margin:0 0 1.5rem}
.about-cta-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.about-cta-whatsapp{background:#25D366;color:#fff;border-color:#25D366;display:inline-flex;align-items:center;gap:.4rem}
.about-cta-whatsapp:hover{background:#128C7E;border-color:#128C7E;color:#fff}

/* ─── İLETİŞİM ─── */
.contact-hero{padding:3rem 0 1.5rem;text-align:center}
.contact-hero-inner{max-width:720px;margin:0 auto;padding:0 1rem}
.contact-h1{font-family:var(--hf);font-weight:800;font-size:clamp(1.9rem,4.5vw,2.8rem);line-height:1.1;margin:.5rem 0 1rem}
.contact-lead{font-size:clamp(.95rem,1.2vw,1.02rem);line-height:1.7;color:var(--dim)}

.contact-channels-section{padding:2rem 0}
.contact-channels{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:1rem}
.contact-channel{display:flex;flex-direction:column;background:var(--bg);border:1.5px solid var(--border);border-radius:18px;padding:1.75rem 1.5rem;text-decoration:none;color:var(--text);transition:all .25s var(--ease);position:relative;overflow:hidden}
.contact-channel:hover{border-color:var(--fire);transform:translateY(-3px);box-shadow:0 14px 32px rgba(255,96,0,.12);color:var(--text)}
.contact-channel-ico{width:52px;height:52px;border-radius:14px;background:var(--tint);display:grid;place-items:center;color:var(--fire);margin-bottom:.9rem}
.contact-channel-ico svg{width:26px;height:26px}
.contact-channel-title{font-family:var(--hf);font-size:1.1rem;font-weight:700;margin:0 0 .4rem}
.contact-channel-desc{font-size:.88rem;line-height:1.55;color:var(--dim);margin:0 0 .9rem;flex:1}
.contact-channel-action{font-size:.9rem;font-weight:700;color:var(--fire);display:inline-flex;align-items:center;gap:.25rem}
.contact-channel-action span{transition:transform .2s var(--ease)}
.contact-channel:hover .contact-channel-action span{transform:translateX(4px)}
.contact-channel--whatsapp .contact-channel-ico{background:#D6F7E2;color:#128C7E}
.contact-channel--hours{cursor:default}
.contact-channel--hours:hover{transform:none;border-color:var(--border);box-shadow:none}
.contact-channel-hours{list-style:none;padding:0;margin:0}
.contact-channel-hours li{font-size:.85rem;color:var(--dim);padding:.3rem 0;border-bottom:1px dashed var(--border)}
.contact-channel-hours li:last-child{border-bottom:0}
.contact-channel-hours strong{color:var(--text);margin-right:.35rem}
@media(max-width:900px){.contact-channels{grid-template-columns:1fr}}

.contact-form-section{padding:2.5rem 0;background:var(--surface)}
.contact-form-wrap{display:grid;grid-template-columns:1fr 1.3fr;gap:2.5rem;align-items:start;max-width:1080px;margin:0 auto}
.contact-form-left .sec-title{text-align:left}
.contact-form-note{font-size:.95rem;line-height:1.65;color:var(--dim);margin:.75rem 0 1rem}
.contact-form-note a{color:var(--fire);font-weight:600}
.contact-form-tips{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.45rem}
.contact-form-tips li{font-size:.85rem;color:var(--dim);padding:.45rem .75rem;background:var(--tint);border-radius:8px}
.contact-form{background:var(--bg);border:1px solid var(--border);border-radius:18px;padding:1.75rem}
.contact-form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.contact-form-field{margin-bottom:1rem;position:relative}
.contact-form-field label{display:block;font-size:.82rem;font-weight:600;color:var(--text);margin-bottom:.35rem}
.contact-form-field .req{color:var(--danger)}
.contact-form-field input,.contact-form-field textarea{width:100%;padding:.7rem .9rem;border:1.5px solid var(--border);border-radius:10px;font-size:.92rem;font-family:inherit;background:#fff;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.contact-form-field input:focus,.contact-form-field textarea:focus{outline:none;border-color:var(--fire);box-shadow:0 0 0 3px rgba(255,96,0,.12)}
.contact-form-field textarea{resize:vertical;min-height:120px;line-height:1.5}
.contact-form-count{position:absolute;right:.75rem;bottom:-1.2rem;font-size:.72rem;color:var(--muted)}
.contact-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-form-kvkk label{display:flex;align-items:flex-start;gap:.5rem;font-weight:400;font-size:.85rem;color:var(--dim);line-height:1.5;cursor:pointer}
.contact-form-kvkk input{width:auto;accent-color:var(--fire);margin-top:.2rem;flex-shrink:0}
.contact-form-kvkk a{color:var(--fire);font-weight:600}
.contact-form-actions{display:flex;align-items:center;gap:1rem;margin-top:1.25rem;flex-wrap:wrap}
.contact-form-status{flex:1;padding:.6rem .9rem;border-radius:8px;font-size:.9rem;font-weight:500}
.contact-form-status.is-success{background:#DCFCE7;color:#166534;border:1px solid #86EFAC}
.contact-form-status.is-error{background:#FEF2F2;color:#991B1B;border:1px solid #FCA5A5}
@media(max-width:900px){.contact-form-wrap{grid-template-columns:1fr}.contact-form-row{grid-template-columns:1fr}}

.contact-faq-section{padding:2.5rem 0}
.contact-faq{max-width:760px;margin:1.5rem auto 0;display:flex;flex-direction:column;gap:.6rem}
.contact-faq-item{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:0;transition:border-color .2s var(--ease)}
.contact-faq-item:hover{border-color:var(--border-h)}
.contact-faq-item[open]{border-color:var(--fire);background:var(--tint)}
.contact-faq-item summary{padding:1rem 1.25rem;font-family:var(--bf);font-weight:600;font-size:.95rem;color:var(--text);cursor:pointer;display:flex;justify-content:space-between;align-items:center;list-style:none}
.contact-faq-item summary::-webkit-details-marker{display:none}
.contact-faq-item summary::after{content:'+';font-size:1.3rem;color:var(--fire);font-weight:700;transition:transform .2s var(--ease)}
.contact-faq-item[open] summary::after{content:'−';transform:rotate(180deg)}
.contact-faq-item p{padding:0 1.25rem 1.1rem;margin:0;font-size:.88rem;color:var(--dim);line-height:1.65}

.contact-area-section{padding:2rem 0 3rem}
.contact-area{max-width:820px;margin:0 auto;display:flex;gap:1.25rem;background:linear-gradient(135deg,#FEF3C7,#FFF4EB);border:1px solid #FBBF24;border-radius:14px;padding:1.5rem}
.contact-area-ico{font-size:2.5rem;flex-shrink:0}
.contact-area-body h3{font-family:var(--hf);font-size:1.15rem;font-weight:700;color:var(--text);margin:0 0 .5rem}
.contact-area-body p{font-size:.9rem;line-height:1.6;color:var(--dim);margin:0 0 .5rem}
.contact-area-legal{font-size:.82rem!important;color:#92400E!important;font-weight:500}

/* ─── FAVORİLERİM ─── */
.fav-page{padding:2rem 0 3rem}
.fav-header{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.75rem;flex-wrap:wrap}
.fav-title{font-family:var(--hf);font-size:clamp(1.7rem,3.5vw,2.2rem);font-weight:800;color:var(--text);margin:0 0 .3rem;display:flex;align-items:center;gap:.6rem}
.fav-title svg{width:32px;height:32px;color:var(--fire);flex-shrink:0}
.fav-sub{font-size:.95rem;color:var(--dim);margin:0}
.fav-clear-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1rem;background:#fff;border:1.5px solid var(--border);color:var(--danger);border-radius:10px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s var(--ease)}
.fav-clear-btn:hover{background:var(--danger);color:#fff;border-color:var(--danger)}

.fav-empty{text-align:center;padding:3rem 1rem;max-width:540px;margin:0 auto}
.fav-empty-illust{width:140px;height:140px;margin:0 auto 1.25rem;color:var(--fire)}
.fav-empty-illust svg{width:100%;height:100%}
.fav-empty h3{font-family:var(--hf);font-size:1.4rem;font-weight:700;color:var(--text);margin:0 0 .5rem}
.fav-empty p{font-size:.95rem;color:var(--dim);line-height:1.6;margin:0 0 1.5rem}
.fav-empty-cta{display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap}

/* ─── BOZUK GÖRSEL FALLBACK ─── */
.img-fallback{object-fit:cover!important;background:linear-gradient(135deg,#FFF4EB,#FFE8D6);padding:0!important}
.product-card-img img.img-fallback,
.gallery-main img.img-fallback,
.cart-item-img.img-fallback,
.trend-img img.img-fallback{object-fit:contain!important;padding:8%!important}

/* ─── ÜRÜN KARTI KALP (product-card-fav) — İKİNCİL, sepete ekleden küçük ─── */
.product-card{position:relative}
.product-card-fav{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;border:none;background:rgba(255,255,255,.88);color:var(--dim);display:grid;place-items:center;cursor:pointer;z-index:3;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 2px 6px rgba(0,0,0,.06);transition:all .22s var(--ease)}
.product-card-fav svg{width:15px;height:15px;transition:all .22s var(--ease)}
.product-card-fav:hover{background:#fff;color:var(--fire);transform:scale(1.08)}
.product-card-fav.is-fav,.product-card-fav.active{background:var(--fire);color:#fff}
.product-card-fav.is-fav svg,.product-card-fav.active svg{fill:#fff}
.product-card-fav[data-busy="1"]{opacity:.6;pointer-events:none}

@keyframes heartPop{0%{transform:scale(1)}50%{transform:scale(1.3)}100%{transform:scale(1)}}
.product-card-fav.is-fav{animation:heartPop .35s var(--ease)}

/* ─── HEADER FAV COUNT BADGE ─── */
.header-user-fav-count{margin-left:auto;background:var(--fire);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:50px;min-width:20px;text-align:center;line-height:1.3}

/* ─── Favori butonu (ürün detay .pd-fav) — is-fav stili güçlensin ─── */
.pd-fav.is-fav{border-color:var(--fire);background:var(--fire)}
.pd-fav.is-fav svg{color:#fff;fill:#fff}

@media(max-width:640px){
    .about-cta-buttons{flex-direction:column}
    .about-legal{flex-direction:column;padding:1.25rem}
    .contact-area{flex-direction:column;text-align:center}
    .product-card-fav{width:26px;height:26px;top:6px;right:6px}
    .product-card-fav svg{width:13px;height:13px}
}