kullanıyor, onları etkilemesin */
.stat > span{
display:block; margin-top:.65em; font-size:var(--fs-body); line-height:1.4;
color:var(--on-dark-2);
}
.light .stat > span, .grey .stat > span{ color:var(--on-light-2); }
@media(max-width:760px){ .stats{ grid-template-columns:repeat(2,1fr); gap:38px 20px; } }
/* ---------- 10. Tam genişlik görsel bloğu (Apple "showcase") ---------- */
.showcase{ text-align:center; }
/* Not: bu sarmalayıcılar gövde puntosunda olduğu için genişlik px ile verilir;
`ch` burada başlık puntosunu değil gövde puntosunu baz alır ve başlığı kırar. */
.showcase__head{ max-width:900px; margin:0 auto clamp(30px,3.6vw,48px); }
.showcase__copy{ max-width:760px; margin:clamp(18px,2vw,26px) auto 0; }
.head-narrow{ max-width:640px; margin-inline:auto; }
.head-mid{ max-width:780px; margin-inline:auto; }
.head-wide{ max-width:900px; margin-inline:auto; }
/* `.showcase{text-align:center}` yazıyı ortalıyor ama `.btns` bir flex kabı
ve `justify-content` varsayılanı `flex-start`, düğmeler sola yaslı
kalıyordu. */
.showcase .btns{ margin-top:clamp(24px,2.6vw,34px); justify-content:center; }
.showcase__media{
margin-top:clamp(40px,5vw,68px);
border-radius:var(--r-lg); overflow:hidden;
box-shadow:0 40px 90px -40px rgba(0,0,0,.6);
}
.showcase__media img{ width:100%; height:auto; }
/* İki sütunlu anlatım */
.duo{
display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(26px,3vw,40px); margin-top:clamp(40px,5vw,68px);
}
@media(max-width:820px){ .duo{ grid-template-columns:1fr; } }
.duo__item{
background:var(--panel); border-radius:var(--r-lg);
padding:clamp(28px,3.4vw,46px); text-align:left;
}
.light .duo__item, .grey .duo__item{ background:var(--grey); }
.grey .duo__item{ background:var(--white); }
.duo__item h3{ margin-bottom:.5em; }
/* ---------- 11. Hizmet kartları ---------- */
.cards{
display:grid; grid-template-columns:repeat(6,1fr);
gap:clamp(16px,1.8vw,24px);
}
.card{
position:relative; grid-column:span 2; isolation:isolate;
display:flex; flex-direction:column;
min-height:300px; padding:clamp(28px,3vw,40px);
background:var(--panel); border-radius:var(--r-lg);
overflow:hidden;
transition:transform .4s var(--ease), background .4s var(--ease),
border-color .4s var(--ease);
}
/* KOYU BÖLÜMDEKİ KARTLAR.
Düz tek renkti (--panel) ve arkasındaki kırılmış yüzeyin üstünde yassı
duruyordu: desen hareket ederken kartlar hareketsiz dikdörtgenler gibi
kalıyordu. Üstten alta hafif bir geçiş, karta hacim veriyor ve zeminin
diliyle aynı aileye sokuyor.
Yön açık bölümdekiyle aynı (158deg) ki iki bölüm arasında geçiş yaparken
ışık hep aynı yerden geliyormuş gibi okunsun.
Kenarlık çok düşük: koyu üstünde koyu bir çerçeve, gölgeye göre daha temiz
bir ayrım veriyor. */
.dark .card{
background:linear-gradient(158deg, #1b2740 0%, #131b2b 42%, #0d1119 100%);
border:1px solid rgba(255,255,255,.055);
}
.dark .card:hover{
background:linear-gradient(158deg, #223052 0%, #172136 42%, #0f141e 100%);
border-color:rgba(49,162,220,.28);
}
/* Açık bölümdeki kartlar düz beyazdı ve gri zeminde kaybolyordu; sınırları
ancak gölgeden seçiliyordu. Çok açık maviden beyaza bir geçiş, kartı
zeminden ayırıyor ve marka rengini yüzeye taşıyor.
Ton BİLEREK çok düşük: #eef7fc, markanın #31a2dc mavisinin yaklaşık %8'lik
bir karışımı. Daha doygunu, metin kartlarını "uyarı kutusu" gibi gösteriyor.
Geçiş 62%'de beyaza tamamlanıyor ki kartın alt yarısındaki paragraf düz
beyaz üstünde kalsın — okuma alanında renk oynaması istemiyoruz. */
.grey .card{
background:linear-gradient(158deg, #eef7fc 0%, #f7fbfe 34%, var(--white) 62%);
}
/* Üzerine gelince mavi biraz daha belirginleşiyor: hareketin (translateY)
yanında rengin de tepki vermesi, kartın tıklanabilir olduğunu söylüyor. */
.grey .card:hover{
background:linear-gradient(158deg, #e4f2fb 0%, #f2f9fd 34%, var(--white) 66%);
}
.card:hover{ transform:translateY(-6px); }
/* Kartın sağ üstünde belli belirsiz filigran ikon.
Tamamen kart içinde durur — kenardan taşıp kesilirse bozuk görünüyor. */
.card__wm{
position:absolute; z-index:0; pointer-events:none;
right:clamp(20px, 6%, 40px); top:clamp(20px, 7%, 40px);
width:clamp(96px, 27%, 150px); aspect-ratio:1; height:auto;
color:#fff; opacity:.07; stroke-width:.7;
transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.grey .card__wm, .light .card__wm{ color:var(--ink); opacity:.06; }
.card:hover .card__wm{ opacity:.13; transform:scale(1.06); }
/* img hariç: kapak görseli absolute kalmalı, yoksa metni aşağı iter */
.card > *:not(.card__wm):not(img){ position:relative; z-index:2; }
.card h3{ margin-top:auto; padding-top:1.2rem; }
.card p{ margin-top:.6rem; font-size:var(--fs-body); color:var(--on-dark-2); line-height:1.45; }
.grey .card p{ color:var(--on-light-2); }
.card .arrow{ margin-top:1.15rem; }
.card--feature{
grid-column:span 6; min-height:min(66vh,520px);
justify-content:flex-end; color:#fff;
}
.card--feature img{
position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover;
transform:scale(1.02); transition:transform 1.1s var(--ease);
}
.card--feature::after{
content:""; position:absolute; inset:0; z-index:1;
background:linear-gradient(180deg, rgba(0,0,0,.12) 25%, rgba(0,0,0,.86) 100%);
}
.card--feature > *{ position:relative; z-index:2; }
.card--feature:hover img{ transform:scale(1.06); }
.card--feature h3{ font-size:var(--fs-h2); }
.card--feature p{ color:rgba(255,255,255,.9); max-width:640px; }
.card--half{ grid-column:span 3; }
/* Metni uzun kartlar: ikon kutucuk içinde üstte, içerik yukarıdan akar.
Filigran ikon burada başlıkla çakışıyordu. */
.card--ust{ justify-content:flex-start; }
.card--ust h3{ margin-top:0; padding-top:0; }
.card--ust p{ margin-top:.7rem; }
.card__ico{
display:grid; place-items:center; flex:none;
width:clamp(44px,3.6vw,54px); aspect-ratio:1;
margin-bottom:1.15rem;
border-radius:14px;
background:rgba(49,162,220,.13);
border:1px solid rgba(49,162,220,.26);
color:var(--blue);
transition:background .3s var(--ease), transform .3s var(--ease);
}
.card__ico svg{ width:54%; height:54%; stroke-width:1.5; }
.card:hover .card__ico{ background:rgba(49,162,220,.22); transform:translateY(-2px); }
.grey .card__ico, .light .card__ico, .light-soft .card__ico{ color:var(--blue-deep); }
@media(max-width:1000px){
.cards{ grid-template-columns:repeat(2,1fr); }
.card, .card--half{ grid-column:span 1; }
.card--feature{ grid-column:span 2; }
}
@media(max-width:620px){
.cards{ grid-template-columns:1fr; }
.card, .card--half, .card--feature{ grid-column:span 1; }
.card--feature{ min-height:440px; }
}
/* ---------- 12. Sektörler ---------- */
.sectors{
display:grid; grid-template-columns:repeat(4,1fr);
gap:clamp(14px,1.6vw,22px);
}
.sector{
position:relative; isolation:isolate; /* negatif z-index'li görsel bölümün arkasına düşmesin */
aspect-ratio:1/1.2; overflow:hidden;
border-radius:var(--r); display:flex; align-items:flex-end;
padding:clamp(20px,2vw,28px); color:#fff;
}
.sector img{
position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover;
filter:grayscale(1) brightness(.62); transform:scale(1.02);
transition:transform 1s var(--ease), filter .5s var(--ease);
}
.sector::after{
content:""; position:absolute; inset:0; z-index:1;
background:linear-gradient(180deg,transparent 35%, rgba(0,0,0,.82));
}
.sector:hover img{ transform:scale(1.08); filter:grayscale(0) brightness(.72); }
.sector b{ position:relative; z-index:2; font-size:var(--fs-h4); font-weight:600; letter-spacing:-.02em; }
@media(max-width:1000px){ .sectors{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .sectors{ grid-template-columns:1fr; } .sector{ aspect-ratio:16/10; } }
/* ---------- 13. Neden not FM ---------- */
.reasons{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(30px,3.4vw,52px); }
@media(max-width:760px){ .reasons{ grid-template-columns:1fr; } }
.reason__no{
display:inline-flex; align-items:center; justify-content:center;
width:44px; height:44px; border-radius:50%;
background:var(--blue); color:#fff; font-size:var(--fs-body); font-weight:600;
margin-bottom:1rem;
}
.reason h3{ margin-bottom:.45em; }
/* ---------- 14. Liste ---------- */
.checks{ margin-top:clamp(24px,2.6vw,34px); display:grid; gap:14px; text-align:left; }
.checks li{
position:relative; padding-left:2rem; font-size:var(--fs-body); line-height:1.45;
color:var(--on-dark-2);
}
.light .checks li, .grey .checks li{ color:var(--on-light-2); }
.checks li strong{ color:var(--on-dark); font-weight:600; }
.light .checks li strong, .grey .checks li strong{ color:var(--on-light); }
.checks li::before{
content:""; position:absolute; left:0; top:.42em;
width:20px; height:20px; border-radius:50%; background:var(--blue);
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
/* ---------- 15. Blog ---------- */
.posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,24px); }
@media(max-width:880px){ .posts{ grid-template-columns:1fr; } }
.post{
background:var(--white); border-radius:var(--r-lg);
padding:clamp(26px,2.8vw,38px); display:flex; flex-direction:column; min-height:270px;
transition:transform .35s var(--ease);
}
.dark .post, .panel .post{ background:var(--panel); }
.post:hover{ transform:translateY(-5px); }
.post__cat{ font-size:var(--fs-small); font-weight:600; color:var(--blue-deep); margin-bottom:.9rem; }
.dark .post__cat{ color:var(--blue); }
.post h3{ font-size:var(--fs-h4); line-height:1.2; }
.post p{ margin-top:.7rem; font-size:var(--fs-body); color:var(--on-light-2); line-height:1.45; }
.dark .post p{ color:var(--on-dark-2); }
.post .arrow{ margin-top:auto; padding-top:1.4rem; }
/* ---------- 15b. Dalga geçişi (açık bölümden siyaha) ---------- */
.wave-sep{ position:relative; line-height:0; margin-top:-1px; }
.wave-sep svg{
display:block; width:100%;
height:clamp(58px, 7.5vw, 128px);
}
.wave-sep__fill{ fill:var(--grey); }
.wave-sep__line{
fill:none; stroke:var(--blue); stroke-width:2.5; opacity:.42;
vector-effect:non-scaling-stroke;
}
.wave-sep__line--soft{ stroke:rgba(255,255,255,.16); stroke-width:1.5; }
/* Alttaki geçiş: aynı dalga dikeyde ve yatayda çevrilir ki tekrar gibi durmasın */
.wave-sep--bottom{ margin-top:0; margin-bottom:-1px; transform:scale(-1,-1); }
.has-wave{ padding-top:0; }
.has-wave-bottom{ padding-bottom:0; }
/* ---------- 16. CTA ---------- */
.cta__tel{
display:inline-block; margin-top:.35em;
font-size:clamp(2.1rem,5vw,3.4rem); font-weight:700; letter-spacing:-.03em; color:var(--blue);
}
.cta__tel:hover{ color:var(--blue-lift); }
/* ==========================================================================
16a. HQ Paneli — canlı görünen yönetim ekranı
Yapı ve etiketler notFM HQ panelinin kendisinden alındı.
========================================================================== */
/* Panel her zaman koyu — bir ekran görüntüsü gibi okunsun.
Açık zeminli bölümde durduğunda kontrast daha da güçlü oluyor. */
.hq{
max-width:1180px; margin:clamp(38px,4.5vw,64px) auto 0;
background:linear-gradient(180deg, #10161d, #0a0e13);
border:1px solid rgba(255,255,255,.1);
border-radius:clamp(16px,1.6vw,22px);
box-shadow:0 44px 90px -38px rgba(5,12,22,.45);
overflow:hidden; text-align:left;
color:var(--on-dark);
}
/* Açık bölümde kartlar beyaz zeminde beyaz kalınca kutu görünmüyordu.
Gri yüzey + ince kenar: kutular net, "Sesin tüm katmanları" ile aynı okuma. */
/* Kartlar düz griydi (--grey) ve aynı ailedeki zeminin üstünde sınırları
ancak kenarlıktan seçiliyordu. Çok açık maviden beyaza bir geçiş hem kartı
ayırıyor hem marka rengini yüzeye taşıyor.
İlk denemede ton çok düşüktü (#eef7fc): kart normalde neredeyse beyaz
görünüyor, karakterini ancak üzerine gelince kazanıyordu. Ziyaretçilerin
çoğu hiçbir kartın üzerine gelmiyor — yani rengi görmeden geçiyorlardı.
Varsayılan hâl artık eski hover seviyesinin de üstünde; hover ondan bir
adım daha ileri gidiyor, böylece etkileşim yine hissediliyor.
Geçiş 66%'da beyaza tamamlanıyor — kartın alt yarısındaki paragraf düz
beyaz üstünde kalsın, okuma alanında renk oynamasın diye. */
.light-soft .card{
background:linear-gradient(158deg, #d8ebfa 0%, #ecf6fd 36%, #ffffff 66%);
border:1px solid rgba(49,162,220,.22);
}
/* Üzerine gelince mavi bir kademe daha koyulaşıyor: yükselme hareketinin
yanında rengin de tepki vermesi kartın etkileşimli olduğunu söylüyor. */
.light-soft .card:hover{
background:linear-gradient(158deg, #c5e2f7 0%, #e2f1fc 36%, #ffffff 70%);
border-color:rgba(49,162,220,.36);
}
/* Kart ızgarası, içinde bulunduğu geniş kabın (--maxw-wide 1440px) tamamını
kaplıyordu; altı kart yan yana dizilince satırlar ekranın iki ucuna
yapışıyor ve metin blokları gereğinden uzun oluyordu. Metin genişliğine
(--maxw 1180px) çekilip ortalandı — okuma satırı kısalıyor, kartlar
sayfanın geri kalanıyla aynı hizaya geliyor. */
/* Kart ızgaraları geniş kabın (--maxw-wide 1440px) tamamını kaplıyordu; 1900
piksellik bir ekranda kartlar iki uca yapışıyor ve satırlar okunamayacak
kadar uzuyordu. Metin genişliğine çekilip ortalandılar.
.showcase'e özel değil, GENEL: aynı sorun sayfadaki bütün kart bloklarında
vardı, tek tek yakalamak yerine kuralı yukarı aldım. */
.wrap-wide .cards, .showcase .cards{
max-width:var(--maxw);
margin-inline:auto;
}
/* ── İMLEÇ SPOT IŞIĞI ──────────────────────────────────────────────────────
Kartlar durağandı ve üzerine gelince yalnızca hafifçe yükseliyordu.
Aradığımız "karakter" bu: imlecin bulunduğu yerde kartın yüzeyi aydınlanıyor.
Neden bu, neden flip değil: flip bilgiyi arkaya saklıyor, kullanıcıyı
çevirmeye zorluyor ve dokunmatik ekranda hiç çalışmıyor. Spot ışığı ise
içeriği yerinde bırakıyor, yalnızca yüzeye hayat veriyor; Linear, Vercel ve
Stripe'ın ürün sayfalarında yerleşmiş desen bu.
Konum JS'ten CSS değişkeniyle geliyor (--mx, --my). Değişken yoksa (JS
kapalı, dokunmatik cihaz) ışık kartın ortasında duruyor ve hiçbir şey
bozulmuyor.
İki katman var: yüzeydeki geniş yumuşak ışık ve kenardaki ince parlama.
İkincisi kartın sınırını imlecin yanında belirginleştiriyor; tek başına
yüzey ışığı, kenarı olmayan bir leke gibi duruyor. */
.card{ --mx:50%; --my:50%; }
.card::after{
content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
border-radius:inherit; opacity:0; transition:opacity .35s var(--ease);
background:radial-gradient(340px circle at var(--mx) var(--my),
rgba(49,162,220,.16), transparent 62%);
}
.card:hover::after{ opacity:1; }
.dark .card::after{
background:radial-gradient(340px circle at var(--mx) var(--my),
rgba(99,194,240,.13), transparent 62%);
}
/* Kart içeriği ışığın ÜSTÜNDE kalmalı; aksi halde radial gradient metnin
üzerine biniyor ve okunurluk düşüyor. */
.card > *{ position:relative; z-index:1; }
.light-soft .card p{ color:var(--on-light-2); }
.light-soft .card__wm{ color:var(--ink); opacity:.055; }
.light-soft .card:hover .card__wm{ opacity:.1; }
.hq__bar{
display:flex; align-items:center; gap:.8em;
padding:.85em clamp(16px,2vw,24px);
border-bottom:1px solid rgba(255,255,255,.1);
font-size:var(--fs-small); color:var(--on-dark-2);
}
.hq__live{
display:inline-flex; align-items:center; gap:.45em; margin-left:auto;
color:#ff5c5c; font-weight:600;
}
.hq__live i{
width:7px; height:7px; border-radius:50%; background:currentColor;
animation:hqpulse 2s ease-in-out infinite;
}
@keyframes hqpulse{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }
.hq__tiles{
display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
gap:1px; background:rgba(255,255,255,.1);
}
@media(max-width:760px){ .hq__tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.hq__tile{
background:#0b0f14; padding:clamp(16px,1.9vw,24px);
}
.hq__tile b{
display:block; font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:700;
letter-spacing:-.028em; line-height:1.05; color:var(--white);
}
.hq__tile b em{ font-style:normal; font-size:.5em; font-weight:500; color:var(--on-dark-2); margin-left:.15em; }
.hq__tile span{ display:block; margin-top:.5em; font-size:var(--fs-small); color:var(--on-dark-2); }
.hq__cols{
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:1px; background:rgba(255,255,255,.1); border-top:1px solid rgba(255,255,255,.1);
}
@media(max-width:820px){ .hq__cols{ grid-template-columns:1fr; } }
.hq__panel{ background:#0b0f14; padding:clamp(16px,1.9vw,24px); }
/* Panel maketindeki kutu etiketleri. Eskiden 'tü ve belge
yapısında h2'den h4'e atlama yaratıyordu; bunlar sayfanın bölümü
değil, maketin içindeki kutuların adı. Etiket
'ye çevrildi,
görünüm aynı kalsın diye seçici ikisini de kapsıyor. */
.hq__panel h4,
.hq__panel .hq__etiket{
font-size:var(--fs-small); font-weight:600; color:var(--on-dark);
margin-bottom:1em; display:flex; align-items:center; justify-content:space-between; gap:1em;
}
.hq__panel h4 small,
.hq__panel .hq__etiket small{ font-weight:400; color:rgba(255,255,255,.4); }
/* Şu an çalan */
.hq__now{ display:flex; align-items:center; gap:.9em; }
.hq__eq{ display:flex; align-items:flex-end; gap:2.5px; height:26px; flex:none; }
.hq__eq i{
width:3px; background:var(--blue); border-radius:2px;
animation:hqeq 1.1s ease-in-out infinite alternate;
}
@keyframes hqeq{ from{ height:4px } to{ height:26px } }
.hq__now div{ min-width:0; }
.hq__now b{ display:block; font-size:var(--fs-small); font-weight:600; color:var(--white);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hq__now span{ font-size:.88rem; color:var(--on-dark-2); }
/* Panel ekranı — şu an çalan / stüdyo / anket arasında döner */
.hq__screen{
position:relative; aspect-ratio:16/7; overflow:hidden; border-radius:12px;
margin-bottom:1em; background:#070b10;
border:1px solid rgba(255,255,255,.07);
}
.hq__slide{
position:absolute; inset:0; opacity:0; visibility:hidden;
transition:opacity .7s var(--ease), visibility .7s;
}
.hq__slide.on{ opacity:1; visibility:visible; }
/* 1 — Şu an çalan */
.hq__slide img{ width:100%; height:100%; object-fit:cover; }
.hq__slide--art::after{
content:""; position:absolute; inset:0;
background:linear-gradient(180deg, transparent 30%, rgba(6,9,13,.94));
}
.hq__cap{ position:absolute; left:1em; right:1em; bottom:.85em; z-index:2; }
.hq__cap b{ display:block; font-size:1.02rem; font-weight:600; color:#fff;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hq__cap span{ font-size:.85rem; color:rgba(255,255,255,.7); }
/* Ortak: ekran içi başlık */
.hq__slide h5{
position:absolute; top:.9em; left:1em; z-index:2; margin:0;
font-size:.74rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
color:var(--blue-lift);
}
/* 2 — Stüdyo: dalga formu */
.hq__slide--studyo{ padding:2.6em 1.1em 1em; display:flex; flex-direction:column; justify-content:center; }
.hq__wave{ display:flex; align-items:center; gap:2px; height:46%; }
.hq__wave i{
flex:1; background:var(--blue); border-radius:1px; opacity:.85;
transform-origin:center;
}
.hq__slide--studyo p{ margin-top:.9em; font-size:.85rem; color:var(--on-dark-2); }
.hq__slide--studyo p b{ color:var(--on-dark); font-weight:600; }
/* 3 — Anket: yatay çubuklar */
.hq__slide--anket{ padding:2.6em 1.1em 1em; }
.hq__slide--anket p{ font-size:.85rem; color:var(--on-dark); margin-bottom:.7em; font-weight:600; }
.hq__bars{ display:grid; gap:.42em; }
.hq__bars span{ display:grid; grid-template-columns:104px 1fr auto; align-items:center; gap:.6em;
font-size:.76rem; color:var(--on-dark-2); }
.hq__bars i{ display:block; height:7px; border-radius:4px; background:rgba(255,255,255,.1); overflow:hidden; }
.hq__bars i em{ display:block; height:100%; border-radius:4px; background:#3ad07a; }
.hq__bars span:nth-child(2) i em{ background:#ffc454; }
.hq__bars span:nth-child(3) i em{ background:rgba(255,255,255,.3); }
.hq__feed{ display:grid; }
.hq__feed li{
display:grid; grid-template-columns:44px auto minmax(0,1fr);
align-items:baseline; gap:.7em;
padding:.46em 0; font-size:.88rem; line-height:1.4;
border-bottom:1px solid rgba(255,255,255,.05);
}
.hq__feed time{ color:rgba(255,255,255,.4); font-variant-numeric:tabular-nums; font-size:.82rem; }
.hq__sube{
font-size:.64rem; font-weight:700; letter-spacing:.04em;
color:var(--blue-lift); background:rgba(49,162,220,.16);
border-radius:4px; padding:.22em .42em; white-space:nowrap;
}
.hq__feed p{ min-width:0; color:var(--on-dark-2); }
.hq__feed p strong{ font-weight:600; color:var(--on-dark); }
.hq__feed p i{ font-style:normal; color:rgba(255,255,255,.42); }
/* Olay türleri */
.hq__feed li.olay-acildi .hq__sube,
.hq__feed li.olay-kapandi .hq__sube{ background:none; padding:0; font-size:.9rem; }
.hq__feed li.olay-acildi .hq__sube{ color:#3ad07a; }
.hq__feed li.olay-kapandi .hq__sube{ color:#ff5c5c; }
.hq__feed li.olay-ozet{
background:rgba(255,196,84,.09); border:1px solid rgba(255,196,84,.24);
border-radius:10px; padding:.55em .7em; margin:.35em 0;
}
.hq__feed li.olay-ozet strong{ color:#ffc454; }
.hq__feed li.yeni{ animation:hqin .55s var(--ease); }
@keyframes hqin{ from{ opacity:0; transform:translateY(-10px) } to{ opacity:1; transform:none } }
/* Mağaza durumu */
.hq__stores{ display:grid; gap:.1em; }
.hq__stores li{
display:grid; grid-template-columns:auto minmax(0,1fr) 62px auto;
align-items:center; gap:.8em; padding:.52em 0; font-size:.9rem;
}
.hq__dot{ width:8px; height:8px; border-radius:50%; background:#3ad07a; flex:none; }
.hq__dot--off{ background:#ff5c5c; opacity:.7; }
.hq__stores b{ font-weight:500; color:var(--on-dark); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hq__stores b small{ display:block; font-weight:400; font-size:.8em; color:rgba(255,255,255,.38); }
.hq__meter{ height:4px; border-radius:3px; background:rgba(255,255,255,.12); overflow:hidden; }
.hq__meter i{ display:block; height:100%; background:var(--blue); border-radius:3px;
transition:width 1.2s var(--ease); }
.hq__stores span{ color:var(--on-dark-2); font-variant-numeric:tabular-nums; font-size:.85rem; }
/* ---------- 16b. Platform rozetleri ---------- */
.platforms{ margin-top:clamp(46px,5.5vw,78px); }
.platforms__label{
font-size:var(--fs-body); font-weight:600; color:var(--on-dark-2);
letter-spacing:.02em; margin-bottom:clamp(18px,2vw,26px);
}
/* 7 asal sayı: hangi sütun düzeni seçilirse seçilsin biri tek başına alta
kalıyor. Bu yüzden her zaman TEK SATIR; sığmadığında yatay kaydırılır. */
.platforms__grid{
display:flex; flex-wrap:nowrap; justify-content:center;
gap:clamp(9px,1vw,14px);
max-width:1000px; margin-inline:auto;
overflow-x:auto; scroll-snap-type:x proximity;
scrollbar-width:none;
padding-inline:var(--gut); margin-inline:calc(var(--gut) * -1);
-webkit-mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.platforms__grid::-webkit-scrollbar{ display:none; }
@media(min-width:1040px){
/* Hepsi rahat sığıyor: kaydırma ve kenar solması gereksiz */
.platforms__grid{ overflow:visible; padding-inline:0; margin-inline:auto;
-webkit-mask-image:none; mask-image:none; }
}
.platforms__grid li{
flex:0 0 clamp(102px, 11vw, 122px); /* hepsi aynı boyda dikdörtgen */
scroll-snap-align:center;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5em;
min-height:108px; padding:16px 8px;
border:1px solid rgba(255,255,255,.14); border-radius:14px;
background:rgba(255,255,255,.035);
transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.platforms__grid li:hover{
background:rgba(49,162,220,.14); border-color:rgba(49,162,220,.55);
transform:translateY(-3px);
}
.platforms__grid svg{
width:36px; height:36px; stroke-width:1.4; color:var(--blue-lift);
}
.platforms__grid span{
font-size:.95rem; line-height:1.2; color:var(--on-dark); text-align:center;
}
.platforms__note{
margin-top:clamp(26px,3vw,40px);
font-size:clamp(1.16rem,1.9vw,1.6rem); line-height:1.42; font-weight:500;
color:var(--on-dark);
}
.platforms__note em{
font-style:normal; font-weight:600; color:var(--blue-lift);
}
.platforms__note strong{
font-weight:700;
background:linear-gradient(96deg, var(--blue-lift), #fff 62%);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
/* ---------- 17. Footer ---------- */
/* Üstündeki siyah bölümden ayrışsın: bir ton açık yüzey + ince üst çizgi */
.foot{
position:relative;
background:linear-gradient(180deg, #16171b 0%, #101114 100%);
border-top:1px solid rgba(255,255,255,.09);
padding-top:clamp(60px,6.5vw,88px);
}
.foot::before{
content:""; position:absolute; top:0; left:0; right:0; height:1px;
background:linear-gradient(90deg, transparent, rgba(49,162,220,.55), transparent);
}
.foot__grid{
display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
gap:clamp(30px,3.4vw,52px); padding-bottom:clamp(44px,5vw,64px);
}
@media(max-width:900px){ .foot__grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .foot__grid{ grid-template-columns:1fr; } }
.foot__logo{ height:clamp(52px, 4.6vw, 76px); width:auto; margin-bottom:1.5rem; }
.foot p{ font-size:var(--fs-small); line-height:1.55; color:var(--on-dark-2); max-width:40ch; }
.foot h5{ font-size:var(--fs-body); font-weight:600; margin:0 0 1.1rem; color:var(--on-dark); }
.foot li{ margin-bottom:.72rem; }
.foot li a, .foot li span{ font-size:var(--fs-small); color:var(--on-dark-2); line-height:1.55; }
.foot li a:hover{ color:#fff; }
.foot__bar{
border-top:1px solid rgba(255,255,255,.11); padding:1.6rem 0;
display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between;
font-size:var(--fs-small); color:var(--on-dark-2);
}
.foot__bar a:hover{ color:#fff; }
/* ==========================================================================
18. Scroll anlatımı — Apple lansman teknikleri
========================================================================== */
/* --- 18a. Tam ekrana açılan görsel ---------------------------------------
Yuvarlak köşeli bir kart olarak başlar, scroll ilerledikçe kenarlardan
açılıp tam genişliğe ulaşır. clip-path GPU'da çalışır, layout tetiklemez. */
/* Not: tam genişlik için 100vw + negatif margin KULLANMA — kaydırma çubuğu
kadar yatay taşma yaratıp dikey kaydırmayı kilitliyor. Bunun yerine
.expand doğrudan çocuğu olarak konumlanır, doğal olarak tam
genişliktedir; clip-path onu içeri doğru kırpar. */
.expand{
--x: 22%; /* yanlardan içeri kırpma — 0'a inince tam ekran olur */
--r: 34px; /* köşe yarıçapı */
position:relative; width:100%;
margin-top:clamp(40px,5vw,72px);
clip-path:inset(0 var(--x) 0 var(--x) round var(--r));
will-change:clip-path;
}
/* video de aynı kutuya giriyor: bu bölümlerde görsel yerine klip
kullanılabiliyor ve ikisinin yerleşimi birebir aynı olmalı, yoksa
video yüklendiğinde sayfa zıplıyor. */
.expand img, .expand video{ width:100%; height:auto; display:block; }
.expand--tall img, .expand--tall video{ aspect-ratio:2.4/1; object-fit:cover; }
@media(max-width:700px){
.expand{ --x:6%; --r:18px; }
.expand--tall img{ aspect-ratio:4/3; }
}
/* --- 18b. Sabitlenen görsel + akan adımlar ------------------------------- */
.pin{
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:clamp(30px,5vw,90px); align-items:start;
}
.pin__media{
position:sticky; top:calc(84px + clamp(20px,5vh,60px));
aspect-ratio:11/14;
border-radius:16px; /* daha az yuvarlak */
overflow:hidden; isolation:isolate;
-webkit-mask-image:-webkit-radial-gradient(#fff, #000); /* Safari köşe kırpma hatası */
}
/* Görseller üst üste; aktif adıma göre çapraz geçiş yapar */
.pin__media img{
position:absolute; inset:0;
width:100%; height:100%; object-fit:cover;
border-radius:inherit;
opacity:0; transform:scale(1.03);
transition:opacity .8s var(--ease), transform 1.2s var(--ease);
}
.pin__media img.on{ opacity:1; transform:scale(1); }
/* ── ADIM RAYI ─────────────────────────────────────────────────────────────
Bu bölüm kaydırmalı anlatım: sol görsel sabit dururken sağdaki adımlar
geçiyor ve aradaki boşluklar görselin değişmesine zaman tanımak için
BİLEREK var. Ama okuyucuya nerede olduğunu söyleyen hiçbir şey yoktu;
ekran boyu boşluklar bu yüzden "seyrek" görünüyordu.
Ray, eski sitedeki numaralı daire akışının yaptığı işi yapıyor: kaç adım
var, kaçıncısındayım. Modern karşılığı yatay bir şerit değil, metnin
yanında duran dikey bir çizgi; okuma yönünü kesmiyor.
Nokta adımın KENDİ hizasında (üstten sabit değil, satırla birlikte iniyor),
böylece hangi metne ait olduğu belirsiz kalmıyor. */
.pin__steps{ display:grid; position:relative; padding-left:clamp(26px,3vw,44px); }
/* Rayın kendisi: baştan sona ince bir çizgi. Uçları soluyor ki bölümün
dışına taşmış gibi durmasın. */
.pin__steps::before{
content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
border-radius:2px;
background:linear-gradient(180deg,
transparent, rgba(5,7,10,.10) 8%, rgba(5,7,10,.10) 92%, transparent);
}
.dark .pin__steps::before{
background:linear-gradient(180deg,
transparent, rgba(255,255,255,.12) 8%, rgba(255,255,255,.12) 92%, transparent);
}
.pin__step{ position:relative; }
/* Adım noktası. Pasifken içi boş ve soluk, aktifken markanın mavisiyle dolu
ve çevresinde bir hale var; hale, gözü satıra çeken şey. */
.pin__step::before{
content:""; position:absolute; left:calc(clamp(26px,3vw,44px) * -1 - 5px);
top:50%; width:12px; height:12px; margin-top:-6px;
border-radius:50%; background:var(--grey);
border:2px solid rgba(5,7,10,.18);
transition:background .45s var(--ease), border-color .45s var(--ease),
box-shadow .45s var(--ease);
}
.dark .pin__step::before{ background:var(--near); border-color:rgba(255,255,255,.22); }
.pin__step.active::before{
background:var(--blue); border-color:var(--blue);
box-shadow:0 0 0 6px rgba(49,162,220,.16);
}
.pin__step{
min-height:min(62vh, 460px);
display:flex; flex-direction:column; justify-content:center;
padding-block:clamp(24px,4vh,48px);
}
.pin__step .h3{ margin-bottom:.5em; }
.pin__num{
display:block; font-size:var(--fs-body); font-weight:600; color:var(--blue);
margin-bottom:.9em;
}
/* Adımlar görüş alanına girerken belirir */
.pin__step{ opacity:.22; transform:translateY(14px); transition:opacity .55s var(--ease), transform .55s var(--ease); }
.pin__step.active{ opacity:1; transform:none; }
@media(max-width:820px){
.pin{ grid-template-columns:1fr; gap:28px; }
.pin__media{ position:relative; top:0; aspect-ratio:4/3; }
.pin__step{ min-height:0; padding-block:22px; opacity:1; transform:none; }
}
/* --- 18c. Kelime kelime aydınlanan cümle -------------------------------- */
.statement{
font-size:clamp(1.9rem, 4.6vw, 3.5rem); font-weight:600;
letter-spacing:-.025em; line-height:1.16;
max-width:1000px; margin-inline:auto; text-align:center;
}
.statement w{
display:inline-block;
color:rgba(245,245,247,.19);
transition:color .35s linear;
}
.light .statement w, .grey .statement w{ color:rgba(29,29,31,.16); }
.statement w.lit{ color:var(--on-dark); }
.light .statement w.lit, .grey .statement w.lit{ color:var(--on-light); }
.statement w.accent.lit{ color:var(--blue); }
/* --- 18d. Yatay kayan sektör galerisi (mobil) --------------------------- */
@media(max-width:640px){
.sectors{
display:flex; gap:14px;
overflow-x:auto; scroll-snap-type:x mandatory;
padding-inline:var(--gut); margin-inline:calc(var(--gut) * -1);
scrollbar-width:none;
}
.sectors::-webkit-scrollbar{ display:none; }
.sector{ flex:0 0 74%; scroll-snap-align:center; aspect-ratio:1/1.15; }
}
/* ---------- 18e. Yukarı çık ---------- */
.totop{
position:fixed; z-index:80;
right:clamp(16px, 2.4vw, 34px);
bottom:clamp(16px, 2.4vw, 34px);
width:52px; height:52px; border-radius:50%;
display:grid; place-items:center;
color:#fff; background:rgba(20,20,24,.62);
border:1px solid rgba(255,255,255,.16);
backdrop-filter:saturate(180%) blur(16px);
-webkit-backdrop-filter:saturate(180%) blur(16px);
box-shadow:0 10px 30px -10px rgba(0,0,0,.7);
opacity:0; visibility:hidden; transform:translateY(14px) scale(.9);
transition:opacity .3s var(--ease), transform .3s var(--ease),
visibility .3s, background-color .25s var(--ease), border-color .25s var(--ease);
}
.totop.show{ opacity:1; visibility:visible; transform:none; }
.totop:hover{ background:var(--blue); border-color:var(--blue); }
.totop:active{ transform:scale(.94); }
.totop svg{ width:20px; height:20px; }
/* TELEFONDA DAHA BÜYÜK VE DAHA YUKARIDA.
*
* 46 piksel dokunma hedefi tabanının (44) hemen üstünde ve parmakla ıskalanıyor.
* Asıl sorun konumdu: podcast sayfasındaki alt çalar da ekranın dibinde duruyor
* ve tuş onun üstüne biniyordu, ikisi aynı yeri paylaşıyordu. Tuş yukarı
* çekildi; çalar açıkken `--calar-yuksek` değişkeni onu daha da yukarı itiyor
* (podcast.js çalar açılınca bu değişkeni yazıyor). */
@media(max-width:520px){
.totop{
width:56px; height:56px;
bottom:calc(clamp(20px,4vw,30px) + var(--calar-yuksek, 0px));
}
.totop svg{ width:23px; height:23px }
}
@media(min-width:521px){
.totop{ bottom:calc(clamp(16px,2.4vw,34px) + var(--calar-yuksek, 0px)) }
}
/* ==========================================================================
18f. Yazı / iç sayfa
========================================================================== */
/* Okuma ilerleme çubuğu */
.progress{
position:fixed; top:0; left:0; right:0; height:3px; z-index:110;
background:transparent; pointer-events:none;
}
.progress span{
display:block; height:100%; width:0;
background:linear-gradient(90deg, var(--blue-deep), var(--blue-lift));
transition:width .12s linear;
}
/* Yazı başlığı bloğu */
.post-hero{
padding:clamp(56px,7vw,104px) 0 clamp(30px,4vw,52px);
text-align:center;
}
.post-hero__chip{
display:inline-flex; align-items:center; gap:.5em;
padding:.42em 1.05em; border-radius:var(--r-pill);
background:rgba(49,162,220,.16); border:1px solid rgba(49,162,220,.35);
color:var(--blue-lift); font-size:var(--fs-small); font-weight:600;
}
.light .post-hero__chip, .grey .post-hero__chip, .light-soft .post-hero__chip{
background:rgba(49,162,220,.1); border-color:rgba(49,162,220,.3); color:var(--blue-deep);
}
.post-hero h1{
margin-top:clamp(18px,2vw,26px);
font-size:clamp(2.1rem, 4.6vw, 3.7rem); font-weight:700; letter-spacing:-.026em;
max-width:20ch; margin-inline:auto;
}
.post-hero__meta{
margin-top:clamp(16px,1.8vw,24px);
display:flex; flex-wrap:wrap; gap:.5em 1.4em; justify-content:center;
font-size:var(--fs-small); color:var(--on-dark-2);
}
.light .post-hero__meta, .grey .post-hero__meta{ color:var(--on-light-2); }
.post-hero__meta b{ font-weight:600; color:var(--on-dark); }
.light .post-hero__meta b, .grey .post-hero__meta b{ color:var(--on-light); }
/* Öne çıkan görsel */
.post-cover{ overflow:hidden; }
.post-cover img{ width:100%; height:auto; aspect-ratio:16/8; object-fit:cover; }
/* Yazı gövdesi ------------------------------------------------------------ */
.prose{
max-width:720px; margin-inline:auto;
font-size:clamp(1.09rem, 1.2vw, 1.32rem); /* 17.5 → 21 */
line-height:1.68;
}
.prose > * + *{ margin-top:1.15em; }
.prose p{ color:var(--on-light-2); }
.dark .prose p, .panel .prose p{ color:var(--on-dark-2); }
.prose strong{ color:var(--on-light); font-weight:600; }
.dark .prose strong{ color:var(--on-dark); }
.prose h2{
margin-top:2em; font-size:clamp(1.5rem, 2.5vw, 2.05rem);
font-weight:700; letter-spacing:-.022em; line-height:1.2; color:var(--on-light);
}
.dark .prose h2{ color:var(--on-dark); }
.prose h3{
margin-top:1.7em; font-size:clamp(1.24rem, 1.7vw, 1.5rem);
font-weight:600; color:var(--on-light);
}
.dark .prose h3{ color:var(--on-dark); }
.prose a{
color:var(--blue-deep); text-decoration:underline;
text-underline-offset:3px; text-decoration-thickness:1px;
}
.prose a:hover{ text-decoration-thickness:2px; }
.dark .prose a{ color:var(--blue-lift); }
.prose ul, .prose ol{ padding-left:1.3em; }
.prose ul{ list-style:none; padding-left:0; }
.prose ul li{ position:relative; padding-left:1.7em; margin-top:.6em; color:var(--on-light-2); }
.prose ul li::before{
content:""; position:absolute; left:.25em; top:.62em;
width:7px; height:7px; border-radius:50%; background:var(--blue);
}
.prose ol li{ margin-top:.6em; color:var(--on-light-2); }
.dark .prose ul li, .dark .prose ol li{ color:var(--on-dark-2); }
.prose hr{
border:0; height:1px; margin:2.4em auto;
background:linear-gradient(90deg, transparent, rgba(5,7,10,.16), transparent);
}
.dark .prose hr{ background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); }
.prose blockquote{
margin:2em 0; padding:1.3em 1.6em;
border-left:3px solid var(--blue);
background:rgba(49,162,220,.07); border-radius:0 14px 14px 0;
font-size:1.06em; color:var(--on-light);
}
.dark .prose blockquote{ color:var(--on-dark); }
/* Görseller metin sütununu taşar, okuma ritmini bozmadan nefes aldırır */
.prose figure{
margin-block:2.2em;
width:min(940px, 92vw);
margin-inline:calc(50% - min(470px, 46vw));
}
.prose figure img{
width:100%; height:auto; border-radius:16px; display:block;
}
.prose figcaption{
margin-top:.85em; text-align:center;
font-size:var(--fs-small); color:var(--on-light-2);
}
.dark .prose figcaption{ color:var(--on-dark-2); }
@media(max-width:820px){
.prose figure{ width:100%; margin-inline:0; }
}
/* Yazı sonu: geri dön + paylaş */
/* Yazının sonundaki imza. Sayfanın başında da bir künye var ("Yazan not FM")
ama o kurumu söylüyor; bu satır yazının kim tarafından yazıldığını söylüyor
ve metnin bittiği yerde duruyor. Ayraç yukarıdaki metinden ayırıyor. */
.post-imza{
margin:2.4em 0 0; padding-top:1.4em;
border-top:1px solid rgba(15,23,42,.10);
font-size:.95rem; color:var(--muted, #64748b);
}
.post-imza b{ color:var(--ink, #0f172a); font-weight:650 }
.post-foot{
max-width:720px; margin:clamp(40px,5vw,64px) auto 0;
padding-top:clamp(24px,3vw,36px);
border-top:1px solid rgba(5,7,10,.1);
display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center; justify-content:space-between;
}
.dark .post-foot{ border-top-color:rgba(255,255,255,.12); }
/* İçerik listesi (blog dizini) */
.postlist{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,26px); }
@media(max-width:960px){ .postlist{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:620px){ .postlist{ grid-template-columns:1fr; } }
/* ---------- 19. Scroll reveal ---------- */
/* AÇILMA EFEKTİ YALNIZCA JS VARSA GİZLER.
Önce koşulsuz `opacity:0` idi ve JS çalışmayan her istemcide içerik
GÖRÜNMEZ kalıyordu. Google JS çalıştırıyor ama yapay zekâ tarayıcılarının
çoğu (GPTBot, ClaudeBot, PerplexityBot) çalıştırmıyor; notFM bu sayfalarla
AI Bakışı'nda kaynak gösteriliyor, o yüzden metnin JS'siz de okunması şart.
`.js` sınıfını 'deki tek satırlık betik koyuyor. */
.js .rv{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js .rv.in{ opacity:1; transform:none; }
.js .rv[data-d="1"]{ transition-delay:.08s; }
.js .rv[data-d="2"]{ transition-delay:.16s; }
.js .rv[data-d="3"]{ transition-delay:.24s; }
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
.rv, .hero__in > *{ opacity:1; transform:none; }
}
/* ── SEKTÖR SAYFASI YERLEŞİMİ ──────────────────────────────────────────────
Görsel solda, metin sağda. Sektör görselleri DİKEY (900x1010) ve ilk
denemede tam genişlik `expand--tall` kutusuna konmuştu; o kutunun oranı
2.4:1 olduğu için fotoğrafın yalnızca ince bir dilimi görünüyordu.
Görsel yapışkan: metin uzun, görsel kısa. Sabit kalmasa sağdaki metin
okunurken solda bomboş bir sütun kalıyor.
Tek sütuna düşme noktası 900px: altında iki sütun, dikey görseli avuç içi
kadar bırakıyor. */
.seg{
display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr);
gap:clamp(28px,4vw,64px); align-items:start;
}
.seg__gorsel{
position:sticky; top:calc(84px + clamp(20px,4vh,48px));
border-radius:18px; overflow:hidden; line-height:0;
}
.seg__gorsel img{ width:100%; height:auto; display:block; }
.seg__metin .prose{ margin-top:1.6em; }
@media (max-width:900px){
.seg{ grid-template-columns:1fr; }
.seg__gorsel{ position:static; max-width:460px; margin-inline:auto; }
}
/* ======================================================================
GÖRSEL BÜYÜTME (lightbox)
NEDEN: yazı gövdesindeki infografik 2560 piksel genişliğinde ama metin
sütununda 940 pikselde gösteriliyor. İçindeki yazılar bu ölçüde
okunmuyor; görsel var ama işe yaramıyor. Tıklayınca tam ekran açılıyor,
ikinci tıklamada gerçek boyutuna geçip sürüklenebiliyor.
Katman gövdenin sonuna JS ile ekleniyor, HTML'de durmuyor: JS kapalıysa
görsel yerinde ve okunur kalıyor, hiçbir şey kırılmıyor.
====================================================================== */
.prose figure img{ cursor:zoom-in; }
.prose figure img:focus-visible{
outline:2px solid var(--blue); outline-offset:4px;
}
.buyut{
position:fixed; inset:0; z-index:9999;
display:flex; align-items:center; justify-content:center;
background:rgba(4,6,9,.94);
opacity:0; transition:opacity .22s ease;
overscroll-behavior:contain;
/* KAPALIYKEN TIKLAMA GEÇİRMEZ.
Katman kapanınca DOM'da kalıyor ve `position:fixed; inset:0` olduğu için
görünmez halde bütün sayfayı örtüyordu: bir kez açıp kapatınca ne başka
bir görsel açılıyor ne de bağlantılara tıklanabiliyordu. */
pointer-events:none;
}
.buyut.acik{ opacity:1; pointer-events:auto; }
.buyut__cerceve{
position:relative; width:100%; height:100%;
display:flex; align-items:center; justify-content:center;
overflow:hidden;
}
.buyut__img{
max-width:96vw; max-height:92vh;
width:auto; height:auto;
border-radius:10px; display:block;
transform:scale(.97); transition:transform .22s ease;
user-select:none; -webkit-user-drag:none;
}
.buyut.acik .buyut__img{ transform:scale(1); }
/* Gerçek boyut kipi: sığdırma sınırları kalkar, sürükleyerek gezilir.
MUTLAK KONUM ŞART: sığdırma kipinde görseli flex ortalıyor, yani
translate(0,0) ekranın SOL ÜST KÖŞESİ değil ortalanmış konum oluyor.
JS ise sınırları mutlak koordinatla hesaplıyordu; ikisi çakışınca
görselin sağında boşluk kalıyordu. Burada ortalama devre dışı. */
.buyut.tam .buyut__img{
position:absolute; top:0; left:0;
max-width:none; max-height:none;
border-radius:0; cursor:grab; transition:none;
/* Dokunmatikte tarayıcının kendi kaydırması sürüklemeyle çakışıyor */
touch-action:none;
}
.buyut.tam.suruklerken .buyut__img{ cursor:grabbing; }
.buyut.buyutulebilir:not(.tam) .buyut__img{ cursor:zoom-in; }
.buyut:not(.buyutulebilir) .buyut__img{ cursor:default; }
.buyut__kapat{
position:absolute; top:14px; right:14px; z-index:2;
width:44px; height:44px; border:0; border-radius:50%;
background:rgba(255,255,255,.12); color:#fff;
font-size:22px; line-height:1; cursor:pointer;
display:flex; align-items:center; justify-content:center;
transition:background .18s ease;
}
.buyut__kapat:hover{ background:rgba(255,255,255,.24); }
.buyut__kapat:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.buyut__alt{
position:absolute; left:0; right:0; bottom:0; z-index:2;
padding:14px 60px calc(14px + env(safe-area-inset-bottom));
text-align:center; font-size:.86rem; line-height:1.5;
color:rgba(255,255,255,.8); pointer-events:none;
background:linear-gradient(to top, rgba(4,6,9,.85), transparent);
}
.buyut__ipucu{ display:block; margin-top:4px; color:rgba(255,255,255,.5); font-size:.78rem; }
.buyut.tam .buyut__alt{ display:none; }
@media(max-width:640px){
.buyut__alt{ padding:12px 16px calc(12px + env(safe-area-inset-bottom)); }
.buyut__kapat{ top:10px; right:10px; }
}
@media(prefers-reduced-motion:reduce){
.buyut, .buyut__img{ transition:none; }
.buyut__img{ transform:none; }
}
/* Kısa kodlardan çevrilen düğmeler yazı gövdesinin içinde duruyor ve
`.prose a` alt çizgi/renk kuralını devralıyorlardı. */
.prose a.btn{ text-decoration:none; color:#fff; }
.prose a.btn:hover{ text-decoration:none; }
/* Eski sayfalardan gelen gömülü harita ve videolar sütunu taşmasın */
.prose iframe, .prose video{ max-width:100%; display:block; margin:1.8em 0; }
/* ==========================================================================
ALT SAYFA KAPAĞI
NEDEN: alt sayfalar düz siyah bir bantla açılıyordu, hepsi birbirinin
aynısıydı ve bandın altı düz kesiliyordu. Kullanıcının hükmü: "bir
karakteristiği yok sitenin", "cover resimleri yok", "dalgalar yok, çok
biçimsiz".
NEDEN BÖLÜNMÜŞ, TAM GENİŞLİK FOTOĞRAF DEĞİL: elimizdeki yapay zekâ
görselleri DİKEY (900x1010, 1100x1400). Tam genişlik bir kapakta 1900
piksellik ekrana iki kat büyütülüp yumuşarlardı; kullanıcı çözünürlüğü
fark ediyor. Bölünmüş kapak onları kendi ölçüsünde kullanıyor, üstelik
her sayfaya ayrı bir ortam düştüğü için sayfalar birbirine benzemiyor.
========================================================================== */
.pk{
position:relative; isolation:isolate; overflow:hidden;
color:var(--on-dark);
/* Desen ve ışıma .dark ile aynı aileden; kapak siteye yabancı durmasın */
background:
radial-gradient(74% 60% at 8% 6%, rgba(49,162,220,.22), transparent 58%),
radial-gradient(60% 54% at 92% 94%, rgba(49,162,220,.13), transparent 62%),
url('/yeni/assets/img/facet-dark.svg?v=62ad19a2'),
linear-gradient(158deg, #0e141b 0%, #06080b 48%, #0a1017 100%);
background-size:auto, auto, 100% 100%, auto;
background-repeat:no-repeat;
}
.pk__ic{
display:grid; grid-template-columns:1fr 420px;
gap:clamp(30px,4vw,64px); align-items:center;
padding:clamp(76px,8vw,112px) 0 clamp(96px,10vw,140px);
}
.pk__yazi{ max-width:660px; }
.pk h1{
font-size:var(--fs-hero); font-weight:700;
letter-spacing:-.028em; line-height:1.04;
}
.pk .lead{ margin-top:.75em; color:var(--on-dark-2); }
.pk .btn{ margin-top:clamp(22px,2.6vw,34px); }
/* Fotoğraf paneli: hafifçe eğik duruyor ve alttan gölge alıyor,
düz yapıştırılmış bir kutu gibi görünmesin. */
.pk__gorsel{
position:relative; border-radius:20px; overflow:hidden;
box-shadow:0 50px 90px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.07);
transform:rotate(-1.1deg);
}
.pk__gorsel img{
display:block; width:100%; height:auto;
aspect-ratio:9/11; object-fit:cover;
}
/* Fotoğrafın alt kenarı koyu zemine karışsın, kesik durmasın */
.pk__gorsel::after{
content:""; position:absolute; inset:0;
background:linear-gradient(200deg, transparent 52%, rgba(5,8,12,.5) 100%);
}
@media(max-width:960px){
.pk__ic{ grid-template-columns:1fr; }
.pk__gorsel{ max-width:340px; transform:none; order:-1; }
}
@media(max-width:700px){
.pk__ic{ padding:clamp(60px,13vw,88px) 0 clamp(78px,15vw,110px); }
.pk__gorsel{ max-width:260px; }
}
/* Kapağın altındaki dalga, sonraki bölümün rengine bürünüyor.
.wave-sep__fill varsayılanı --grey; beyazla açılan sayfalar için ayrı. */
.wave-sep__fill--light{ fill:#ffffff; }
.wave-sep__fill--grey{ fill:var(--grey); }
.pk .wave-sep{ position:absolute; left:0; right:0; bottom:-1px; z-index:2; }
/* ---------------------------------------------------------- SSS akordeonu
/ kullanılıyor: JavaScript yok, klavyeyle açılıyor,
tarayıcının kendi bul özelliği kapalı bölümü de buluyor. */
.sss{ max-width:860px; margin-inline:auto; }
.sss details{
border:1px solid rgba(5,7,10,.1); border-radius:14px;
background:linear-gradient(180deg,#ffffff,#f7fafc);
margin-bottom:12px; overflow:hidden;
transition:border-color .18s ease, box-shadow .18s ease;
}
.sss details[open]{
border-color:rgba(49,162,220,.42);
box-shadow:0 18px 40px -28px rgba(5,12,22,.35);
}
.sss summary{
list-style:none; cursor:pointer;
padding:1.05em 3em 1.05em 1.3em; position:relative;
font-weight:600; font-size:1.03rem; color:var(--on-light);
}
.sss summary::-webkit-details-marker{ display:none; }
.sss summary::after{
content:""; position:absolute; right:1.3em; top:50%;
width:10px; height:10px; margin-top:-6px;
border-right:2px solid var(--blue); border-bottom:2px solid var(--blue);
transform:rotate(45deg); transition:transform .2s ease;
}
.sss details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.sss .sss__c{ padding:0 1.3em 1.25em; color:var(--on-light-2); line-height:1.62; }
.sss .sss__c p + p{ margin-top:.8em; }
/* Yazı ve sektör başlık bandı artık dalgayla bitiyor; dalga bandın İÇİNDE
mutlak konumda durduğu için bandın alt boşluğu ona yer açmalı. */
.post-hero{ position:relative; }
.post-hero .wave-sep{ position:absolute; left:0; right:0; bottom:-1px; }
.post-hero:has(.wave-sep){ padding-bottom:clamp(88px, 11vw, 168px); }
/* --------------------------------------------------- TAM GENİŞLİK KAPAK
Bölünmüş kapak (.pk) elimizde yalnızca DİKEY görsel varken kurulmuştu.
Sonra menü sayfaları için 1536x1024 kapaklar üretildi: geniş, karanlık ve
üst üçte biri bilerek boş. Bu ölçüdeki bir görseli panele sıkıştırmak
israf; tam genişlik kullanılıyor.
Sektör sayfaları BÖLÜNMÜŞ kapakta kalıyor, onların görseli dikey. */
.pk--foto{ background:#05070a; }
.pk--foto .pk__ic{
grid-template-columns:1fr;
min-height:clamp(400px, 54vh, 600px);
align-items:start;
}
.pk--foto .pk__gorsel{ display:none; }
.pk--foto::before{
content:""; position:absolute; inset:0; z-index:0;
background-image:var(--kapak);
background-size:cover; background-position:center 62%;
}
/* Görseller zaten alçak ışıklı; ağır karartma gerekmiyor. Yazı ÜSTTE
duruyor çünkü kareler üst üçte biri boş kalacak biçimde üretildi. */
.pk--foto::after{
content:""; position:absolute; inset:0; z-index:0;
background:
linear-gradient(180deg, rgba(4,6,9,.86) 0%, rgba(4,6,9,.42) 38%,
rgba(4,6,9,.30) 62%, rgba(4,6,9,.78) 100%),
radial-gradient(70% 55% at 10% 0%, rgba(49,162,220,.18), transparent 62%);
}
.pk--foto .wrap{ position:relative; z-index:1; }
/* Bölünmüş kapakta metin 660 pikselle sınırlı çünkü yanında fotoğraf var.
Burada yan yok; aynı sınır uzun başlıkları dört satıra bölüyordu. */
.pk--foto .pk__yazi{ max-width:min(880px, 72%); }
.pk--foto .lead{ max-width:600px; }
@media(max-width:860px){ .pk--foto .pk__yazi{ max-width:100%; } }
.pk--foto h1{ text-shadow:0 2px 30px rgba(0,0,0,.55); }
.pk--foto .lead{ color:rgba(255,255,255,.9); }
/* İki hizalama düzeltmesi (2026-08-15) --------------------------------- */
/* 1) .statement ORTALI (max-width:1000px + margin auto + center) ama
altındaki açıklama sola yaslı kalıyordu; başlık ortada, metin kenarda.
Aynı eksene alındı. */
.statement + .lead{
margin-inline:auto; text-align:center; max-width:720px;
}
/* 2) .prose kendi kendini ortalıyor (max-width:720px + margin-inline:auto).
Tek sütunlu bölümde doğru; ama .seg__metin sütunu 720'den geniş olduğu
için prose içeri kaçıyor ve başlıkla aynı hizada durmuyordu. Bu kapta
genişlik sütunun kendisi, ortalama yok. */
.seg__metin .prose{ max-width:none; margin-inline:0; }
/* İletişim haritası: gömülü çerçeve kendi ölçüsünü dayatıyor, oranla sarıldı */
.harita{
position:relative; border-radius:18px; overflow:hidden;
aspect-ratio:21/9; max-width:1180px; margin-inline:auto;
box-shadow:0 30px 70px -40px rgba(5,12,22,.45);
border:1px solid rgba(5,7,10,.08);
}
.harita iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
@media(max-width:760px){ .harita{ aspect-ratio:4/3; } }
/* --------------------------------------------------- SEKTÖR KARTLARI
Faaliyet alanları sayfasında ikon yerine fotoğraf. Fotoğraf tıklanınca
büyütme katmanı açılıyor (img.buyutulur), kartın kendi bağlantısı ise
sektör sayfasına gidiyor: iki ayrı hedef, ikisi de kart içinde. */
.sekler{
display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
gap:clamp(18px,2vw,28px); max-width:1180px; margin-inline:auto;
}
.sek{
display:flex; flex-direction:column; overflow:hidden;
border-radius:var(--r-card, 18px);
background:linear-gradient(180deg, #d8ebfa, #ffffff);
border:1px solid rgba(5,7,10,.07);
box-shadow:0 24px 50px -34px rgba(5,12,22,.4);
}
.dark .sek{
background:linear-gradient(180deg, #1b2740, #0d1119);
border-color:rgba(255,255,255,.09);
}
.sek__foto{ position:relative; line-height:0; background:#0d1119; }
.sek__foto img{
width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
display:block; cursor:zoom-in;
transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.sek__foto:hover img{ transform:scale(1.05); }
/* Büyütme ipucu: fotoğrafın üstünde küçük bir işaret */
.sek__foto::after{
content:"⤢"; position:absolute; right:10px; bottom:10px;
width:32px; height:32px; border-radius:9px;
background:rgba(8,12,18,.62); color:#fff;
display:flex; align-items:center; justify-content:center;
font-size:15px; opacity:0; transition:opacity .2s ease;
pointer-events:none;
}
.sek__foto:hover::after{ opacity:1; }
.sek__ic{ padding:clamp(18px,2vw,26px); display:flex; flex-direction:column; flex:1; }
.sek__ic h3{ font-size:var(--fs-h4); font-weight:600; }
.sek__ic p{ margin-top:.5em; color:var(--on-light-2); flex:1; }
.dark .sek__ic p{ color:var(--on-dark-2); }
.sek__ic .arrow{ margin-top:1.1em; align-self:flex-start; }
/* --------------------------------------------- LİSTE KARTINDA KAPAK FOTOĞRAFI
Blog ve kategori listeleri yalnızca başlıktan ibaretti; otuz dört kart yan
yana tek düze duruyordu. Fotoğraf WordPress'teki öne çıkan görselden. */
.post--foto{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.post__foto{ display:block; line-height:0; background:#0d1119; }
.post__foto img{
width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block;
transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.post--foto:hover .post__foto img{ transform:scale(1.05); }
/* Fotoğraflı kartta metin kendi iç boşluğunu alıyor; kartın padding'i
sıfırlandı çünkü fotoğrafın kenara dayanması gerekiyor. */
.post--foto .post__cat{ margin:clamp(16px,1.8vw,22px) clamp(16px,1.8vw,22px) 0; }
.post--foto h3{ margin:.45em clamp(16px,1.8vw,22px) 0; }
.post--foto .arrow{ margin:auto clamp(16px,1.8vw,22px) clamp(16px,1.8vw,22px); }
/* ------------------------------------------------------ YAZI İÇİ TABLOLAR
Hiç kural yoktu, tarayıcı varsayılanıyla duruyordu: hücre boşluğu yok,
satırlar farklı yüksekliklerde ve dikey hizalar kayıyordu.
`vertical-align:top` en belirleyicisi; iki satıra taşan hücre yanındaki
tek satırlık hücreyi aşağı itiyordu. */
.prose .tablo-kap{ overflow-x:auto; margin-block:1.9em; -webkit-overflow-scrolling:touch; }
.prose table{
width:100%; border-collapse:collapse; font-size:.96em; line-height:1.5;
min-width:520px; /* dar ekranda sıkışmak yerine kaydırılsın */
}
.prose thead th, .prose tr:first-child th{
text-align:left; font-weight:600; color:var(--on-light);
border-bottom:2px solid rgba(49,162,220,.4);
padding:.7em .9em; white-space:nowrap;
}
.prose td, .prose th{ vertical-align:top; padding:.72em .9em; }
.prose tbody tr + tr td{ border-top:1px solid rgba(5,7,10,.09); }
.prose tbody tr:nth-child(even){ background:rgba(49,162,220,.035); }
.prose td{ color:var(--on-light-2); }
.dark .prose td{ color:var(--on-dark-2); }
.dark .prose tbody tr + tr td{ border-top-color:rgba(255,255,255,.1); }
/* ------------------------------------------------------- YAZI İÇİ ÇAĞRI
WordPress'ten gelen "Demo İsteyin" kutusu satır içi stillerle beyaz zemin
ve siyah pill düğme dayatıyordu; beyaz sayfada beyaz kutu olarak çıkıyordu. */
.cagri{
margin-block:2.4em; padding:clamp(26px,3vw,42px);
border-radius:18px; text-align:center;
background:linear-gradient(160deg, #0e141b, #06080b);
border:1px solid rgba(255,255,255,.09);
box-shadow:0 30px 70px -44px rgba(5,12,22,.6);
}
.cagri__ust{
font-size:var(--fs-eyebrow); font-weight:600; letter-spacing:.02em;
color:var(--blue-lift); margin:0 0 .5em;
}
.cagri h3{
font-size:clamp(1.6rem,3.2vw,2.4rem); font-weight:700;
letter-spacing:-.02em; color:var(--on-dark); margin:0;
}
.cagri .btn{ margin-top:1.3em; text-decoration:none; }
/* --------------------------------------------------------------- BREADCRUMB
Yazı başlığının üstünde konum çizgisi. Eskiden yalnızca kategori rozeti
vardı; ziyaretçi yazıya arama sonucundan girdiğinde sitenin neresinde
olduğunu göremiyordu. */
.iz{
display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
gap:.4em .55em; font-size:var(--fs-small); color:var(--on-dark-2);
margin-bottom:clamp(14px,1.6vw,20px);
}
.light .iz, .grey .iz, .light-soft .iz{ color:var(--on-light-2); }
.iz a{ color:var(--blue-lift); text-decoration:none; }
.light .iz a, .grey .iz a, .light-soft .iz a{ color:var(--blue-deep); }
.iz a:hover{ text-decoration:underline; }
.iz__ayrac{ opacity:.45; }
.iz > span[aria-current]{ color:var(--on-dark); }
.light .iz > span[aria-current]{ color:var(--on-light); }
@media(max-width:600px){
/* Dar ekranda uzun yazı başlığı izi üç satıra bölüyordu; son öğe kırpılıyor */
.iz > span[aria-current]{
max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
}
/* ======================================================================
TEKLİF FORMU MODALI
Kullanıcı isteği: geniş modal, arkası bulanık ve KİLİTLİ; modal
kapatılmadan sayfa kaymayacak.
Kaydırma kilidi neden `position:fixed` ile: yalnızca `overflow:hidden`
vermek mobil Safari'de sayfayı durdurmuyor. Gövde sabitlenip kaydırma
konumu saklanıyor, kapanışta geri veriliyor.
====================================================================== */
.tk{
position:fixed; inset:0; z-index:10000;
display:flex; align-items:center; justify-content:center;
padding:clamp(14px,3vw,40px);
opacity:0; pointer-events:none;
transition:opacity .24s ease;
overscroll-behavior:contain;
}
.tk.acik{ opacity:1; pointer-events:auto; }
.tk__perde{
position:absolute; inset:0;
background:rgba(5,8,12,.62);
backdrop-filter:blur(14px) saturate(.9);
-webkit-backdrop-filter:blur(14px) saturate(.9);
}
/* Bulanıklık desteklenmiyorsa perde tek başına yeterince koyu olmalı */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
.tk__perde{ background:rgba(5,8,12,.88); }
}
.tk__kutu{
position:relative; z-index:1;
width:min(980px, 100%); max-height:calc(100dvh - 2 * clamp(14px,3vw,40px));
display:flex; flex-direction:column; overflow:hidden;
border-radius:clamp(16px,1.8vw,24px);
background:linear-gradient(180deg, #ffffff, #f7fafd);
box-shadow:0 60px 120px -50px rgba(5,12,22,.7), 0 0 0 1px rgba(5,7,10,.08);
transform:translateY(14px) scale(.985);
transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.tk.acik .tk__kutu{ transform:none; }
/* Başlık bandı önce neredeyse düz siyahtı ve gövdeden ayrışmıyordu,
"böyle kaybolmuş". Mavi belirgin biçimde yukarı çekildi, alta ince bir
marka çizgisi kondu ve bant gövdeden gölgeyle ayrıldı. */
.tk__ust{
position:relative; padding:clamp(24px,3.2vw,38px) clamp(22px,3.4vw,40px);
color:var(--on-dark);
background:
radial-gradient(78% 100% at 0% 0%, rgba(49,162,220,.55), transparent 62%),
radial-gradient(62% 120% at 96% 10%, rgba(20,86,140,.55), transparent 66%),
url('/yeni/assets/img/facet-dark.svg?v=62ad19a2'),
linear-gradient(125deg, #12314a 0%, #0a1622 46%, #060a10 100%);
background-size:auto, auto, 100% 100%, auto; background-repeat:no-repeat;
box-shadow:0 14px 30px -18px rgba(5,12,22,.75);
}
/* Bandın altındaki marka çizgisi: gövdeye geçişi net yapıyor */
.tk__ust::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
background:linear-gradient(90deg, var(--blue), rgba(49,162,220,.15));
}
.tk__ust h2{ font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:700; letter-spacing:-.02em; }
.tk__ust p{ margin-top:.45em; color:var(--on-dark-2); font-size:var(--fs-small); max-width:56ch; }
.tk__kapat{
position:absolute; top:14px; right:14px;
width:40px; height:40px; border:0; border-radius:50%;
background:rgba(255,255,255,.12); color:#fff; font-size:19px; cursor:pointer;
display:flex; align-items:center; justify-content:center;
transition:background .18s ease;
}
.tk__kapat:hover{ background:rgba(255,255,255,.24); }
.tk__kapat:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.tk__govde{ padding:clamp(22px,3vw,34px) clamp(22px,3.4vw,40px); overflow-y:auto; }
.tk__izgara{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,1.8vw,22px); }
.tk__alan--tam{ grid-column:1 / -1; }
@media(max-width:640px){ .tk__izgara{ grid-template-columns:1fr; } }
.tk__alan label{
display:block; font-size:var(--fs-small); font-weight:600;
color:var(--on-light); margin-bottom:.4em;
}
.tk__alan input, .tk__alan textarea{
width:100%; padding:.78em .9em; font:inherit; font-size:1rem;
color:var(--on-light); background:#fff;
border:1px solid rgba(5,7,10,.16); border-radius:11px;
transition:border-color .16s ease, box-shadow .16s ease;
}
.tk__alan textarea{ resize:vertical; min-height:110px; }
.tk__alan input:focus, .tk__alan textarea:focus{
outline:none; border-color:var(--blue);
box-shadow:0 0 0 3px rgba(49,162,220,.18);
}
.tk__alan input[aria-invalid="true"], .tk__alan textarea[aria-invalid="true"]{
border-color:#d64545; box-shadow:0 0 0 3px rgba(214,69,69,.14);
}
.tk__uyari{ display:block; margin-top:.35em; font-size:.82rem; color:#c33; min-height:1em; }
/* Bal küpü: ekranda YOK ama display:none botların bir kısmı tarafından
anlaşılıyor; ekran dışına alınıyor ve odak sırasından çıkarılıyor. */
.tk__kupu{
position:absolute; left:-9999px; width:1px; height:1px;
overflow:hidden; opacity:0;
}
.tk__onay{ display:flex; gap:.65em; align-items:flex-start; font-size:.9rem; color:var(--on-light-2); }
.tk__onay input{ width:auto; margin-top:.22em; flex:0 0 auto; }
.tk__alt{
display:flex; flex-wrap:wrap; gap:14px; align-items:center;
justify-content:space-between; margin-top:clamp(18px,2.2vw,26px);
}
.tk__alt .btn[disabled]{ opacity:.55; cursor:progress; }
.tk__tel{ font-size:var(--fs-small); color:var(--on-light-2); }
.tk__tel a{ color:var(--blue-deep); font-weight:600; }
.tk__sonuc{ text-align:center; padding:clamp(30px,5vw,60px) 0; }
.tk__sonuc h3{ font-size:clamp(1.3rem,2.4vw,1.8rem); font-weight:700; }
.tk__sonuc p{ margin-top:.6em; color:var(--on-light-2); }
.tk__tik{
width:62px; height:62px; margin:0 auto 18px; border-radius:50%;
background:rgba(49,162,220,.14); color:var(--blue-deep);
display:flex; align-items:center; justify-content:center; font-size:30px;
}
@media(prefers-reduced-motion:reduce){
.tk, .tk__kutu{ transition:none; }
.tk__kutu{ transform:none; }
}
/* ======================================================================
ÇEREZ ONAYI
DÜRÜSTLÜK NOTU: bu site şu an hiçbir analitik ya da pazarlama çerezi
KOYMUYOR. Ölçüldü: localStorage yok, document.cookie yok, üçüncü taraf
betiği yok. Var olmayan çerezleri sayan bir metin yazmak yanlış olurdu.
Gerçek tek üçüncü taraf, iletişim sayfasındaki Google haritası. O yüzden
harita ONAY VERİLENE KADAR YÜKLENMİYOR; yerinde bir yer tutucu duruyor.
Kategoriler analitik eklendiği gün hazır olsun diye şimdiden tanımlı.
====================================================================== */
.cz{
position:fixed; left:0; right:0; bottom:0; z-index:9500;
padding:clamp(14px,2vw,22px);
transform:translateY(110%); transition:transform .34s cubic-bezier(.2,.7,.3,1);
/* Kapalıyken ekran dışında ve DOM'dan siliniyor; yine de aynı kural
burada da dursun. Büyütme katmanında bunu unutmak, kapandıktan sonra
tüm sayfanın tıklanamaz kalmasına yol açmıştı. */
pointer-events:none;
}
.cz.acik{ transform:none; pointer-events:auto; }
.cz__kutu{
max-width:1180px; margin-inline:auto;
display:flex; flex-wrap:wrap; gap:clamp(14px,2vw,26px);
align-items:center; justify-content:space-between;
padding:clamp(16px,2vw,24px) clamp(18px,2.4vw,30px);
border-radius:16px; color:var(--on-dark);
background:
radial-gradient(60% 70% at 4% 0%, rgba(49,162,220,.22), transparent 62%),
linear-gradient(150deg, #0e141b, #06080b);
border:1px solid rgba(255,255,255,.1);
box-shadow:0 40px 80px -40px rgba(0,0,0,.75);
}
.cz__yazi{ flex:1 1 420px; font-size:var(--fs-small); line-height:1.6; color:var(--on-dark-2); }
.cz__yazi b{ color:var(--on-dark); font-weight:600; }
.cz__yazi a{ color:var(--blue-lift); }
.cz__dugmeler{ display:flex; flex-wrap:wrap; gap:10px; }
.cz__dugmeler .btn{ white-space:nowrap; }
.btn--sade{
background:transparent; color:var(--on-dark);
border:1px solid rgba(255,255,255,.28);
}
.btn--sade:hover{ background:rgba(255,255,255,.1); }
/* Ayar penceresi: teklif modalının kabuğunu paylaşıyor (.tk) */
.cz-ayar .tk__kutu{ width:min(760px, 100%); }
.cz-grup{
border:1px solid rgba(5,7,10,.12); border-radius:14px;
padding:clamp(14px,1.8vw,20px); margin-bottom:12px;
background:#fff;
}
.cz-grup__ust{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.cz-grup__ust h3{ font-size:1.02rem; font-weight:600; color:var(--on-light); }
.cz-grup p{ margin-top:.5em; font-size:.9rem; line-height:1.6; color:var(--on-light-2); }
.cz-grup__sabit{ font-size:.82rem; color:var(--on-light-2); white-space:nowrap; padding-top:.2em; }
/* Anahtar: gerçek bir checkbox'ın üstüne çizilmiş; klavye ve ekran okuyucu
için input olduğu gibi duruyor. */
.cz-anahtar{ position:relative; flex:0 0 auto; width:46px; height:26px; }
.cz-anahtar input{
position:absolute; inset:0; width:100%; height:100%; margin:0;
opacity:0; cursor:pointer; z-index:2;
}
.cz-anahtar span{
position:absolute; inset:0; border-radius:99px;
background:rgba(5,7,10,.2); transition:background .18s ease;
}
.cz-anahtar span::after{
content:""; position:absolute; top:3px; left:3px;
width:20px; height:20px; border-radius:50%; background:#fff;
transition:transform .18s ease; box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.cz-anahtar input:checked + span{ background:var(--blue); }
.cz-anahtar input:checked + span::after{ transform:translateX(20px); }
.cz-anahtar input:focus-visible + span{ outline:2px solid var(--blue); outline-offset:3px; }
/* Çerez dökümü: hangi çerez, ne için, ne kadar */
.cz-tablo{ width:100%; border-collapse:collapse; margin-top:1em; font-size:.85rem; }
.cz-tablo th, .cz-tablo td{
text-align:left; padding:.5em .6em; vertical-align:top;
border-top:1px solid rgba(5,7,10,.1);
}
.cz-tablo th{ font-weight:600; color:var(--on-light); white-space:nowrap; }
.cz-tablo td{ color:var(--on-light-2); }
.cz-yok{ margin-top:.8em; font-size:.85rem; color:var(--on-light-2); font-style:italic; }
/* Onay verilmeden yüklenmeyen gömülü içerik */
.gomulu-kilit{
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:14px; text-align:center; padding:clamp(24px,4vw,44px);
height:100%; background:linear-gradient(160deg,#eef4f9,#ffffff);
color:var(--on-light-2); font-size:var(--fs-small); line-height:1.6;
}
.gomulu-kilit b{ color:var(--on-light); font-weight:600; display:block; font-size:1.05rem; }
/* ------------------------------------------------------- HERO SLIDER
Klipler üst üste duruyor, aralarında yalnızca opaklık değişiyor.
Tek video öğesinin src'sini değiştirmek arada siyah bir kare bırakıyordu. */
.hero__klip{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
opacity:0; transition:opacity 1.1s ease;
}
.hero__klip.in{ opacity:1; }
.hero__noktalar{
position:absolute; left:0; right:0; bottom:clamp(18px,3vh,34px); z-index:3;
display:flex; gap:9px; justify-content:center;
}
.hero__noktalar[aria-hidden="true"]{ display:none; }
.hero__nokta{
width:34px; height:4px; border:0; padding:0; border-radius:99px; cursor:pointer;
background:rgba(255,255,255,.34); transition:background .25s ease, width .25s ease;
}
.hero__nokta.etkin{ background:#fff; width:52px; }
.hero__nokta:focus-visible{ outline:2px solid #fff; outline-offset:4px; }
/* Hero metni ortalı ama düğmeler sola yaslı kalıyordu */
.btns--orta{ justify-content:center; }
@media(prefers-reduced-motion:reduce){
.hero__klip{ transition:none; }
}
/* Modal gövdesinin kaydırma çubuğu: işletim sisteminin kalın gri çubuğu
kutunun köşe yuvarlaklığını kesiyor ve tasarımın dışında duruyordu. */
.tk__govde{
scrollbar-width:thin;
scrollbar-color:rgba(5,7,10,.22) transparent;
scroll-behavior:smooth;
overscroll-behavior:contain; /* modalın sonunda sayfa kaymaya başlamasın */
}
.tk__govde::-webkit-scrollbar{ width:10px; }
.tk__govde::-webkit-scrollbar-track{ background:transparent; }
.tk__govde::-webkit-scrollbar-thumb{
background:rgba(5,7,10,.2);
border-radius:99px;
border:3px solid transparent; /* iz ile arasına boşluk bırakır */
background-clip:content-box;
}
.tk__govde::-webkit-scrollbar-thumb:hover{ background:rgba(5,7,10,.34); background-clip:content-box; }
/* SSS açılışı JS ile yükseklik animasyonuna bağlandı; kendi başına
animasyon yapmıyor, içerik anında beliriyordu. */
.sss details.animasyonlu > .sss__c{ overflow:hidden; }
.sss summary{ transition:color .18s ease; }
.sss details[open] > summary{ color:var(--blue-deep); }
/* -------------------------------------------------- KAPAK GİRİŞ ANİMASYONU
Başlık, üst etiket, açıklama ve düğme soldan kayarak geliyor; hepsi
birbirinden 70 ms gecikmeli, yani göz sırayla takip ediyor.
NEDEN CSS ANİMASYONU, JS DEĞİL: kapak sayfanın ilk ekranı. JS beklemek
başlığı bir an görünmez bırakır ve arama motorunun gördüğü ilk şey boş
bir kutu olur. Animasyon `` üzerinden değil öğenin kendisinden
başlıyor, yani JS hiç çalışmasa bile başlık YERİNDE.
`translate` kullanılıyor, `left` değil: yalnızca birleştirme katmanında
çalışıyor ve yerleşimi yeniden hesaplatmıyor. */
@keyframes pkGir{
from{ opacity:0; transform:translate3d(-26px,0,0); }
to { opacity:1; transform:none; }
}
.pk .eyebrow,
.pk h1,
.pk .lead,
.pk .btn{
animation:pkGir .62s cubic-bezier(.22,.68,.3,1) backwards;
}
.pk .eyebrow{ animation-delay:.05s; }
.pk h1 { animation-delay:.12s; }
.pk .lead { animation-delay:.20s; }
.pk .btn { animation-delay:.28s; }
/* Yazı ve liste sayfalarının başlığı da aynı ritimde */
.post-hero .iz,
.post-hero h1,
.post-hero__meta{
animation:pkGir .58s cubic-bezier(.22,.68,.3,1) backwards;
}
.post-hero .iz { animation-delay:.04s; }
.post-hero h1 { animation-delay:.12s; }
.post-hero__meta { animation-delay:.2s; }
@media(prefers-reduced-motion:reduce){
.pk .eyebrow, .pk h1, .pk .lead, .pk .btn,
.post-hero .iz, .post-hero h1, .post-hero__meta{ animation:none; }
}
/* Üst dalga: bölümün ilk çocuğu, dolgusu ÜSTTEKİ bölümün rengi.
`.has-wave` üst boşluğu sıfırlıyor, dalga o boşluğun yerine geçiyor. */
.wave-sep:not(.wave-sep--bottom){ margin-top:-1px; margin-bottom:0; }
/* Tam genişlik görsel bandının altyazısı */
.expand__alt{
max-width:720px; margin:1em auto 0; text-align:center;
font-size:var(--fs-small); color:var(--on-light-2);
}
.dark .expand__alt{ color:var(--on-dark-2); }
/* ------------------------------------------------------- SOSYAL HESAPLAR
Footer'da marka sütununun altında. İkonlar hazır bir setten değil, sitenin
kendi çizgi diliyle (1.6 kalınlık, yuvarlak uç) yeniden çizildi. */
.sosyal{
display:flex; gap:10px; margin-top:clamp(20px,2.4vw,28px);
list-style:none; padding:0;
}
.sosyal a{
display:grid; place-items:center; width:44px; height:44px;
border-radius:13px; color:var(--on-dark-2);
background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.12);
transition:color .2s ease, border-color .2s ease, transform .2s ease,
background .2s ease, box-shadow .2s ease;
}
.sosyal svg{ width:20px; height:20px; }
.sosyal a:hover{
color:#fff; transform:translateY(-2px);
border-color:rgba(49,162,220,.55);
background:linear-gradient(180deg, rgba(49,162,220,.22), rgba(49,162,220,.06));
box-shadow:0 12px 26px -14px rgba(49,162,220,.7);
}
.sosyal a:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
@media(prefers-reduced-motion:reduce){ .sosyal a{ transition:none; } }
@media(prefers-reduced-motion:reduce){ .sosyal a:hover{ transform:none; } }
/* --------------------------------------------------------- WHITEPAPER BANDI
Footer bağlantı ızgarası ile alt bar arasında, tam genişlik. Listeye gömülü
bir satır olmasın diye kendi bandı var: belge satış tarafında en ağır
dokümanımız ve fark edilmesi gerekiyor. */
.wp-band{
display:grid; grid-template-columns:auto 1fr auto; align-items:center;
gap:clamp(16px,2vw,26px);
margin-top:clamp(30px,3.6vw,48px);
padding:clamp(18px,2.2vw,26px) clamp(20px,2.6vw,30px);
border-radius:16px; text-decoration:none;
background:
radial-gradient(70% 130% at 0% 0%, rgba(49,162,220,.20), transparent 62%),
linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.13);
transition:border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.wp-band:hover{
border-color:rgba(49,162,220,.55); transform:translateY(-2px);
box-shadow:0 24px 50px -30px rgba(49,162,220,.55);
}
.wp-band:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
.wp-band__ikon{
display:grid; place-items:center; width:52px; height:52px; flex:0 0 auto;
border-radius:14px; color:var(--blue-lift);
background:rgba(49,162,220,.14); border:1px solid rgba(49,162,220,.3);
}
.wp-band__ikon svg{ width:24px; height:24px; }
.wp-band__yazi{ display:block; min-width:0; }
.wp-band__yazi b{
display:block; color:var(--on-dark); font-weight:600;
font-size:1.05rem; letter-spacing:-.01em;
}
.wp-band__yazi > span{
display:block; margin-top:.3em;
font-size:var(--fs-small); line-height:1.55; color:var(--on-dark-2);
}
.wp-band__yazi em{ font-style:normal; color:var(--blue-lift); }
.wp-band__ok{ white-space:nowrap; }
@media(max-width:760px){
.wp-band{ grid-template-columns:auto 1fr; }
.wp-band__ok{ grid-column:1 / -1; }
}
@media(prefers-reduced-motion:reduce){
.wp-band{ transition:none; }
.wp-band:hover{ transform:none; }
}
/* ======================================================================
MÜŞTERİ YORUMLARI
Fotoğraflar bilerek okunmaz: marka adı verilmiyor, kişi baş harfleriyle
ve unvanıyla anılıyor. Kart sürüklenerek geziliyor.
İÇERİK KURALI: bu bölümde YALNIZCA gerçekten alınmış, yayınlanmasına izin
verilmiş cümleler durur. Liste boşken bölüm hiç basılmıyor
(_build/yorumlar.py). Uydurulmuş bir yorum, ismi gizlenince "gerçek ama
paylaşamıyoruz" izlenimi verdiği için daha da yanıltıcı olurdu.
====================================================================== */
.yorumlar{ position:relative; }
.yorum-ray{
display:flex; gap:clamp(16px,2vw,26px);
overflow-x:auto; scroll-snap-type:x mandatory;
padding:6px 0 clamp(18px,2vw,26px);
cursor:grab; scrollbar-width:none;
-webkit-overflow-scrolling:touch;
}
.yorum-ray::-webkit-scrollbar{ display:none; }
.yorum-ray.tutuluyor{ cursor:grabbing; scroll-snap-type:none; }
/* Sürüklerken metin seçilmesin, kartın içindeki yazıyı boyuyordu */
.yorum-ray.tutuluyor *{ user-select:none; }
.yorum{
flex:0 0 min(430px, 82vw); scroll-snap-align:start;
display:flex; flex-direction:column; gap:clamp(16px,2vw,22px);
padding:clamp(24px,2.8vw,34px);
border-radius:18px;
background:linear-gradient(180deg, #ffffff, #f4f9fd);
border:1px solid rgba(5,7,10,.08);
box-shadow:0 26px 54px -36px rgba(5,12,22,.42);
}
.dark .yorum{
background:linear-gradient(180deg, #1b2740, #0d1119);
border-color:rgba(255,255,255,.09);
}
.yorum__soz{
font-size:clamp(1.02rem,1.15vw,1.18rem); line-height:1.62;
color:var(--on-light); margin:0;
}
.dark .yorum__soz{ color:var(--on-dark); }
.yorum__soz::before{ content:"“"; margin-right:.06em; color:var(--blue); font-size:1.2em; }
.yorum__soz::after{ content:"”"; color:var(--blue); font-size:1.2em; }
.yorum__kisi{ display:flex; align-items:center; gap:14px; margin-top:auto; }
/* Avatar: fotoğraf değil, baş harfler. Kimseye ait olmayan bir yüz
üretmek yerine anonimliği açıkça gösteren bir işaret. */
.yorum__bas{
flex:0 0 auto; width:48px; height:48px; border-radius:50%;
display:grid; place-items:center;
font-weight:600; font-size:.98rem; letter-spacing:.04em;
color:var(--blue-deep);
background:linear-gradient(150deg, rgba(49,162,220,.22), rgba(49,162,220,.07));
border:1px solid rgba(49,162,220,.3);
}
.dark .yorum__bas{ color:var(--blue-lift); }
.yorum__unvan{ min-width:0; }
.yorum__unvan b{ display:block; font-weight:600; font-size:.97rem; color:var(--on-light); }
.dark .yorum__unvan b{ color:var(--on-dark); }
.yorum__unvan span{ display:block; margin-top:.15em; font-size:var(--fs-small); color:var(--on-light-2); }
.dark .yorum__unvan span{ color:var(--on-dark-2); }
/* Sağdaki kartın kesildiği belli olsun, kaydırılabildiği anlaşılsın */
.yorumlar::after{
content:""; position:absolute; right:0; top:0; bottom:0; width:clamp(40px,6vw,90px);
pointer-events:none; background:linear-gradient(90deg, transparent, var(--grey));
}
.light-soft .yorumlar::after{ background:linear-gradient(90deg, transparent, #fff); }
.dark .yorumlar::after{ background:linear-gradient(90deg, transparent, #0a0e13); }
.yorum-nokta{ display:flex; gap:8px; justify-content:center; margin-top:clamp(6px,1vw,12px); }
.yorum-nokta button{
width:30px; height:4px; border:0; padding:0; border-radius:99px; cursor:pointer;
background:rgba(5,7,10,.18); transition:background .2s ease, width .2s ease;
}
.dark .yorum-nokta button{ background:rgba(255,255,255,.22); }
.yorum-nokta button.etkin{ background:var(--blue); width:46px; }
@media(max-width:640px){ .yorum{ flex-basis:86vw; } }
/* ======================================================================
HATA SAYFALARI (404 / 403)
Koyu, kendi desenli, üstte normal menü ve logo. Arkada devasa ve soluk
bir kod duruyor: ziyaretçi ne olduğunu okumadan önce anlıyor.
Sayfa GÖVDE YÜKSEKLİĞİNİ dolduruyor; kısa içerikli bir hata sayfasında
footer ekranın ortasında asılı kalıyordu.
====================================================================== */
.hata{
position:relative; overflow:hidden; isolation:isolate;
min-height:calc(100svh - 84px);
display:flex; align-items:center;
padding:clamp(70px,10vh,130px) 0;
color:var(--on-dark);
background:
radial-gradient(72% 60% at 12% 4%, rgba(49,162,220,.20), transparent 58%),
radial-gradient(60% 54% at 90% 92%, rgba(49,162,220,.12), transparent 62%),
url('/yeni/assets/img/facet-dark.svg?v=62ad19a2'),
linear-gradient(158deg, #0e141b 0%, #06080b 48%, #0a1017 100%);
background-size:auto, auto, 100% 100%, auto;
background-repeat:no-repeat;
}
/* Arkadaki devasa kod. `aria-hidden` çünkü ekran okuyucu için başlıkta
zaten yazıyor; iki kez okunması gürültü olurdu. */
.hata__kod{
position:absolute; right:-2%; top:50%; translate:0 -50%;
font-size:clamp(11rem, 32vw, 30rem); font-weight:700;
letter-spacing:-.05em; line-height:.8;
color:rgba(255,255,255,.035);
pointer-events:none; user-select:none; z-index:-1;
}
.hata__ic{ position:relative; max-width:660px; }
.hata h1{
font-size:var(--fs-hero); font-weight:700;
letter-spacing:-.028em; line-height:1.05; margin-top:.15em;
}
.hata .lead{ margin-top:.8em; }
.hata__baglar{
display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center;
margin-top:clamp(26px,3vw,38px);
}
.hata__oneri{
margin-top:clamp(30px,3.6vw,46px);
padding-top:clamp(20px,2.4vw,28px);
border-top:1px solid rgba(255,255,255,.1);
}
.hata__oneri p{ font-size:var(--fs-small); color:var(--on-dark-2); margin-bottom:.9em; }
.hata__oneri ul{ display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; }
.hata__oneri a{
display:inline-block; padding:.5em 1em; border-radius:99px;
font-size:var(--fs-small); color:var(--on-dark);
background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13);
text-decoration:none; transition:border-color .18s ease, background .18s ease;
}
.hata__oneri a:hover{ background:rgba(49,162,220,.16); border-color:rgba(49,162,220,.5); }
@media(max-width:700px){
.hata__kod{ right:-8%; font-size:clamp(9rem,44vw,16rem); }
}
/* ------------------------------------------------------- İŞLETME GİRİŞİ
notfm.com (satış) ile notfm.app (ürün) arasındaki tek kapı. Mavi "Teklif
alın" satın alma yolu; bu düğme MEVCUT müşteriyi panele götürüyor, o yüzden
ayrı bir renk taşıyor ve yan yana karışmıyorlar. */
.btn--giris{
display:inline-flex; align-items:center; gap:.5em;
background:linear-gradient(180deg, #d8443c, #b62f28);
color:#fff; border:1px solid rgba(255,255,255,.16);
box-shadow:0 10px 24px -14px rgba(198,45,38,.9);
}
.btn--giris:hover{
background:linear-gradient(180deg, #e14f46, #c2352d);
box-shadow:0 14px 30px -14px rgba(198,45,38,.95);
}
.btn--giris:focus-visible{ outline:2px solid #f0857e; outline-offset:2px; }
.btn--giris svg{ width:17px; height:17px; flex:0 0 auto; }
/* Açık zeminli bölümlerde de aynı kırmızı kalsın; .btn'in açık tema
varyantı devralıp rengi soldurmasın. */
.light .btn--giris, .grey .btn--giris, .light-soft .btn--giris{ color:#fff; }
@media(max-width:1100px){
/* Dar ekranda üstte tek düğme kalsın; giriş mobil menüde zaten var */
.nav__right .btn--giris{ display:none; }
}
/* ---------- 26. SİSTEM ŞEMASI ---------- */
/* Şema 1180 birim geniş. Telefonda tam genişliğe sığdırmak yazıyı 5 piksele
düşürüyor, yani okunmuyor. Bu yüzden KÜÇÜLTÜLMÜYOR, kendi kabında yatay
kaydırılıyor: `min-width` altına inmiyor ve kap taşmayı kendi içinde
yönetiyor. Sayfa gövdesi asla yatay kaymıyor. */
.sema{ margin:0 }
.sema__kutu{
overflow-x:auto;
overscroll-behavior-x:contain;
-webkit-overflow-scrolling:touch;
padding-bottom:6px;
/* Kaydırma çubuğu: native olan koyu zeminde çirkin duruyordu. */
scrollbar-width:thin;
scrollbar-color:rgba(255,255,255,.22) transparent;
}
.sema__kutu::-webkit-scrollbar{ height:8px }
.sema__kutu::-webkit-scrollbar-track{ background:transparent }
.sema__kutu::-webkit-scrollbar-thumb{
background:rgba(255,255,255,.22); border-radius:4px;
}
.sema__kutu::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.34) }
.sema__svg{ display:block; width:100%; min-width:820px; height:auto }
.sema__not{
margin-top:14px; text-align:center;
font-size:var(--fs-small, .92rem); color:var(--on-dark-2);
}
/* Kaydırma gerekmeyen genişlikte not anlamsız, gizleniyor. */
@media (min-width:900px){ .sema__not{ display:none } }
/* ---------- 27. KÜTÜPHANE ŞERİDİ VE ALT ÇALAR ---------- */
.ktp__seritkap{
overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
scrollbar-width:none; padding:4px 0 10px;
/* Kenarlarda yumuşak solma: şeridin devam ettiği anlaşılsın, sert kesilmesin. */
-webkit-mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 26px),transparent);
mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 26px),transparent);
}
.ktp__seritkap::-webkit-scrollbar{ display:none }
/* Fare ile tutup çekilirken: metin seçilmesin, imleç kavrama göstersin. */
.ktp__seritkap.cekiliyor{ cursor:grabbing; user-select:none; scroll-behavior:auto }
@media (pointer:fine){ .ktp__seritkap{ cursor:grab } }
.ktp__serit{
display:flex; gap:clamp(14px,2.2vw,26px); width:max-content;
padding-inline:2px; scroll-snap-type:x proximity;
}
.ktp__kisi{
/* ÇAP TEK DEĞİŞKENDE ve halkaya İKİ KENAR DA bu değerden veriliyor.
Önce genişlik yüzdeydi, yükseklik `aspect-ratio` ile türetiliyordu;
masaüstünde yuvarlaktı ama MOBİLDE yumurtalaşıyordu, çünkü dar ekranda
flex öğesi çapraz eksende esneyince oran bozuluyor. İki kenar da aynı
uzunluktan gelince oval olması imkânsız. */
--cap:clamp(84px,17vw,120px);
flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:9px;
align-self:flex-start;
width:var(--cap);
background:none; border:0; padding:0; cursor:pointer; scroll-snap-align:center;
font:inherit; color:inherit;
}
/* Sürükleme sırasında tıklama tetiklenmesin diye JS bunu ekliyor. */
.ktp__serit.suruklendi .ktp__kisi{ pointer-events:none }
.ktp__halka{
--kalinlik:3px;
/* KARE OLMAK ZORUNDA. `aspect-ratio` tek başına yetmedi: şerit flex ve
öğeler dikeyde esneyince halka hafifçe yumurtalaşıyordu. Genişlik ve
yükseklik aynı değişkenden geliyor, esneme de kapatıldı. */
display:block; flex:none; box-sizing:border-box;
width:var(--cap); height:var(--cap);
border-radius:50%; padding:var(--kalinlik);
background:conic-gradient(from 210deg, var(--blue), var(--blue-lift), #9be4ff, var(--blue-deep), var(--blue));
transition:transform .34s var(--ease), box-shadow .34s var(--ease);
}
.ktp__halka img{
width:100%; height:100%; aspect-ratio:1 / 1; box-sizing:border-box;
border-radius:50%; object-fit:cover; display:block;
border:3px solid var(--grey); /* halka ile fotoğraf arası nefes */
background:var(--grey-2);
}
.ktp__kisi:hover .ktp__halka,
.ktp__kisi:focus-visible .ktp__halka{
transform:translateY(-3px) scale(1.045);
box-shadow:0 10px 26px rgba(49,162,220,.32);
}
.ktp__kisi[aria-current="true"] .ktp__halka{
box-shadow:0 0 0 2px var(--blue), 0 10px 26px rgba(49,162,220,.4);
}
.ktp__ad{
font-size:clamp(.78rem,1.5vw,.9rem); font-weight:500; color:var(--on-light);
text-align:center; line-height:1.25;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.ktp__not{
margin-top:12px; text-align:center;
font-size:var(--fs-small,.92rem); color:var(--on-light-2);
}
@media (pointer:fine){ .ktp__not{ display:none } }
/* ---------- alt çalar ---------- */
.calar{
position:fixed; left:0; right:0; bottom:0; z-index:70;
background:rgba(12,14,18,.92); backdrop-filter:blur(16px);
border-top:1px solid rgba(255,255,255,.1);
color:var(--on-dark);
transform:translateY(105%); transition:transform .42s var(--ease);
padding-bottom:env(safe-area-inset-bottom);
}
.calar.acik{ transform:none }
.calar__ic{
max-width:1180px; margin:0 auto; padding:12px clamp(14px,3vw,26px);
display:grid; grid-template-columns:1fr auto; align-items:center;
gap:clamp(12px,2vw,20px);
}
.calar__kapak{ width:52px; height:52px; border-radius:12px; object-fit:cover; flex:0 0 auto }
.calar__yazi{ min-width:0 }
.calar__parca{ font-weight:600; font-size:.98rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.calar__sanatci{ font-size:.84rem; color:var(--on-dark-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.calar__dugmeler{ display:flex; align-items:center; gap:6px }
.calar__d{
width:40px; height:40px; display:grid; place-items:center;
background:none; border:0; border-radius:50%; color:var(--on-dark); cursor:pointer;
transition:background .2s var(--ease);
}
.calar__d:hover{ background:rgba(255,255,255,.11) }
.calar__d svg{ width:20px; height:20px; fill:currentColor }
.calar__d--oynat{ background:var(--blue); width:46px; height:46px }
.calar__d--oynat:hover{ background:var(--blue-lift) }
/* İlerleme: 60 saniyelik önizlemenin neresinde olduğunu gösteriyor. */
.calar__cubuk{
position:absolute; left:0; top:0; height:2px; width:100%;
background:rgba(255,255,255,.12);
}
.calar__dolu{ height:100%; width:0; background:var(--blue); transition:width .25s linear }
@media (max-width:600px){
.calar__ic{ grid-template-columns:1fr auto; padding:10px 12px; gap:10px }
.calar__kapak{ width:44px; height:44px }
.calar__d--geri, .calar__d--ileri{ display:none } /* dar ekranda yalnızca oynat */
}
/* Kütüphane şeridi HERO'NUN ÜZERİNDE.
İlk denemede hero'nun üstüne ayrı, beyaz zeminli bir bant konmuştu; istenen
bu değildi. Şerit artık hero'nun içinde mutlak konumlu ve zemini saydam.
z-index 3: hero arka planının (0) ve hero metninin (2) üstünde, ama
başlığın (sticky, z-index:100) altında. Yani mega menü açıldığında şeridin
üstünden geçiyor. */
.ktp-bant{
position:absolute; left:0; right:0;
top:clamp(14px,2.4vh,30px);
z-index:3;
background:none; border:0;
pointer-events:none; /* boşluğu hero'ya bırak */
}
.ktp-bant .ktp{ pointer-events:auto } /* şeridin kendisi tıklanabilir */
/* KARARTMA. Hero fotoğrafının parlak olduğu yerlerde sanatçı adları
okunmuyordu; gölge tek başına yetmedi. Beyaz bant istenmediği için
yukarıdan aşağı sönen ince bir karartma konuyor: kendisi bir öğe gibi
görünmüyor ama yazıyı zeminden ayırıyor. Şeridin arkasında duruyor. */
.ktp-bant::before{
content:""; position:absolute; left:0; right:0;
top:calc(-1 * clamp(14px,2.4vh,30px)); /* hero'nun tepesine kadar */
height:calc(100% + clamp(40px,7vh,90px));
background:linear-gradient(180deg, rgba(6,8,11,.62) 0%, rgba(6,8,11,.34) 58%, transparent 100%);
pointer-events:none; z-index:-1;
}
.ktp-bant .ktp__serit{ gap:clamp(12px,1.8vw,20px) }
.ktp-bant .ktp__kisi{ --cap:clamp(76px,10vw,104px); width:var(--cap) }
.ktp-bant .ktp__halka{ --kalinlik:3px }
/* Fotoğrafın etrafındaki halka açık zeminde griydi; koyu hero üzerinde o
gri leke gibi duruyor. Burada zemin karanlık. */
.ktp-bant .ktp__halka img{ border-width:2.5px; border-color:rgba(10,10,12,.55); background:rgba(10,10,12,.4) }
/* Ad hero fotoğrafının üstünde okunmalı: beyaz ve altında gölge. */
.ktp-bant .ktp__ad{
font-size:clamp(.74rem,1.1vw,.86rem); color:#fff; font-weight:500;
text-shadow:0 1px 4px rgba(0,0,0,.75), 0 0 14px rgba(0,0,0,.5);
}
/* Kenarlardaki solma maskesi koyu zeminde de çalışıyor, dokunulmuyor. */
/* Hero metni şeridin altında kalsın diye üst boşluk artıyor. */
.hero{ padding-top:clamp(150px,20vh,230px) }
/* ---------- GENİŞ ÇALAR (notfm.app'teki büyük çalar gibi) ----------
Alt çubuğa dokununca açılıyor. Arka plan kapağın bulanıklaştırılmış hali;
ayrı bir görsel indirilmiyor, aynı dosya kullanılıyor. */
.calar-genis{
/* z-index BAŞLIĞIN ÜSTÜNDE (başlık sticky, 100). Önce 80'di ve küçültme
oku başlığın altında kalıyordu: görünmüyor, tıklanmıyor, geniş çalardan
çıkış yolu yok gibi duruyordu. Bu bir modal, en üstte olmalı. */
position:fixed; inset:0; z-index:120;
display:grid; place-items:center;
opacity:0; visibility:hidden; transition:opacity .34s var(--ease), visibility .34s;
}
.calar-genis.acik{ opacity:1; visibility:visible }
.calar-genis__zemin{
position:absolute; inset:0;
background-size:cover; background-position:center;
filter:blur(46px) saturate(1.5) brightness(.42); transform:scale(1.18);
}
.calar-genis__zemin::after{ content:""; position:absolute; inset:0; background:rgba(8,10,14,.55) }
.calar-genis__ic{
position:relative; width:min(420px, 88vw); text-align:center; color:#fff;
padding-bottom:env(safe-area-inset-bottom);
}
.calar-genis__kapak{
width:min(320px,74vw); aspect-ratio:1; border-radius:20px; object-fit:cover;
box-shadow:0 30px 70px rgba(0,0,0,.55); margin:0 auto 26px; display:block;
}
.calar-genis__parca{ font-size:1.34rem; font-weight:600; margin-bottom:5px }
.calar-genis__sanatci{ color:rgba(255,255,255,.66); font-size:.98rem; margin-bottom:22px }
.calar-genis__surgu{
width:100%; -webkit-appearance:none; appearance:none; height:4px; border-radius:2px;
background:rgba(255,255,255,.24); outline:0; cursor:pointer;
}
.calar-genis__surgu::-webkit-slider-thumb{
-webkit-appearance:none; width:13px; height:13px; border-radius:50%;
background:#fff; box-shadow:0 1px 5px rgba(0,0,0,.45);
}
.calar-genis__surgu::-moz-range-thumb{
width:13px; height:13px; border:0; border-radius:50%; background:#fff;
}
.calar-genis__sure{
display:flex; justify-content:space-between; margin-top:8px;
font-size:.78rem; color:rgba(255,255,255,.6); font-variant-numeric:tabular-nums;
}
.calar-genis__dugmeler{
display:flex; align-items:center; justify-content:center; gap:18px; margin-top:26px;
}
.calar-genis__d{
width:52px; height:52px; display:grid; place-items:center;
background:rgba(255,255,255,.1); border:0; border-radius:50%; color:#fff; cursor:pointer;
transition:background .2s var(--ease), transform .2s var(--ease);
}
.calar-genis__d:hover{ background:rgba(255,255,255,.2); transform:scale(1.06) }
.calar-genis__d svg{ width:22px; height:22px; fill:currentColor }
.calar-genis__d--oynat{ width:66px; height:66px; background:var(--blue) }
.calar-genis__d--oynat:hover{ background:var(--blue-lift) }
.calar-genis__d--oynat svg{ width:28px; height:28px }
/* KÜÇÜLTME OKU. Önce saydam beyazdı ve koyu zeminde fark edilmiyordu;
geniş çalardan çıkış yolu yokmuş gibi duruyordu. Marka mavisi verildi. */
.calar-genis__kapat{
position:absolute; top:calc(env(safe-area-inset-top) + 16px); left:50%; transform:translateX(-50%);
width:48px; height:48px; display:grid; place-items:center;
background:var(--blue); border:0; border-radius:50%; color:#fff; cursor:pointer;
box-shadow:0 6px 20px rgba(49,162,220,.42);
transition:background .2s var(--ease), transform .2s var(--ease);
}
.calar-genis__kapat:hover{ background:var(--blue-lift); transform:translateX(-50%) translateY(2px) }
.calar-genis__kapat svg{ width:22px; height:22px }
/* Alt çubuğun kapak+metin alanı tıklanabilir: geniş çaları açıyor.
`display:contents` KULLANILMIYOR: kutusu olmayan bir düğmede tıklama
hedefi güvenilmez oluyordu ve büyütme hiç çalışmıyordu. Gerçek bir flex
kutusu var. */
.calar__ac{
display:flex; align-items:center; gap:inherit; min-width:0;
background:none; border:0; padding:0; cursor:pointer;
font:inherit; color:inherit; text-align:left;
}
.calar__ac .calar__kapak{ margin-right:clamp(10px,1.6vw,16px) }
.calar-genis__sertifika{
margin-top:20px; font-size:.8rem; color:rgba(255,255,255,.5);
}
.calar-genis__sertifika a{
color:var(--blue-lift); font-variant-numeric:tabular-nums;
text-decoration:underline; text-underline-offset:3px;
}
.calar-genis__sertifika a:hover{ color:#fff }
/* ---------- SERTİFİKA MODALI ----------
Doğrulama sayfası ayrı sekmede açılıyordu ve kişi siteden koptuğunu
sanıyordu. Aynı sayfa artık çerçeve içinde, kapatılabilir bir kutuda.
Sayfa 8 KB ve kendi başına duran bir doğrulama kartı; site menüsü
taşımadığı için modalda düzgün duruyor. */
.sertimodal{
position:fixed; inset:0; z-index:130;
display:grid; place-items:center; padding:clamp(12px,3vw,28px);
background:rgba(6,8,12,.72); backdrop-filter:blur(6px);
opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.sertimodal.acik{ opacity:1; visibility:visible }
.sertimodal__kutu{
position:relative; width:min(480px,100%);
background:var(--near); color:var(--on-dark);
border:1px solid rgba(255,255,255,.1); border-radius:20px;
box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.sertimodal__ic{ padding:clamp(30px,5vw,44px) clamp(24px,4vw,40px); text-align:center }
/* LOGO ORTALANIYOR. Kabın `text-align:center` değeri yetmiyordu: 73. satırdaki
`img,video{display:block}` kuralı görseli blok yapıyor ve blok bir öğe metin
hizasından etkilenmiyor, sola yapışıyordu. */
.sertimodal__logo{ height:38px; width:auto; margin:0 auto 22px; opacity:.95 }
.sertimodal__baslik{ font-size:1.3rem; font-weight:600; margin-bottom:6px }
/* SERTİFİKA MÜHRÜ.
*
* Altın bir mühür koyu zeminde tek başına yapışık durur. Altına yumuşak bir
* sıcak ışık koyuldu: gölge değil, mührün kendi renginden gelen bir hâle.
* Böylece kutunun üstünde duruyor gibi değil, kutuya BASILMIŞ gibi görünüyor.
*
* Giriş animasyonu mühür basma hareketini taklit ediyor: biraz büyük ve hafif
* dönük başlayıp yerine oturuyor. Süre kısa (420 ms), çünkü bu bir gösteri
* değil, bir onay işareti. `prefers-reduced-motion` açıksa hiç oynamıyor. */
.sertimodal__muhur{
width:140px; height:140px; margin:22px auto 24px; display:block;
filter:drop-shadow(0 6px 18px rgba(214,168,44,.30));
}
@media (prefers-reduced-motion: no-preference){
.sertimodal.acik .sertimodal__muhur{
animation:muhurBas .42s cubic-bezier(.2,.9,.3,1.15) both;
}
}
@keyframes muhurBas{
from{ transform:scale(1.22) rotate(-7deg); opacity:0 }
to { transform:scale(1) rotate(0deg); opacity:1 }
}
@media (max-width:560px){
.sertimodal__muhur{ width:116px; height:116px; margin:18px auto 20px }
}
.sertimodal__parca{ color:var(--blue-lift); font-size:1.02rem; margin-bottom:16px }
.sertimodal__metin{ color:var(--on-dark-2); font-size:.93rem; line-height:1.62 }
.sertimodal__tarih{
margin:18px 0; padding:11px 16px; display:inline-block;
background:rgba(49,162,220,.12); border:1px solid rgba(49,162,220,.28);
border-radius:999px; font-size:.88rem; color:var(--on-dark);
font-variant-numeric:tabular-nums;
}
.sertimodal__iletisim{ margin-top:4px }
.sertimodal__iletisim a{ color:var(--blue-lift); text-decoration:underline; text-underline-offset:3px }
.sertimodal__iletisim a:hover{ color:#fff }
/* Geniş çalardaki tetikleyici: numara değil, tek cümle. */
.calar-genis__sertd{
background:none; border:0; padding:0; cursor:pointer; font:inherit;
color:var(--blue-lift); text-decoration:underline; text-underline-offset:3px;
}
.calar-genis__sertd:hover{ color:#fff }
.sertimodal__kapat{
position:absolute; top:10px; right:10px; z-index:2;
width:38px; height:38px; display:grid; place-items:center;
background:rgba(12,14,18,.8); border:0; border-radius:50%; color:#fff; cursor:pointer;
}
.sertimodal__kapat:hover{ background:rgba(12,14,18,.95) }
/* ---------- 28. MAĞAZADA NE DUYDUN? (notFM ID) ----------
Başlıktaki kırmızı düğme. notfm.app'teki `fd-listen-button`ın buradaki
karşılığı; modalin kendisi ORTAK (bkz. assets/css/notid.css, üretici
_build/notid.php).
Sayfadaki TEK kırmızı. Başlıkta iki mavi düğme var (İşletme Girişi kırmızı
değil, o marka kırmızısı; Teklif alın mavi) ve bu üçüncüsü onlardan ayrışsın
diye farklı bir dil kullanıyor: dolu zemin değil, ince çerçeve ve nabız. */
/* SADECE TELEFONDA. Masaüstünde GİZLİ ve bu bir yerleşim kararı değil, işlevin
kendisi: ziyaretçinin telefonu hoparlöre doğru tutması gerekiyor. Masaüstü
bilgisayarın mikrofonu odanın ortasında duruyor ve çoğu masaüstünde hiç yok.
Çalışmayacağı bir yerde düğme göstermek, basan herkese hata döndürmek olurdu.
YALNIZCA NOKTA, yazısız. İlk sürüm "Mağazada ne duydun?" yazısıyla 190 px
kaplıyordu ve başlıktaki gezinme iki satıra kırılıyordu. notfm.app'teki hâli
de yuvarlak ve yazısız; kullanıcının işaret ettiği düğme bu. Anlam
`aria-label` ve `title`da duruyor. */
.notid{
display:none;
align-items:center; justify-content:center;
width:40px; height:40px; padding:0;
border-radius:999px; cursor:pointer;
font:inherit; font-size:.86rem; font-weight:600; letter-spacing:.005em;
color:#ffd9de;
border:1px solid rgba(255,74,102,.55);
background:linear-gradient(145deg, rgba(255,74,102,.20), rgba(255,138,64,.11));
box-shadow:0 8px 24px rgba(255,74,102,.14), inset 0 0 0 1px rgba(255,255,255,.04);
transition:transform .2s var(--ease, ease), border-color .2s ease,
background .2s ease, color .2s ease;
}
.notid:hover, .notid:focus-visible{
transform:translateY(-2px); outline:none; color:#fff;
border-color:rgba(255,74,102,.95);
background:linear-gradient(145deg, rgba(255,74,102,.32), rgba(255,138,64,.2));
}
.notid__nokta{
width:10px; height:10px; border-radius:50%; flex:none;
background:#ff4a66;
animation:notid-nabiz 1.9s ease-out infinite;
}
@keyframes notid-nabiz{
0% { box-shadow:0 0 0 0 rgba(255,74,102,.6); transform:scale(1) }
70% { box-shadow:0 0 0 11px rgba(255,74,102,0); transform:scale(1.14) }
100%{ box-shadow:0 0 0 0 rgba(255,74,102,0); transform:scale(1) }
}
/* Kapatılamayan bir nabız, bu tercihi denge sorunları yüzünden açanlar için
sorun. Nokta kırmızı ve okunur kalıyor, yalnızca hareket duruyor. */
@media (prefers-reduced-motion: reduce){ .notid__nokta{ animation:none } }
/* Yazı işaretlemede duruyor ama ekranda gösterilmiyor: `aria-label` düğmenin
üstünde zaten var, ikisi birden okunursa ekran okuyucu cümleyi iki kez
söyler. `display:none` erişilebilirlik ağacından da çıkarıyor. */
.notid__yazi{ display:none }
/* Düğme BURADA ORTAYA ÇIKIYOR ve hamburgerin yanına oturuyor.
İşaretlemedeki sıra "notid -> Teklif alın -> hamburger"; sırayı değiştirmek
yerine flex `order` veriliyor, yani tek bir DOM iki yerleşimi karşılıyor. */
@media (max-width:1100px){
.notid { display:inline-flex; order:8 }
.burger{ order:9 }
}
/* ---------- 29. AÇIK BÖLÜMLER ARASINDAKİ GEÇİŞ ----------
İki açık bölüm yan yana geldiğinde zemin rengi bir ANDA değişiyor:
#ffffff -> #f5f5f7. Fark küçük ama sınır keskin ve göz onu düz bir çizgi
olarak okuyor. Uzun süre kenarlık aradım, yoktu; sorun rengin kendisiydi.
ÇÖZÜM İÇ GÖLGE, sözde öğe DEĞİL. `::before` bu dosyada iki kez metnin
üstüne düştü; `box-shadow: inset` tek satır, yığın bağlamı kurmuyor, arka
plan katmanlarına da dokunmuyor (bölümlerde zaten dalga dokusu var).
Yalnızca AÇIK-AÇIK komşulukta. Koyu bölümden sonra gelenlerde dalga ayracı
zaten geçişi yapıyor, oraya ikinci bir yumuşatma koymak bulanıklık olurdu. */
.light + .grey,
.light-soft + .grey,
.grey + .grey{
box-shadow:inset 0 70px 56px -46px var(--white);
}
.grey + .light,
.grey + .light-soft,
.light-soft + .light-soft{
box-shadow:inset 0 70px 56px -46px var(--grey);
}