﻿/* ==========================================================================
   Veranda Soba - Kurumsal Tema | Mobil Uyumlu | SEO Friendly
   https://verandasoba.name.tr
   ========================================================================== */
:root{
  --bg:#100d0a;
  --bg2:#171310;
  --panel:#1d1815;
  --panel2:#241d18;
  --line:rgba(255,160,60,.18);
  --txt:#f3e9df;
  --txt2:#c9b8a8;
  --mut:#9c8a7a;
  --acc:#ff7a18;
  --acc2:#ffb347;
  --acc3:#ffd27a;
  --flame:linear-gradient(135deg,#ff4d00 0%,#ff7a18 35%,#ffb347 70%,#ffe29a 100%);
  --ok:#3ddc84;
  --shadow:0 18px 48px rgba(0,0,0,.55);
  --shadow2:0 6px 22px rgba(0,0,0,.4);
  --r:16px;
  --r2:12px;
  --max:1200px;
  --hd:86px;
  --font:"Segoe UI",system-ui,-apple-system,"Roboto","Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);background:var(--bg);color:var(--txt);
  line-height:1.7;font-size:16px;overflow-x:hidden;
  background-image:
    radial-gradient(1100px 520px at 92% -8%,rgba(255,122,24,.16),transparent 60%),
    radial-gradient(900px 480px at -10% 12%,rgba(255,77,0,.12),transparent 55%);
  background-attachment:fixed;
}
img{max-width:100%;height:auto;display:block;border:0}
a{color:var(--acc2);text-decoration:none;transition:color .25s}
a:hover,a:focus{color:var(--acc3)}
ul,ol{padding-left:22px}
h1,h2,h3,h4{line-height:1.28;margin:0 0 .6em;color:#fff;font-weight:800;letter-spacing:-.2px}
h1{font-size:clamp(1.5rem,3.4vw,2.35rem)}
h2{font-size:clamp(1.25rem,2.6vw,1.8rem)}
h3{font-size:1.13rem}
p{margin:0 0 1em;color:var(--txt2)}
.container{width:min(100% - 2rem,var(--max));margin-inline:auto}
.sec{padding:52px 0}
.sec-tight{padding:34px 0}
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g4{grid-template-columns:repeat(3,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g4,.g3,.g2{grid-template-columns:1fr}}

/* ---------- Animations ---------- */
@keyframes flameGlow{
  0%,100%{box-shadow:0 0 0 rgba(255,122,24,0),0 0 24px rgba(255,122,24,.25)}
  50%{box-shadow:0 0 34px rgba(255,122,24,.45),0 0 70px rgba(255,77,0,.2)}
}
@keyframes gradShift{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.055)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes kenburns{0%{transform:scale(1) translateX(0)}100%{transform:scale(1.12) translateX(-2%)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes twinkle{0%,100%{opacity:.5}50%{opacity:1}}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.on{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- Topbar ---------- */
.topbar{background:#0b0907;border-bottom:1px solid var(--line);font-size:.85rem;color:var(--mut)}
.topbar .container{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:space-between;min-height:40px}
.topbar a{color:var(--txt2);display:inline-flex;align-items:center;gap:7px}
.topbar a:hover{color:var(--acc2)}
.topbar .tb-r{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.tb-mail{white-space:nowrap}
@media(max-width:760px){.topbar{display:none}}

/* ---------- Header ---------- */
.hd{position:sticky;top:0;z-index:900;background:rgba(16,13,10,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
.hd.stuck{box-shadow:0 10px 30px rgba(0,0,0,.5)}
.hd .container{display:flex;align-items:center;gap:18px;min-height:var(--hd)}
.logo{display:flex;align-items:center;gap:12px;color:#fff;font-weight:900;font-size:1.22rem;white-space:nowrap}
.logo:hover{color:#fff}
.logo-ic{width:46px;height:46px;border-radius:14px;background:var(--flame);display:grid;place-items:center;box-shadow:0 6px 18px rgba(255,100,0,.4);animation:flameGlow 3.2s ease-in-out infinite;flex:0 0 auto}
.logo-ic svg{width:27px;height:27px}
.logo small{display:block;font-size:.68rem;font-weight:600;color:var(--mut);letter-spacing:.4px}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav>li{position:relative;list-style:none}
.nav>li>a{display:flex;align-items:center;gap:6px;padding:11px 13px;border-radius:10px;color:var(--txt);font-weight:600;font-size:.95rem}
.nav>li>a:hover,.nav>li>a.act{background:rgba(255,122,24,.13);color:var(--acc2)}
.nav .drop{position:absolute;top:calc(100% + 8px);left:0;min-width:250px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);box-shadow:var(--shadow);padding:9px;opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s;z-index:50;max-height:70vh;overflow:auto}
.nav>li:hover .drop,.nav>li:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0)}
.nav .drop a{display:block;padding:8px 12px;border-radius:8px;color:var(--txt2);font-size:.9rem}
.nav .drop a:hover{background:rgba(255,122,24,.12);color:#fff}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:10px;width:46px;height:46px;cursor:pointer;color:#fff;margin-left:auto}
.burger span{display:block;width:22px;height:2px;background:#fff;margin:5px auto;border-radius:2px;transition:.3s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.hd-cta{display:inline-flex;align-items:center;gap:8px;background:var(--flame);background-size:200% 200%;color:#1a0e04;font-weight:800;padding:11px 17px;border-radius:12px;animation:gradShift 5s ease infinite,pulse 2.6s ease-in-out infinite;white-space:nowrap;font-size:.92rem}
.hd-cta:hover{color:#1a0e04;filter:brightness(1.06)}
@media(max-width:1080px){
  .hd-cta{display:none}
  .burger{display:block}
  .nav{position:fixed;top:calc(var(--hd) + 40px);left:0;right:0;bottom:0;background:rgba(10,8,6,.98);flex-direction:column;align-items:stretch;padding:16px;gap:6px;overflow:auto;transform:translateX(100%);transition:transform .35s;z-index:800;margin:0}
  .nav.open{transform:translateX(0)}
  .nav>li>a{padding:14px 16px;font-size:1.05rem;border:1px solid var(--line);background:var(--panel)}
  .nav .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:transparent;max-height:none;padding:4px 0 4px 14px;display:none}
  .nav>li.open .drop{display:block}
}

/* ---------- Breadcrumb ---------- */
.crumbs{padding:14px 0;font-size:.83rem;color:var(--mut)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.crumbs li:not(:last-child)::after{content:"›";margin-left:6px;color:var(--acc)}
.crumbs a{color:var(--txt2)}
.crumbs .cur{color:var(--acc2)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-slider{position:absolute;inset:0;overflow:hidden}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
.hero-slide.on{opacity:1}
.hero-slide img{width:100%;height:100%;object-fit:cover;animation:kenburns 12s ease forwards}
.hero-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,7,5,.94) 12%,rgba(12,8,5,.72) 46%,rgba(20,10,4,.35) 100%)}
.hero-in{position:relative;z-index:3;min-height:clamp(420px,62vh,640px);display:flex;flex-direction:column;justify-content:center;padding:64px 0 84px}
.hero-tag{display:inline-flex;align-items:center;gap:9px;background:rgba(255,122,24,.14);border:1px solid rgba(255,122,24,.4);color:var(--acc3);font-weight:700;font-size:.82rem;padding:8px 15px;border-radius:999px;width:max-content;margin-bottom:18px;letter-spacing:.4px;text-transform:uppercase}
.hero h1{max-width:830px;font-size:clamp(1.7rem,4.6vw,3rem);text-shadow:0 4px 30px rgba(0,0,0,.6)}
.hero h1 b{background:var(--flame);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradShift 5s ease infinite}
.hero p{max-width:720px;font-size:clamp(1rem,1.6vw,1.13rem);color:#e6d7c8}
.hero-btns{display:flex;flex-wrap:wrap;gap:13px;margin-top:12px}
.hero-dots{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;gap:9px;z-index:5}
.hero-dots button{width:11px;height:11px;border-radius:99px;border:0;background:rgba(255,255,255,.35);cursor:pointer;transition:.3s;padding:0}
.hero-dots button.on{width:34px;background:var(--flame)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:13px;font-weight:800;font-size:.97rem;cursor:pointer;border:1px solid transparent;transition:transform .2s,box-shadow .25s,filter .25s;line-height:1.2}
.btn svg{width:19px;height:19px;flex:0 0 auto}
.btn-p{background:var(--flame);background-size:200% 200%;color:#1c0d02;animation:gradShift 5s ease infinite;box-shadow:0 10px 26px rgba(255,110,10,.35)}
.btn-p:hover{color:#1c0d02;transform:translateY(-2px);box-shadow:0 14px 34px rgba(255,110,10,.5)}
.btn-o{background:rgba(255,255,255,.04);border-color:var(--line);color:var(--txt)}
.btn-o:hover{border-color:var(--acc);color:#fff;transform:translateY(-2px)}
.btn-w{background:#22c55e;color:#06280f}
.btn-w:hover{color:#06280f;transform:translateY(-2px);filter:brightness(1.07)}
.btn-sm{padding:9px 15px;font-size:.86rem;border-radius:10px}

/* ---------- Ticker ---------- */
.ticker{background:#0b0907;border-block:1px solid var(--line);overflow:hidden;padding:11px 0}
.ticker-in{display:flex;gap:56px;width:max-content;animation:marquee 34s linear infinite}
.ticker:hover .ticker-in{animation-play-state:paused}
.ticker span{display:inline-flex;align-items:center;gap:9px;color:var(--txt2);font-weight:700;font-size:.9rem;white-space:nowrap}
.ticker span i{width:8px;height:8px;border-radius:50%;background:var(--flame);animation:twinkle 1.6s ease infinite}

/* ---------- Section head ---------- */
.sec-head{margin-bottom:30px}
.sec-head .kicker{display:inline-flex;align-items:center;gap:8px;color:var(--acc2);font-weight:800;text-transform:uppercase;letter-spacing:1.3px;font-size:.76rem;margin-bottom:10px}
.sec-head .kicker::before{content:"";width:26px;height:3px;border-radius:3px;background:var(--flame)}
.sec-head p{max-width:760px;margin-bottom:0}
.sec-head.center{text-align:center}
.sec-head.center .kicker{justify-content:center}
.sec-head.center p{margin-inline:auto}

/* ---------- Cards ---------- */
.card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow2);position:relative;overflow:hidden;transition:transform .3s,border-color .3s,box-shadow .3s}
.card:hover{transform:translateY(-6px);border-color:rgba(255,122,24,.5);box-shadow:0 20px 44px rgba(0,0,0,.5)}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--flame);opacity:0;transition:.3s}
.card:hover::before{opacity:1}
.card h3 a{color:#fff}
.card h3 a:hover{color:var(--acc2)}
.card p:last-child{margin-bottom:0}
.card-ic{width:54px;height:54px;border-radius:15px;background:rgba(255,122,24,.13);border:1px solid rgba(255,122,24,.3);display:grid;place-items:center;margin-bottom:15px;color:var(--acc2)}
.card-ic svg{width:28px;height:28px}
.card-icon{font-size:2rem;line-height:1;margin-bottom:10px;display:block}
.pc{display:flex;flex-direction:column;height:100%}
.pc .go{margin-top:auto;padding-top:13px;font-weight:800;display:inline-flex;align-items:center;gap:7px;font-size:.9rem}
.pc .go svg{width:16px;height:16px;transition:transform .25s}
.pc:hover .go svg{transform:translateX(4px)}

/* Product mini card w/ image */
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow2);transition:transform .3s,border-color .3s;display:flex;flex-direction:column}
.pcard:hover{transform:translateY(-5px);border-color:rgba(255,122,24,.55)}
.pcard .ph{aspect-ratio:16/10;overflow:hidden;position:relative;background:#0c0a08}
.pcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.pcard:hover .ph img{transform:scale(1.07)}
.pcard .bd{padding:16px 17px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.pcard h3{font-size:1.02rem;margin:0}
.pcard h3 a{color:#fff}
.pcard .meta{font-size:.8rem;color:var(--mut);display:flex;gap:12px;flex-wrap:wrap}
.pcard .go{margin-top:auto;font-weight:800;font-size:.87rem;display:inline-flex;gap:6px;align-items:center;color:var(--acc2)}
.badge{position:absolute;top:11px;left:11px;background:var(--flame);color:#1a0d02;font-weight:800;font-size:.7rem;padding:5px 11px;border-radius:999px;z-index:2;letter-spacing:.3px}
.badge.alt{background:#0f2c1d;color:#7dffb2;border:1px solid rgba(125,255,178,.4)}

/* ---------- Gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:11px}
.gal a,.gal button.gi{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:12px;border:1px solid var(--line);background:#0c0a08;cursor:pointer;padding:0;transition:transform .25s,border-color .25s,box-shadow .25s}
.gal a:hover,.gal button.gi:hover{transform:scale(1.03);border-color:var(--acc);box-shadow:0 10px 26px rgba(0,0,0,.5);z-index:2}
.gal img{width:100%;height:100%;object-fit:contain;transition:filter .3s}
.gal a:hover img,.gal button.gi:hover img{filter:brightness(1.08)}
.gal .gi::after{content:"⌕";position:absolute;right:8px;bottom:6px;background:rgba(0,0,0,.55);color:#fff;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:1rem}
.gal-count{display:inline-flex;gap:7px;align-items:center;background:rgba(255,122,24,.12);border:1px solid var(--line);color:var(--acc3);border-radius:999px;padding:6px 14px;font-size:.82rem;font-weight:700;margin-bottom:16px}

/* ---------- Lightbox ---------- */
.lb{position:fixed;inset:0;z-index:2000;background:rgba(5,3,2,.96);display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.lb.on{display:flex;animation:fadeUp .25s ease}
.lb-img{max-width:min(92vw,1400px);max-height:82vh;object-fit:contain;border-radius:10px;box-shadow:0 30px 90px rgba(0,0,0,.8);user-select:none;-webkit-user-drag:none}
.lb-x{position:absolute;top:18px;right:18px;width:48px;height:48px;border-radius:14px;border:1px solid var(--line);background:rgba(255,122,24,.16);color:#fff;font-size:1.5rem;cursor:pointer;display:grid;place-items:center;transition:.25s}
.lb-x:hover{background:var(--acc);color:#170b02;transform:rotate(90deg)}
.lb-arw{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;border:1px solid var(--line);background:rgba(20,14,10,.8);color:#fff;font-size:1.5rem;cursor:pointer;display:grid;place-items:center;transition:.25s}
.lb-arw:hover{background:var(--acc);color:#170b02}
.lb-p{left:14px}
.lb-n{right:14px}
.lb-cap{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);background:rgba(10,7,5,.85);border:1px solid var(--line);color:var(--txt2);padding:8px 18px;border-radius:999px;font-size:.85rem;max-width:88vw;text-align:center}
.lb-count{position:absolute;top:22px;left:22px;background:rgba(10,7,5,.8);border:1px solid var(--line);color:var(--acc3);font-weight:800;padding:7px 15px;border-radius:999px;font-size:.85rem}
@media(max-width:640px){
  .lb-arw{width:44px;height:44px;font-size:1.2rem}
  .lb-x{width:42px;height:42px}
}

/* ---------- Info boxes / lists ---------- */
.note{border:1px solid var(--line);border-left:4px solid var(--acc);background:rgba(255,122,24,.07);border-radius:0 var(--r2) var(--r2) 0;padding:16px 20px;margin:18px 0;color:var(--txt2)}
.note b{color:var(--acc3)}
.check{list-style:none;padding:0;margin:0 0 1em}
.check li{position:relative;padding:7px 0 7px 34px;color:var(--txt2)}
.check li::before{content:"✓";position:absolute;left:0;top:6px;width:24px;height:24px;border-radius:8px;background:rgba(61,220,132,.14);border:1px solid rgba(61,220,132,.4);color:var(--ok);display:grid;place-items:center;font-size:.8rem;font-weight:900}
.tags{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0}
.tags a{display:inline-flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line);color:var(--txt2);padding:8px 14px;border-radius:999px;font-size:.85rem;font-weight:600;transition:.25s}
.tags a:hover{border-color:var(--acc);color:#fff;background:rgba(255,122,24,.13);transform:translateY(-2px)}
.tags a svg{width:14px;height:14px;color:var(--acc2)}

/* ---------- Table ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);margin:18px 0}
table{width:100%;border-collapse:collapse;min-width:480px;background:var(--panel)}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:.93rem}
th{background:#221a13;color:var(--acc3);font-weight:800;white-space:nowrap}
tr:last-child td{border-bottom:0}
tr:nth-child(even) td{background:rgba(255,255,255,.02)}
td b{color:#fff}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:12px}
.fq{border:1px solid var(--line);border-radius:var(--r2);background:var(--panel);overflow:hidden}
.fq summary{cursor:pointer;padding:16px 52px 16px 19px;font-weight:700;color:#fff;list-style:none;position:relative;font-size:1rem;transition:.25s}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:9px;background:rgba(255,122,24,.14);border:1px solid var(--line);color:var(--acc2);display:grid;place-items:center;font-size:1.15rem;transition:.3s}
.fq[open] summary::after{content:"−";transform:translateY(-50%) rotate(180deg);background:var(--acc);color:#180b02}
.fq summary:hover{color:var(--acc2)}
.fq .fa{padding:0 19px 17px;color:var(--txt2);font-size:.95rem}
.fq .fa p{margin:0}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.st{text-align:center;padding:24px 14px;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,var(--panel2),var(--panel))}
.st b{display:block;font-size:clamp(1.5rem,3.4vw,2.2rem);background:var(--flame);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900;animation:gradShift 5s ease infinite}
.st span{color:var(--mut);font-size:.86rem;font-weight:600}

/* ---------- CTA band ---------- */
.cta{position:relative;border-radius:22px;overflow:hidden;border:1px solid rgba(255,122,24,.4);background:
  radial-gradient(600px 240px at 12% 0%,rgba(255,122,24,.28),transparent 60%),
  radial-gradient(500px 240px at 90% 100%,rgba(255,77,0,.2),transparent 60%),var(--panel);padding:clamp(28px,5vw,52px);box-shadow:var(--shadow)}
.cta h2{max-width:720px}
.cta p{max-width:700px;color:#e2d3c4}
.cta-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.cta-ic{position:absolute;right:4%;bottom:8%;font-size:5.2rem;opacity:.12;animation:floaty 5s ease-in-out infinite;pointer-events:none}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:26px}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.clist{list-style:none;padding:0;margin:0;display:grid;gap:13px}
.clist li{display:flex;gap:14px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);padding:15px 17px;transition:.25s}
.clist li:hover{border-color:rgba(255,122,24,.5);transform:translateX(4px)}
.clist .ci{width:44px;height:44px;flex:0 0 auto;border-radius:13px;background:rgba(255,122,24,.13);border:1px solid rgba(255,122,24,.3);display:grid;place-items:center;color:var(--acc2)}
.clist .ci svg{width:22px;height:22px}
.clist b{display:block;color:#fff}
.clist span{color:var(--txt2);font-size:.92rem}
.clist a{color:var(--acc2);font-weight:700}
.form{display:grid;gap:13px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.form label{font-weight:700;font-size:.88rem;color:var(--txt);display:grid;gap:6px}
.form input,.form textarea,.form select{width:100%;background:#14100d;border:1px solid var(--line);border-radius:11px;color:var(--txt);padding:12px 14px;font:inherit;font-size:.95rem;transition:.25s}
.form input:focus,.form textarea:focus,.form select:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 3px rgba(255,122,24,.18)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
@media(max-width:560px){.form .row{grid-template-columns:1fr}}
.map{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:22px;filter:grayscale(.3) brightness(.9)}
.map iframe{display:block;width:100%;height:320px;border:0}

/* ---------- Provinces ---------- */
.il-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:11px}
.il-grid a{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--txt2);font-weight:700;font-size:.9rem;transition:.25s}
.il-grid a:hover{border-color:var(--acc);color:#fff;background:rgba(255,122,24,.12);transform:translateY(-3px)}
.il-grid a i{font-style:normal;width:30px;height:30px;border-radius:9px;background:rgba(255,122,24,.14);color:var(--acc3);display:grid;place-items:center;font-size:.75rem;font-weight:900;flex:0 0 auto}

/* ---------- Footer ---------- */
.ft{margin-top:60px;background:#0a0806;border-top:1px solid var(--line)}
.ft-top{padding:52px 0 34px}
.ft-cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:30px}
@media(max-width:980px){.ft-cols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ft-cols{grid-template-columns:1fr}}
.ft h4{color:#fff;font-size:1rem;margin-bottom:14px;display:flex;align-items:center;gap:9px}
.ft h4::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--flame)}
.ft-about p{font-size:.9rem;color:var(--mut)}
.ft-phones{display:grid;gap:9px;margin-top:14px}
.ft-phones a{display:flex;align-items:center;gap:10px;color:var(--txt2);font-weight:700;font-size:.92rem}
.ft-phones a:hover{color:var(--acc2)}
.ft-phones svg{width:17px;height:17px;color:var(--acc2);flex:0 0 auto}
.ft-links{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.ft-links a{color:var(--mut);font-size:.86rem}
.ft-links a:hover{color:var(--acc2);padding-left:4px}
.ft-sitemap{border-top:1px solid var(--line);padding:28px 0}
.ft-sitemap h4{margin-bottom:16px}
.ft-all{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:5px 18px;max-height:340px;overflow:auto;padding-right:8px}
.ft-all a{color:#7d6d5f;font-size:.78rem;line-height:1.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.ft-all a:hover{color:var(--acc2)}
.ft-all .ft-all-h{grid-column:1/-1;color:#ffb347;font-size:.92rem;margin:0 0 8px}
.ft-all .ft-all-h2{margin-top:16px}
.ft-bot{border-top:1px solid var(--line);padding:19px 0;font-size:.83rem;color:#6d5d50}
.ft-bot .container{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center}
.ft-bot a{color:#8d7b6b}

/* ---------- Floating ---------- */
.wa{position:fixed;right:18px;bottom:88px;z-index:950;width:60px;height:60px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 12px 32px rgba(37,211,102,.45);animation:pulse 2.4s ease-in-out infinite;transition:transform .25s}
.wa:hover{transform:scale(1.12)}
.wa svg{width:32px;height:32px;color:#fff}
.tt{position:fixed;right:22px;bottom:24px;z-index:950;width:48px;height:48px;border-radius:14px;border:1px solid var(--line);background:rgba(28,20,14,.92);color:var(--acc2);display:grid;place-items:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(14px);transition:.3s}
.tt.on{opacity:1;visibility:visible;transform:translateY(0)}
.tt:hover{background:var(--acc);color:#180b02}
.tt svg{width:21px;height:21px}

/* ---------- Utilities ---------- */
.bg-sec{background:linear-gradient(180deg,rgba(255,122,24,.05),transparent 40%),var(--bg2);border-block:1px solid var(--line)}
.txt-c{text-align:center}
.mt{margin-top:26px}.mb{margin-bottom:26px}
.lead{font-size:1.06rem;color:#e0d1c2}
.small{font-size:.85rem;color:var(--mut)}
.hl{color:var(--acc2);font-weight:800}
.art{max-width:820px}
.art h2{margin-top:1.5em}
.art h3{margin-top:1.2em}
.hl-band{background:rgba(255,122,24,.09);border:1px solid var(--line);border-radius:var(--r);padding:18px 22px;margin:18px 0}
.hl-band h3{color:var(--acc3);display:flex;gap:10px;align-items:center;margin-bottom:8px}
.hl-band h3 svg{width:22px;height:22px}
.rel{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:11px}
.rel a{display:block;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:12px 15px;color:var(--txt2);font-size:.88rem;font-weight:600;transition:.25s}
.rel a:hover{border-color:var(--acc);color:#fff;transform:translateY(-3px);background:rgba(255,122,24,.1)}
.pager{display:flex;justify-content:space-between;gap:14px;margin:30px 0;flex-wrap:wrap}
.pager a{display:inline-flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 18px;color:var(--txt2);font-weight:700;font-size:.9rem;transition:.25s;max-width:48%}
.pager a:hover{border-color:var(--acc);color:#fff}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:3000;background:var(--acc);color:#160a02;padding:11px 17px;border-radius:10px;font-weight:800}
noscript .note{margin:20px auto;max-width:800px}

/* Sitemap page */
.sm-cat{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:22px;margin-bottom:16px}
.sm-cat h2{font-size:1.15rem;color:var(--acc3);display:flex;gap:10px;align-items:center}
.sm-cat ul{columns:3;column-gap:26px;margin:0;padding-left:18px}
@media(max-width:900px){.sm-cat ul{columns:2}}
@media(max-width:560px){.sm-cat ul{columns:1}}
.sm-cat li{break-inside:avoid;margin:4px 0}
.sm-cat a{font-size:.87rem;color:var(--txt2)}

/* Print */
@media print{
  .hd,.topbar,.ft,.wa,.tt,.hero-dots,.ticker,.burger,.nav{display:none!important}
  body{background:#fff;color:#000}
  a{color:#000}
}
