/* =========================================================================
   HAKKIMIZDA — sayfaya özel tasarım katmanı
   Yükleme sırası: … fe-shell.css → BU DOSYA → fe-responsive.css
   ========================================================================= */

/* ---------- 1. HİKÂYE BANDI (koyu + desen sahnesi) ---------- */
.hk-hikaye{position:relative;overflow:hidden;background:var(--navy);
  padding-block:clamp(60px,7vw,96px);}
.hk-hikaye::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 82% 8%,rgba(99,102,241,.16) 0,rgba(8,15,34,0) 62%);}
.hk-hikaye > .container{position:relative;z-index:2;}
.hk-hikaye-in{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,5vw,64px);align-items:start;}

.hk-soz .eyebrow-mono{color:#a5c4ff;}
.hk-soz h2{color:#fff;font-size:clamp(1.6rem,3vw,2.15rem);margin:10px 0 16px;letter-spacing:-.02em;}
.hk-soz .lede{color:rgba(255,255,255,.86);}
.hk-soz p{color:rgba(255,255,255,.70);margin-top:14px;}

/* duraklar — dikey yol */
.hk-yol{list-style:none;margin:0;padding:0;position:relative;}
.hk-yol::before{content:'';position:absolute;left:11px;top:14px;bottom:14px;width:2px;border-radius:2px;
  background:linear-gradient(to bottom,rgba(150,190,255,.10),rgba(139,92,246,.60),rgba(150,190,255,.10));}
.hk-durak{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:16px;padding:0 0 26px 0;}
.hk-durak:last-child{padding-bottom:0;}
.hk-durak-yil{
  position:relative;z-index:1;display:inline-grid;place-items:center;
  width:24px;height:24px;margin-top:2px;border-radius:50%;
  background:var(--navy);border:2px solid rgba(178,206,255,.55);
  font-size:0;color:transparent;
}
.hk-durak-yil::after{
  content:'';width:7px;height:7px;border-radius:50%;background:#b6a0ff;
  box-shadow:0 0 0 4px rgba(139,92,246,.22);
}
.hk-durak-govde{min-width:0;padding-top:1px;}
.hk-durak-govde > b{display:block;font-family:var(--font-display);font-weight:800;
  color:#fff;font-size:1.02rem;letter-spacing:-.01em;}
.hk-durak-govde > b::before{
  content:attr(data-yil);
}
.hk-durak-govde p{color:rgba(255,255,255,.70);font-size:.92rem;line-height:1.62;margin-top:6px;}
.hk-durak-etiket{display:block;font-family:var(--font-display);font-weight:800;
  font-size:.72rem;letter-spacing:.16em;color:#a5c4ff;margin-bottom:4px;}

/* sahne şeridi — tek tek işlerden ürüne */
.hk-sahne{margin:clamp(34px,5vw,56px) 0 0;padding:0;position:relative;}
.hk-sahne-cv{
  display:block;width:100%;height:clamp(180px,22vw,268px);
  border-radius:var(--r-lg);border:1px solid rgba(255,255,255,.11);
  background:linear-gradient(100deg,rgba(255,255,255,.028),rgba(255,255,255,.055));
}
.hk-sahne-alt{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px;
}
.hk-sahne-alt span{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-weight:600;font-size:.8rem;letter-spacing:.01em;
  color:rgba(255,255,255,.62);
}
.hk-sahne-alt span:nth-child(2){justify-content:center;}
.hk-sahne-alt span:nth-child(3){justify-content:flex-end;}
.hk-sahne-alt i{flex:none;width:7px;height:7px;border-radius:50%;background:rgba(176,168,152,.75);}
.hk-sahne-alt span:nth-child(2) i{background:rgba(150,190,255,.75);}
.hk-sahne-alt span:nth-child(3) i{background:#b6a0ff;box-shadow:0 0 0 4px rgba(139,92,246,.20);}

/* ---------- 2. MİSYON / VİZYON ---------- */
.hk-mv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
.hk-mv-kart{
  position:relative;overflow:hidden;padding:30px 28px;min-height:210px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);
  box-shadow:var(--sh-sm);display:flex;flex-direction:column;gap:8px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.hk-mv-kart:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--brand-200);}
.hk-mv-cv{
  position:absolute;right:4px;bottom:4px;width:clamp(120px,34%,176px);aspect-ratio:1;
  z-index:0;pointer-events:none;opacity:.42;
  -webkit-mask-image:radial-gradient(125% 125% at 100% 100%,#000 0,#000 38%,transparent 84%);
          mask-image:radial-gradient(125% 125% at 100% 100%,#000 0,#000 38%,transparent 84%);
  transition:opacity .35s var(--ease),transform .45s var(--ease);
}
.hk-mv-kart:hover .hk-mv-cv{opacity:.62;transform:scale(1.05);}
.hk-mv-kart > :not(canvas){position:relative;z-index:1;}
.hk-mv-kart h3{font-size:1.3rem;letter-spacing:-.02em;margin:6px 0 0;}
.hk-mv-kart p{color:var(--text);font-size:.98rem;line-height:1.7;margin:0;max-width:34ch;}

/* ---------- 3. DEĞERLER ---------- */
.hk-degerler{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:40px;}
.hk-deger{
  position:relative;overflow:hidden;display:flex;flex-direction:column;gap:9px;
  padding:24px 22px 26px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--bg);box-shadow:var(--sh-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.hk-deger:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--brand-200);}
.hk-deger-cv{
  position:absolute;right:2px;bottom:2px;width:clamp(76px,52%,106px);aspect-ratio:1;
  z-index:0;pointer-events:none;opacity:.40;
  -webkit-mask-image:radial-gradient(125% 125% at 100% 100%,#000 0,#000 36%,transparent 82%);
          mask-image:radial-gradient(125% 125% at 100% 100%,#000 0,#000 36%,transparent 82%);
  transition:opacity .35s var(--ease),transform .45s var(--ease);
}
.hk-deger:hover .hk-deger-cv{opacity:.6;transform:scale(1.06);}
.hk-deger > :not(canvas){position:relative;z-index:1;}
.hk-deger-ic{display:inline-grid;place-items:center;width:40px;height:40px;flex:none;
  border-radius:11px;background:var(--brand-050);color:var(--brand);border:1px solid var(--brand-100);}
.hk-deger h4{font-size:1.05rem;letter-spacing:-.015em;margin:2px 0 0;}
.hk-deger p{font-size:.885rem;line-height:1.6;color:var(--text);margin:0;}

/* ---------- 4. KOYU TEMA ---------- */
[data-theme="dark"] .hk-mv-kart{background:var(--bg);border-color:var(--line);}
[data-theme="dark"] .hk-mv-cv{opacity:.6;}
[data-theme="dark"] .hk-mv-kart:hover .hk-mv-cv{opacity:.86;}
[data-theme="dark"] .hk-durak-yil{background:#0d1730;}
[data-theme="dark"] .hk-deger{background:var(--bg);border-color:var(--line);}
[data-theme="dark"] .hk-deger-ic{background:rgba(96,150,255,.14);border-color:rgba(96,150,255,.26);color:#8fb4ff;}
[data-theme="dark"] .hk-deger-cv{opacity:.58;}
[data-theme="dark"] .hk-deger:hover .hk-deger-cv{opacity:.84;}

/* ---------- 5. DUYARLILIK ---------- */
@media (max-width:900px){
  .hk-hikaye-in{grid-template-columns:1fr;gap:34px;}
  .hk-mv{grid-template-columns:1fr;}
  .hk-degerler{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hk-mv-kart{min-height:0;}
}
@media (max-width:560px){
  .hk-mv-kart{padding:24px 22px;}
  .hk-mv-cv{width:clamp(104px,38%,140px);}
  .hk-durak{gap:13px;padding-bottom:22px;}
  .hk-degerler{grid-template-columns:1fr;gap:13px;}
  .hk-deger{padding:20px 20px 22px;}
  .hk-sahne-alt{grid-template-columns:1fr;gap:7px;}
  .hk-sahne-alt span:nth-child(2),.hk-sahne-alt span:nth-child(3){justify-content:flex-start;}
}