/* ==========================================================================
   FIBERKO — ANA SAYFA: PROFİL TİPLERİ (.fkp)
   Koyu "blueprint" bant: solda tip listesi (mini kesit ikonu + kalan süre
   çubuğu), sağda cam kart (cetvelli çizim alanı + bilgi/ölçü kartları).
   Yalnız ana sayfada yüklenir (home/index @push('styles')).
   Renkler değişkenden: zemin --c-ink, vurgu --c-primary; yalnız beyaz
   saydamlıkları sabit.
   ========================================================================== */
.fkp{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(70px, 8vw, 128px) 0 clamp(64px, 7vw, 112px);
  background:
    radial-gradient(90% 62% at 78% 6%, color-mix(in srgb, var(--c-primary) 10%, transparent) 0%, transparent 62%),
    var(--c-ink);
  color:#fff;
}
.fkp__grid{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.034) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.034) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.06) 0 1px, transparent 1px 150px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 150px);
  -webkit-mask-image:radial-gradient(ellipse 82% 74% at 56% 44%, #000 18%, rgba(0,0,0,.42) 58%, transparent 92%);
          mask-image:radial-gradient(ellipse 82% 74% at 56% 44%, #000 18%, rgba(0,0,0,.42) 58%, transparent 92%);
}
.fkp::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg, var(--c-ink) 0%, transparent 16%),
    linear-gradient(0deg,   var(--c-ink) 0%, transparent 14%);
  opacity:.9;
}
.fkp::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:40%;
  z-index:0; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 122%, color-mix(in srgb, var(--c-primary) 13%, transparent) 0%, transparent 72%);
}
.fkp__in{ position:relative; z-index:1; }

/* --- Başlık --- */
.fkp__head{ margin-bottom:clamp(34px, 4vw, 56px); }
.fkp__head .eyebrow{ color:var(--c-primary); }
.fkp__head .eyebrow::before{ background:var(--c-primary); }
.fkp__head h2{
  color:#fff; margin:0;
  font-size:clamp(1.95rem, 3.4vw, 2.95rem);
  line-height:1.1; letter-spacing:-.028em; text-wrap:balance;
}
.fkp__head .fkp__sub{
  max-width:660px; margin:18px auto 0;
  color:rgba(255,255,255,.56); font-size:1rem; line-height:1.65; text-wrap:pretty;
}

.fkp__body{
  display:grid; grid-template-columns:minmax(240px, 288px) minmax(0, 1fr);
  gap:clamp(22px, 3vw, 44px); align-items:center;
}

/* --- Sol: tip listesi --- */
.fkp__nav{ display:flex; flex-direction:column; gap:6px; }
.fkp__t{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:auto 34px minmax(0,1fr); align-items:center; gap:14px;
  width:100%; padding:10px 16px 10px 14px; margin:0;
  font-family:inherit; text-align:start; cursor:pointer;
  color:rgba(255,255,255,.5);
  background:transparent; border:1px solid transparent; border-radius:14px;
  transition:color .28s var(--ease), background-color .28s var(--ease), border-color .28s var(--ease);
}
.fkp__t:hover{ color:rgba(255,255,255,.86); background:rgba(255,255,255,.03); }
.fkp__t.is-active{
  color:#fff;
  background:linear-gradient(90deg, color-mix(in srgb, var(--c-primary) 20%, transparent), rgba(255,255,255,.02));
  border-color:color-mix(in srgb, var(--c-primary) 38%, transparent);
}
[dir="rtl"] .fkp__t.is-active{
  background:linear-gradient(270deg, color-mix(in srgb, var(--c-primary) 20%, transparent), rgba(255,255,255,.02));
}
.fkp__t:focus-visible{ outline:2px solid var(--c-primary); outline-offset:2px; }
.fkp__no{
  font-family:var(--f-head); font-weight:600; font-size:.7rem; letter-spacing:.14em;
  font-variant-numeric:tabular-nums; color:rgba(255,255,255,.32);
  transition:color .28s var(--ease);
}
.fkp__t.is-active .fkp__no{ color:var(--c-primary); }
.fkp__ico{
  width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  transition:background-color .28s var(--ease), border-color .28s var(--ease), color .28s var(--ease);
}
.fkp__ico .kesit-mini{ width:24px; height:24px; display:block; }
.fkp__t.is-active .fkp__ico{
  color:#fff;
  background:color-mix(in srgb, var(--c-primary) 42%, transparent);
  border-color:var(--c-primary);
}
.fkp__lbl{
  font-family:var(--f-head); font-weight:600;
  font-size:clamp(.98rem, 1.15vw, 1.08rem); line-height:1.2; letter-spacing:-.012em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fkp__prog{
  position:absolute; inset-inline:14px; bottom:0; height:2px; border-radius:2px;
  transform:scaleX(0); transform-origin:left center; opacity:0;
  background:var(--c-primary);
  box-shadow:0 0 10px color-mix(in srgb, var(--c-primary) 70%, transparent);
}
[dir="rtl"] .fkp__prog{ transform-origin:right center; }
.fkp__t.is-active .fkp__prog{ opacity:1; animation:fkp-prog 5.2s linear forwards; }
.fkp.is-paused .fkp__t.is-active .fkp__prog{ animation-play-state:paused; }
@keyframes fkp-prog{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* --- Sağ: cam kart --- */
.fkp__stage{
  position:relative; display:grid;
  padding:clamp(12px, 1.4vw, 20px);
  border-radius:var(--r-lg);
  background:linear-gradient(155deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.014) 55%, rgba(255,255,255,.03) 100%);
  border:1px solid color-mix(in srgb, var(--c-primary) 32%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 40px 90px -40px color-mix(in srgb, var(--c-primary) 30%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
/* Köşe işaretleri */
.fkp__marks{
  position:absolute; inset:-7px; z-index:3; pointer-events:none;
  --m:var(--c-primary);
  background:
    linear-gradient(var(--m), var(--m)) left   top    / 16px 2px no-repeat,
    linear-gradient(var(--m), var(--m)) left   top    / 2px 16px no-repeat,
    linear-gradient(var(--m), var(--m)) right  top    / 16px 2px no-repeat,
    linear-gradient(var(--m), var(--m)) right  top    / 2px 16px no-repeat,
    linear-gradient(var(--m), var(--m)) left   bottom / 16px 2px no-repeat,
    linear-gradient(var(--m), var(--m)) left   bottom / 2px 16px no-repeat,
    linear-gradient(var(--m), var(--m)) right  bottom / 16px 2px no-repeat,
    linear-gradient(var(--m), var(--m)) right  bottom / 2px 16px no-repeat;
  opacity:.85;
}

/* Tüm paneller aynı hücrede: kart yüksekliği tip değişiminde zıplamaz */
.fkp__pane{
  grid-area:1 / 1; min-width:0;
  display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr);
  gap:clamp(18px, 2.6vw, 38px); align-items:stretch;
  visibility:hidden; opacity:0; pointer-events:none;
}
.fkp__pane.is-active{ visibility:visible; opacity:1; pointer-events:auto; }

/* Çizim alanı: ince ızgara + cetveller */
.fkp__fig{
  position:relative; margin:0; min-width:0; overflow:hidden;
  display:flex; flex-direction:column;
  padding:46px 20px 18px 40px;
  border-radius:calc(var(--r-lg) - 10px);
  border:1px solid rgba(255,255,255,.08);
  background:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.03) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 24px),
    radial-gradient(70% 60% at 50% 55%, color-mix(in srgb, var(--c-primary) 12%, transparent), transparent 75%),
    color-mix(in srgb, var(--c-ink) 55%, transparent);
}
[dir="rtl"] .fkp__fig{ padding:46px 40px 18px 20px; }
.fkp__ruler{ position:absolute; pointer-events:none; }
.fkp__ruler--x{
  top:0; inset-inline:28px 0; height:14px;
  border-bottom:1px solid rgba(255,255,255,.12);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.45) 0 1px, transparent 1px 60px) left bottom / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 1px, transparent 1px 12px) left bottom / 100% 5px no-repeat;
}
.fkp__ruler--y{
  top:28px; bottom:0; inset-inline-start:0; width:14px;
  border-inline-end:1px solid rgba(255,255,255,.12);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.45) 0 1px, transparent 1px 60px) right top / 9px 100% no-repeat,
    repeating-linear-gradient(0deg, rgba(255,255,255,.2) 0 1px, transparent 1px 12px) right top / 5px 100% no-repeat;
}
[dir="rtl"] .fkp__ruler--y{ background-position:left top, left top; }
.fkp__meta{
  position:absolute; top:22px; inset-inline:40px 18px;
  display:flex; justify-content:space-between; gap:12px;
  font-family:var(--f-head); font-size:.62rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  color:rgba(255,255,255,.42);
}
.fkp__meta span{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.fkp__meta-l{ font-style:normal; }
.fkp__meta span:last-child{ flex:0 1 auto; color:rgba(255,255,255,.3); }
.fkp__meta b{ color:var(--c-primary); font-weight:700; margin-inline-end:8px; letter-spacing:.1em; }
/* Arapça harfler bitişik yazılır: harf aralığı bağları koparmasın */
[dir="rtl"] .fkp__meta, [dir="rtl"] .fkp__meta b, [dir="rtl"] .fkp__specs-t{ letter-spacing:0; font-size:.72rem; }
.fkp__art{ flex:1; display:grid; place-items:center; min-height:0; }
.fkp__art .kesit{
  display:block; width:min(100%, 440px); height:auto; aspect-ratio:1;
  color:rgba(255,255,255,.9); overflow:visible;
}
.kesit .kesit__eksen{ stroke:var(--c-primary); opacity:.8; }
.kesit .kesit__harf{ font-family:var(--f-head); letter-spacing:.02em; }

/* Bilgi bloğu */
.fkp__info{
  min-width:0; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(4px, 1vw, 14px) clamp(4px, .9vw, 12px) clamp(4px, .6vw, 8px) 0;
}
[dir="rtl"] .fkp__info{ padding-inline:clamp(4px, .9vw, 12px) 0; }
.fkp__name{
  margin:0 0 12px; color:#fff;
  font-family:var(--f-head); font-weight:700;
  font-size:clamp(1.7rem, 2.5vw, 2.35rem); line-height:1.05; letter-spacing:-.03em;
}
.fkp__lead{
  margin:0 0 24px; color:rgba(255,255,255,.64);
  font-size:1rem; line-height:1.65; text-wrap:pretty;
}
.fkp__specs-t{
  display:flex; align-items:center; gap:12px; margin:0 0 10px;
  font-family:var(--f-head); font-size:.66rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.44);
}
.fkp__specs-t::after{ content:''; flex:1; height:1px; background:rgba(255,255,255,.1); }
.fkp__specs{ margin:0; display:grid; gap:8px; }
.fkp__spec{
  display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:14px;
  padding:10px 16px 10px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
}
[dir="rtl"] .fkp__spec{ padding:10px 10px 10px 16px; }
.fkp__spec:hover{
  border-color:color-mix(in srgb, var(--c-primary) 50%, transparent);
  background:color-mix(in srgb, var(--c-primary) 8%, transparent);
}
.fkp__sym{
  width:38px; height:38px; border-radius:9px; display:grid; place-items:center;
  font-family:var(--f-head); font-weight:700; font-size:.92rem; letter-spacing:0;
  color:#fff;
  background:color-mix(in srgb, var(--c-primary) 30%, transparent);
  border:1px solid color-mix(in srgb, var(--c-primary) 60%, transparent);
}
.fkp__sym.is-t{ font-style:italic; }
.fkp__spec dt{ margin:0; font-size:.84rem; line-height:1.3; color:rgba(255,255,255,.62); }
.fkp__spec dd{
  margin:0; color:#fff; white-space:nowrap;
  font-family:var(--f-head); font-weight:700; letter-spacing:-.015em;
  font-size:clamp(1.02rem, 1.35vw, 1.22rem); font-variant-numeric:tabular-nums;
}
.fkp__none{
  display:flex; align-items:center; gap:12px; margin:0;
  padding:14px 16px; border-radius:12px;
  border:1px dashed rgba(255,255,255,.18);
  color:rgba(255,255,255,.66); font-size:.93rem; line-height:1.5;
}
.fkp__none i{ color:var(--c-primary); font-size:1rem; flex:0 0 auto; }

.fkp__go{
  margin-top:clamp(18px, 2vw, 26px);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:8px 8px 8px 24px; border-radius:var(--r-pill);
  background:var(--c-primary); color:#fff;
  font-family:var(--f-head); font-weight:600; font-size:.95rem; letter-spacing:.01em;
  transition:background-color .24s var(--ease), box-shadow .24s var(--ease);
}
[dir="rtl"] .fkp__go{ padding:8px 24px 8px 8px; }
.fkp__go:hover{
  color:#fff; background:var(--c-primary-d);
  box-shadow:0 12px 30px -12px color-mix(in srgb, var(--c-primary) 80%, transparent);
}
.fkp__go:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.fkp__go .arr{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.16); font-size:.9rem;
  transition:transform .24s var(--ease), background-color .24s var(--ease);
}
.fkp__go:hover .arr{ transform:translateX(3px); background:rgba(255,255,255,.24); }
[dir="rtl"] .fkp__go .arr{ transform:scaleX(-1); }
[dir="rtl"] .fkp__go:hover .arr{ transform:scaleX(-1) translateX(3px); }

/* --- Geçiş animasyonları (tip değişiminde yeniden başlar) --- */
.fkp__pane.is-active .fkp__art{ animation:fkp-art .6s var(--ease) both; }
.fkp__pane.is-active .kesit__cizgi{
  stroke-dasharray:1; stroke-dashoffset:1;
  animation:fkp-draw 1.15s var(--ease) .08s forwards;
}
.fkp__pane.is-active .kesit__eksen{ animation:fkp-fade .5s var(--ease) .05s both; }
.fkp__pane.is-active .kesit__dolgu{ animation:fkp-fade .6s var(--ease) .6s both; }
.fkp__pane.is-active .kesit__olcu,
.fkp__pane.is-active .kesit__harf{ animation:fkp-fade .5s var(--ease) .8s both; }
.fkp__pane.is-active .fkp__meta{ animation:fkp-fade .4s var(--ease) both; }
.fkp__pane.is-active .fkp__name{ animation:fkp-up .5s var(--ease) .04s both; }
.fkp__pane.is-active .fkp__lead{ animation:fkp-up .5s var(--ease) .1s both; }
.fkp__pane.is-active .fkp__specs-t,
.fkp__pane.is-active .fkp__none{ animation:fkp-up .5s var(--ease) .16s both; }
.fkp__pane.is-active .fkp__spec{ animation:fkp-up .48s var(--ease) both; }
.fkp__pane.is-active .fkp__spec:nth-child(1){ animation-delay:.2s; }
.fkp__pane.is-active .fkp__spec:nth-child(2){ animation-delay:.26s; }
.fkp__pane.is-active .fkp__spec:nth-child(3){ animation-delay:.32s; }
.fkp__pane.is-active .fkp__spec:nth-child(4){ animation-delay:.38s; }
.fkp__pane.is-active .fkp__go{ animation:fkp-up .5s var(--ease) .34s both; }
@keyframes fkp-draw{ to{ stroke-dashoffset:0; } }
@keyframes fkp-fade{ from{ opacity:0; } }
@keyframes fkp-art{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:none; } }
@keyframes fkp-up{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

/* --- Orta ekran: liste yatay şerit olur --- */
@media (max-width:1100px){
  .fkp__body{ grid-template-columns:minmax(0,1fr); gap:20px; }
  .fkp__nav{
    flex-direction:row; gap:8px; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x proximity; scrollbar-width:none;
    padding:2px 2px 6px;
  }
  .fkp__nav::-webkit-scrollbar{ display:none; }
  .fkp__t{
    flex:0 0 auto; width:auto; scroll-snap-align:center;
    grid-template-columns:30px auto; gap:10px;
    padding:6px 18px 6px 6px; border-radius:var(--r-pill);
    border-color:rgba(255,255,255,.1);
  }
  [dir="rtl"] .fkp__t{ padding:6px 6px 6px 18px; }
  .fkp__no{ display:none; }
  .fkp__ico{ width:30px; height:30px; border-radius:50%; }
  .fkp__ico .kesit-mini{ width:20px; height:20px; }
  .fkp__lbl{ font-size:.95rem; }
  .fkp__prog{ inset-inline:18px; bottom:3px; }
}
@media (max-width:760px){
  .fkp__pane{ grid-template-columns:minmax(0,1fr); gap:18px; }
  .fkp__fig{ padding:42px 14px 12px 34px; }
  [dir="rtl"] .fkp__fig{ padding:42px 34px 12px 14px; }
  .fkp__meta{ top:20px; inset-inline:34px 14px; }
  .fkp__art .kesit{ width:min(100%, 330px); }
  .fkp__info{ padding:0 6px 6px; }
  [dir="rtl"] .fkp__info{ padding:0 6px 6px; }
}
@media (max-width:560px){
  .fkp__head .fkp__sub{ font-size:.93rem; }
  .fkp__stage{ padding:10px; }
  .fkp__marks{ inset:-5px; }
  .fkp__fig{ padding:38px 8px 8px 26px; }
  [dir="rtl"] .fkp__fig{ padding:38px 26px 8px 8px; }
  .fkp__ruler--x{ inset-inline:22px 0; height:11px; }
  .fkp__ruler--y{ top:22px; width:11px; }
  .fkp__meta{ top:17px; inset-inline:28px 10px; font-size:.58rem; letter-spacing:.08em; }
  .fkp__meta-l{ display:none; }
  .fkp__name{ font-size:1.6rem; }
  .fkp__lead{ font-size:.95rem; margin-bottom:18px; }
  .fkp__spec{ grid-template-columns:32px minmax(0,1fr) auto; gap:10px; padding:8px 12px 8px 8px; }
  [dir="rtl"] .fkp__spec{ padding:8px 8px 8px 12px; }
  .fkp__sym{ width:32px; height:32px; font-size:.84rem; }
  .fkp__spec dt{ font-size:.8rem; }
  .fkp__spec dd{ font-size:1rem; }
}

/* --- Hareket azaltma --- */
@media (prefers-reduced-motion: reduce){
  .fkp__pane.is-active .fkp__art,
  .fkp__pane.is-active .fkp__meta,
  .fkp__pane.is-active .fkp__name,
  .fkp__pane.is-active .fkp__lead,
  .fkp__pane.is-active .fkp__specs-t,
  .fkp__pane.is-active .fkp__none,
  .fkp__pane.is-active .fkp__spec,
  .fkp__pane.is-active .fkp__go,
  .fkp__pane.is-active .kesit__cizgi,
  .fkp__pane.is-active .kesit__dolgu,
  .fkp__pane.is-active .kesit__olcu,
  .fkp__pane.is-active .kesit__harf,
  .fkp__pane.is-active .kesit__eksen{ animation:none !important; }
  .fkp__pane.is-active .kesit__cizgi{ stroke-dasharray:none; stroke-dashoffset:0; }
  .fkp__t.is-active .fkp__prog{ animation:none; opacity:0; }
  .fkp__t, .fkp__ico, .fkp__spec, .fkp__go, .fkp__go .arr{ transition:none; }
}