/* HilTech Anasayfa — modules/hiltechhome
   Tüm kurallar .hh altında; temanın ve Elementor'un stillerine dokunmaz. */

.hh{
  --hh-ink:#15161A; --hh-muted:#6B6A66; --hh-ground:#F6F5F2; --hh-card:#FFFFFF;
  --hh-line:#ECEBE7; --hh-soft:#F4F3EF; --hh-radius:22px;
  --hh-accent-ink:#C2410C;
  background:var(--hh-ground); color:var(--hh-ink);
  font-family:inherit; line-height:1.45; -webkit-font-smoothing:antialiased;
  padding:20px 0 48px;
}
@supports (color: color-mix(in srgb, #fff 50%, #000)){
  .hh{ --hh-accent-ink: color-mix(in srgb, var(--hh-accent) 62%, #000); }
}
.hh *, .hh *::before, .hh *::after{box-sizing:border-box;}
.hh a{color:inherit; text-decoration:none;}
.hh a:hover{text-decoration:none;}
.hh img{max-width:100%; height:auto; display:block;}
.hh h1, .hh h2{font-family:inherit; color:inherit; text-transform:none; margin:0;}
.hh button{font-family:inherit;}
.hh-wrap{max-width:1280px; margin:0 auto; padding:0 24px; display:flex; flex-direction:column; gap:28px;}
.hh-ico{display:block; flex:none;}

/* ---------- ortak ---------- */
.hh-box{background:var(--hh-card); border-radius:var(--hh-radius); padding:22px 20px;}
.hh-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px;}
.hh-head-l{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.hh-head h2{font-size:25px; font-weight:800; letter-spacing:-.4px; line-height:1.15;}
.hh-all{font-size:14px; font-weight:700; white-space:nowrap;}
.hh-all:hover{color:var(--hh-accent-ink);}
.hh-kicker{display:block; font-size:12px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase;}
.hh-kicker--ink{color:var(--hh-accent-ink); margin-bottom:4px;}
.hh-pill{align-self:flex-start; font-size:12px; font-weight:700; letter-spacing:1.1px; background:var(--hh-accent); color:var(--hh-ink); padding:6px 12px; border-radius:999px;}
.hh-btn{align-self:flex-start; display:inline-flex; align-items:center; gap:10px; background:var(--hh-accent); color:var(--hh-ink) !important; font-weight:800; font-size:15px; padding:14px 22px; border-radius:12px; margin-top:6px; transition:transform .15s ease;}
.hh-btn:hover{transform:translateX(2px);}

/* stil varyantları: koyu / vurgu / açık */
.hh .hh-st-dark{background:var(--hh-ink); color:#FFFFFF;}
.hh .hh-st-accent{background:var(--hh-accent); color:var(--hh-ink);}
.hh .hh-st-light{background:var(--hh-card); color:var(--hh-ink); border:1px solid var(--hh-line);}

/* ---------- hero ---------- */
.hh-hero{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:16px;}
.hh-hero--solo{grid-template-columns:minmax(0,1fr);}
.hh-slider{position:relative; border-radius:var(--hh-radius); overflow:hidden; min-height:360px; background:var(--hh-ink);}
.hh-slides{display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none;}
.hh-slides::-webkit-scrollbar{display:none;}
.hh-slide{flex:0 0 100%; scroll-snap-align:start; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:center; gap:24px; padding:44px 48px 56px; min-height:360px;}
.hh-slide--img{display:block; padding:0;}
.hh-slide-imglink, .hh-slide-imglink img{display:block; width:100%; height:100%; object-fit:cover;}
.hh-slide-copy{display:flex; flex-direction:column; gap:16px; position:relative; z-index:1;}
.hh-slide-title{font-size:44px !important; line-height:1.08 !important; font-weight:800 !important; letter-spacing:-1px;}
.hh-slide-text{margin:0; font-size:16px; line-height:1.55; max-width:420px; opacity:.75;}
.hh-st-accent .hh-pill{background:var(--hh-ink); color:#FFFFFF;}
.hh-st-accent .hh-btn{background:var(--hh-ink); color:#FFFFFF !important;}
.hh-slide-art{position:relative; height:290px; display:flex; align-items:center; justify-content:center; color:var(--hh-ink);}
.hh-slide-art .hh-ico{position:relative;}
.hh-art-disc{position:absolute; width:270px; height:270px; border-radius:50%; background:var(--hh-accent);}
.hh-art-ring{position:absolute; width:330px; height:330px; border-radius:50%; border:1px solid rgba(255,255,255,.18);}
.hh-st-accent .hh-art-disc{background:#FFFFFF;}
.hh-st-light .hh-art-ring{border-color:var(--hh-line);}
.hh-chip{position:absolute; background:#FFFFFF; color:var(--hh-ink); border-radius:12px; padding:10px 14px; box-shadow:0 10px 30px rgba(0,0,0,.22); display:flex; flex-direction:column; max-width:200px;}
.hh-chip small{font-size:11.5px; color:var(--hh-muted); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.hh-chip b{font-size:17px; font-weight:800;}
.hh-chip--1{left:0; top:34px;}
.hh-chip--2{right:0; bottom:30px;}
.hh-dots{position:absolute; left:48px; bottom:22px; display:flex; gap:6px;}
.hh-dot{width:8px; height:8px; padding:0; border:0; border-radius:4px; background:rgba(255,255,255,.35); cursor:pointer; transition:width .2s ease, background .2s ease;}
.hh-dot.is-on{width:24px; background:#FFFFFF;}
.hh-slider[data-light] .hh-dot{background:rgba(0,0,0,.2);}
.hh-slider[data-light] .hh-dot.is-on{background:var(--hh-ink);}
.hh-arrows{position:absolute; right:20px; bottom:16px; display:flex; gap:8px;}
.hh-arrow{width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(21,22,26,.35); color:#FFFFFF; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.hh-arrow:hover{background:rgba(21,22,26,.6);}

.hh-tiles{display:grid; grid-template-rows:1fr 1fr; gap:16px;}
.hh-tile{position:relative; overflow:hidden; border-radius:var(--hh-radius); padding:24px; display:flex; flex-direction:column; justify-content:space-between; gap:10px; min-height:150px;}
.hh-tile-copy{position:relative; z-index:1; display:flex; flex-direction:column; gap:6px;}
.hh-st-light .hh-kicker{color:var(--hh-accent-ink);}
.hh-tile-title{font-size:22px; font-weight:800; line-height:1.15; max-width:240px;}
.hh-tile-text{font-size:13px; line-height:1.45; opacity:.7;}
.hh-tile-go{position:relative; z-index:1; font-size:14px; font-weight:800;}
.hh-tile-ico{position:absolute; right:-14px; bottom:-14px; opacity:.16;}
.hh-st-light .hh-tile-ico{opacity:.08;}

/* ---------- kategoriler ---------- */
.hh-cats{display:grid; grid-template-columns:repeat(auto-fit, minmax(96px, 1fr)); gap:12px;}
.hh-cat{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;}
.hh-cat-c{width:76px; height:76px; border-radius:50%; background:var(--hh-soft); border:2px solid transparent; display:flex; align-items:center; justify-content:center; color:var(--hh-ink); transition:border-color .15s ease, background .15s ease;}
.hh-cat:hover .hh-cat-c{border-color:var(--hh-accent); background:#FFFFFF;}
.hh-cat-l{font-size:13px; font-weight:600; line-height:1.3;}

/* ---------- geri sayım ---------- */
.hh-timer{display:flex; align-items:center; gap:5px; font-variant-numeric:tabular-nums;}
.hh-timer-l{font-size:12.5px; font-weight:600; color:var(--hh-muted); margin-right:3px;}
.hh-timer b{background:var(--hh-ink); color:#FFFFFF; font-weight:800; font-size:14px; border-radius:8px; padding:5px 8px; min-width:32px; text-align:center;}
.hh-timer i{font-style:normal; font-weight:800;}

/* ---------- ürün kartı ---------- */
.hh-card{display:flex; flex-direction:column; background:var(--hh-card); border:1px solid var(--hh-line); border-radius:16px; overflow:hidden; transition:border-color .15s ease, box-shadow .15s ease; min-width:0;}
.hh-card:hover{border-color:#D6D3CB; box-shadow:0 8px 24px rgba(21,22,26,.07);}
.hh-card-img{position:relative; display:block; aspect-ratio:1/1; background:#FFFFFF; overflow:hidden;}
.hh-card-img img{width:100%; height:100%; object-fit:contain;}
.hh-rank{position:absolute; top:10px; left:10px; width:30px; height:30px; border-radius:50%; background:var(--hh-ink); color:#FFFFFF; font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center;}
.hh-off{position:absolute; top:10px; right:10px; background:var(--hh-accent); color:var(--hh-ink); font-size:12px; font-weight:800; padding:5px 9px; border-radius:999px;}
.hh-card-body{display:flex; flex-direction:column; gap:10px; padding:12px 14px 14px; flex:1;}
.hh-card-name{font-size:13.5px; font-weight:500; line-height:1.38; height:2.76em; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.hh-card-foot{display:flex; align-items:flex-end; justify-content:space-between; gap:8px; margin-top:auto;}
.hh-card-price{display:flex; flex-direction:column; line-height:1.2; font-variant-numeric:tabular-nums;}
.hh-card-price s{font-size:12.5px; color:var(--hh-muted);}
.hh-card-price b{font-size:18px; font-weight:800; letter-spacing:-.3px;}
.hh-card-go{flex:none; width:34px; height:34px; border-radius:50%; background:var(--hh-accent); color:var(--hh-ink); display:flex; align-items:center; justify-content:center; transition:transform .15s ease;}
.hh-card:hover .hh-card-go{transform:translateX(2px);}

/* raylar: yatay kaydırılan ürün dizileri */
.hh-rail{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:2px;}
.hh-rail::-webkit-scrollbar{display:none;}
.hh-rail > .hh-card{scroll-snap-align:start;}
.hh-rail-5 > .hh-card{flex:0 0 calc((100% - 64px) / 5);}
.hh-rail-4 > .hh-card{flex:0 0 calc((100% - 48px) / 4);}
.hh-grid{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:16px;}

/* ---------- güven şeridi ---------- */
.hh-trust{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px;}
.hh-trust-i{display:flex; align-items:center; gap:14px; background:var(--hh-card); border-radius:18px; padding:18px;}
.hh-trust-ico{flex:none; width:44px; height:44px; border-radius:12px; background:var(--hh-soft); color:var(--hh-accent-ink); display:flex; align-items:center; justify-content:center;}
.hh-trust-i b{display:block; font-size:14.5px; font-weight:800;}
.hh-trust-i small{display:block; font-size:12.5px; color:var(--hh-muted); margin-top:2px;}

/* ---------- WhatsApp bandı ---------- */
.hh-wa{display:flex; align-items:center; justify-content:space-between; gap:24px; background:var(--hh-ink); color:#FFFFFF; border-radius:var(--hh-radius); padding:30px 36px;}
.hh-wa-l{display:flex; align-items:center; gap:18px;}
.hh-wa-ico{flex:none; width:56px; height:56px; border-radius:16px; background:var(--hh-accent); color:var(--hh-ink); display:flex; align-items:center; justify-content:center;}
.hh-wa-t{font-size:21px; font-weight:800; line-height:1.2;}
.hh-wa-s{font-size:14px; color:#B9B7B0; margin-top:4px;}
.hh-wa-btn{flex:none; background:#FFFFFF; color:var(--hh-ink) !important; font-weight:800; font-size:15px; padding:14px 22px; border-radius:12px;}
.hh-wa-btn:hover{background:var(--hh-accent);}

/* ---------- kategori rafı ---------- */
.hh-shelf{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,4.3fr); gap:16px;}
.hh-shelf-banner{border-radius:18px; padding:24px; display:flex; flex-direction:column; justify-content:space-between; gap:16px; min-height:300px;}
.hh-shelf-banner .hh-kicker{opacity:.8;}
.hh-shelf-banner.hh-st-light .hh-kicker{opacity:1;}
.hh-shelf-h{display:block; font-size:24px; font-weight:800; line-height:1.15; margin-top:8px;}
.hh-shelf-t{display:block; font-size:13.5px; line-height:1.5; margin-top:8px; opacity:.75;}

/* ---------- tablet ---------- */
@media (max-width: 1100px){
  .hh-rail-5 > .hh-card{flex-basis:calc((100% - 48px) / 4);}
  .hh-rail-4 > .hh-card{flex-basis:calc((100% - 32px) / 3);}
  .hh-grid{grid-template-columns:repeat(4, minmax(0,1fr));}
  .hh-shelf{grid-template-columns:minmax(0,1fr);}
  .hh-shelf-banner{min-height:0; flex-direction:row; align-items:flex-end;}
  .hh-slide-title{font-size:36px !important;}
}

/* ---------- mobil ---------- */
@media (max-width: 720px){
  .hh{padding:12px 0 32px;}
  .hh-wrap{padding:0 14px; gap:20px;}
  .hh-box{padding:16px 14px; border-radius:18px;}
  .hh-head{margin-bottom:12px;}
  .hh-head h2{font-size:20px;}
  .hh-hero{grid-template-columns:minmax(0,1fr); gap:10px;}
  .hh-slider, .hh-slide{min-height:0;}
  .hh-slide{grid-template-columns:minmax(0,1fr); padding:26px 22px 48px;}
  .hh-slide--img{padding:0;}
  .hh-slide-art{display:none;}
  .hh-slide-title{font-size:28px !important;}
  .hh-slide-text{font-size:14.5px;}
  .hh-dots{left:22px; bottom:18px;}
  .hh-arrows{display:none;}
  .hh-tiles{grid-template-rows:none; grid-template-columns:1fr 1fr; gap:10px;}
  .hh-tile{padding:16px; min-height:128px; border-radius:18px;}
  .hh-tile-title{font-size:16px;}
  .hh-tile-text{font-size:12px;}
  .hh-tile-ico .hh-ico{width:90px; height:90px;}
  .hh-cats{display:flex; overflow-x:auto; gap:14px; scrollbar-width:none;}
  .hh-cats::-webkit-scrollbar{display:none;}
  .hh-cat{flex:0 0 72px;}
  .hh-cat-c{width:64px; height:64px;}
  .hh-cat-c .hh-ico{width:28px; height:28px;}
  .hh-cat-l{font-size:12px;}
  .hh-timer b{font-size:13px; padding:4px 6px; min-width:28px;}
  .hh-rail{gap:10px;}
  .hh-rail-5 > .hh-card, .hh-rail-4 > .hh-card{flex-basis:46%;}
  .hh-grid{grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px;}
  .hh-card-body{padding:10px 11px 12px;}
  .hh-card-name{font-size:13px;}
  .hh-card-price b{font-size:16px;}
  .hh-card-go{width:30px; height:30px;}
  .hh-trust{grid-template-columns:1fr 1fr; gap:8px;}
  .hh-trust-i{padding:12px; gap:10px; border-radius:14px;}
  .hh-trust-ico{width:36px; height:36px;}
  .hh-trust-i b{font-size:13px;}
  .hh-trust-i small{font-size:11.5px;}
  .hh-wa{flex-direction:column; align-items:flex-start; gap:14px; padding:22px;}
  .hh-wa-t{font-size:18px;}
  .hh-wa-btn{width:100%; text-align:center;}
  .hh-shelf-banner{padding:18px; border-radius:16px; flex-direction:column; align-items:flex-start;}
  .hh-shelf-h{font-size:19px;}
}
