/* ═══════════════════════════════════════════════════════════════════════ FRIGOLIVE — anasayfa Fikir: sayfa bir "bölümler listesi" değil, TEK BİR SEVKİYAT. Kaydırmak zamanı ilerletir. Sağda sabit duran kontrol paneli okudukça gerçekten değişir — saat akar, tır rotada ilerler, sensörler kayar, eşik aşılınca panel kırmızıya döner. Teknik bilgiler "özellik kartı" olarak değil, o sevkiyatta yaşanan olaylar olarak ortaya çıkar. Renkler koyu bir soğuk odadan: yeşile çalan siyah gövde, marka yeşili, ve soğuğu okutan tek bir buz mavisi aksan. Sayfadaki tek aydınlık ada teknik bölümü — masaya konmuş basılı bir kalibrasyon belgesi gibi. ═══════════════════════════════════════════════════════════════════════ */ :root{ /* ── KOYU TEMA (varsayılan) ── İki tema da aynı belirteçleri doldurur; aşağıdaki hiçbir kural doğrudan renk yazmaz. Yeni bir kural eklerken de yazmayın — yoksa açık temada görünmez bir metin ya da okunmaz bir kutu ortaya çıkar. */ /* zemin */ --gece:#05100C; --kat:#0A1A13; --kat2:#0E2118; --hat:rgba(143,168,154,.16); --hat-guclu:rgba(143,168,154,.32); /* marka */ --frigo:#348D5C; --filiz:#4CC581; --buzmavi:#7FD4E8; --sari:#F5B942; --alarm:#FF5A4E; /* metin */ --baslik:#FFFFFF; --kar:#E8F2EC; --sis:#8FA89A; --sis-sonuk:#5F7A6B; /* dolu düğme */ --dolu-zemin:#4CC581; --dolu-zemin-uzeri:#63D795; --dolu-metin:#04170D; /* cam yüzeyler (kontrol paneli, yapışkan nav, harita paneli) */ --cam:rgba(8,22,16,.90); --cam-hucre:rgba(5,16,12,.75); --cam-nav:rgba(5,16,12,.74); --cam-rozet:rgba(6,18,13,.88); /* gölge — açık zeminde aynı siyahlık ezici oluyor */ --golge-derin:rgba(0,0,0,.95); --golge-orta:rgba(0,0,0,.7); --golge-hafif:rgba(0,0,0,.6); /* harita */ --harita-zemin:#0B1A14; --harita-suzgec:invert(1) hue-rotate(178deg) brightness(.82) contrast(1.08) saturate(.55); --marker-cizgi:#06140E; --sev-item-uzeri:#132A1F; /* teknik kâğıdı — koyu sayfadaki tek aydınlık ada */ --kagit:#F1F5F2; --kagit-metin:#0E2A1D; --kagit-sonuk:#4A6357; --kagit-hat:rgba(22,56,42,.28); --kagit-cizgi:rgba(22,56,42,.045); /* uyarı şeridi metinleri */ --uyari-alarm-metin:#FFD3CE; --uyari-dikkat-metin:#FFE6B8; /* grafik/gren yoğunluğu */ --gren-opak:.03; /* tipografi */ --dspl:'Archivo',system-ui,sans-serif; --govde:'Inter',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; /* ölçü */ --bolum:clamp(84px,11vw,168px); --kenar:clamp(20px,4vw,48px); --en:1240px; --pano-w:308px; --pano-alan:0px; --yay:cubic-bezier(.22,.72,.24,1); --yay-yumusak:cubic-bezier(.4,0,.2,1); } @media (min-width:1180px){ :root{ --pano-alan:calc(var(--pano-w) + 56px) } } /* ═══════════════════════════════════════════════════════════════════════ AÇIK TEMA Koyu temanın negatifi değil: soğuk oda ışıkları açıkken nasıl görünüyorsa öyle. Yeşiller koyulaşıyor (açık zeminde --filiz okunmuyor), sarı ve buz mavisi kontrast için karartılıyor, gölgeler yumuşuyor. data-tema özniteliği 'e js/tema.js tarafından yazılır; işletim sistemi tercihi de aynı yerde okunur, burada @media yok — böylece tek bir doğruluk kaynağı oluyor ve sistem açıkken kullanıcının "koyu" seçimi eziliyor gibi bir durum çıkmıyor. ═══════════════════════════════════════════════════════════════════════ */ :root[data-tema="acik"]{ --gece:#F3F7F4; --kat:#FFFFFF; --kat2:#E9F0EB; --hat:rgba(22,56,42,.14); --hat-guclu:rgba(22,56,42,.26); --frigo:#348D5C; --filiz:#2C7A50; --buzmavi:#1F7E96; --sari:#9A6608; --alarm:#C8352B; --baslik:#0B2116; --kar:#173427; --sis:#4A6357; --sis-sonuk:#6E857A; --dolu-zemin:#2C7A50; --dolu-zemin-uzeri:#23663F; --dolu-metin:#FFFFFF; --cam:rgba(255,255,255,.92); --cam-hucre:rgba(243,247,244,.9); --cam-nav:rgba(243,247,244,.8); --cam-rozet:rgba(255,255,255,.9); --golge-derin:rgba(14,42,29,.22); --golge-orta:rgba(14,42,29,.16); --golge-hafif:rgba(14,42,29,.14); --harita-zemin:#E3EBE6; --harita-suzgec:saturate(.72) contrast(.98) brightness(1.02); --marker-cizgi:#FFFFFF; --sev-item-uzeri:#F0F5F2; /* Açık temada kâğıt artık "aydınlık ada" olamaz; kontrastı sayfadan biraz daha beyaz olmasıyla ve belirgin gölgesiyle kuruyor — masaya konmuş gerçek bir sayfa gibi. */ --kagit:#FFFFFF; --kagit-metin:#0E2A1D; --kagit-sonuk:#4A6357; --kagit-hat:rgba(22,56,42,.24); --kagit-cizgi:rgba(22,56,42,.04); --uyari-alarm-metin:#8E241C; --uyari-dikkat-metin:#6B4705; --gren-opak:.022; color-scheme:light; } :root{color-scheme:dark} /* ═══ sıfırlama ═══ */ *,*::before,*::after{box-sizing:border-box} *{margin:0;padding:0} html{ -webkit-text-size-adjust:100%; /* overflow-x body'de DE var; ikisi birden gerekiyor. Yalnız body'de olduğunda bazı motorlarda görünüm alanı (initial containing block) yine de taşan içerik kadar genişleyebiliyor — o zaman position:fixed olan üst çubuk ekrandan geniş oluyor ve sağ kenara çivili tema düğmesi görünür alanın dışına taşıyor. Kökte de kapatınca genişleme kalmıyor. Buraya scrollbar-gutter:stable EKLEMEYİN: kaydırma çubuğuna kalıcı yer ayırıyor ama sabit konumlu üst çubuk o ayrılmış yeri de kapsıyor, yani sorunun ta kendisini üretiyor. */ overflow-x:clip; } body{ background:var(--gece);color:var(--kar); font-family:var(--govde);font-size:17px;line-height:1.62;font-weight:400; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; overflow-x:clip; /* Telefonda her dokunuşta beliren mavi kutu sayfanın diline ait değil; yerine markanın yeşilinden sönük bir iz bırakıyor. */ -webkit-tap-highlight-color:rgba(76,197,129,.16); } img,svg,canvas{display:block;max-width:100%} img{height:auto} a{color:inherit;text-decoration:none} ul,ol{list-style:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} ::selection{background:var(--filiz);color:var(--gece)} :focus-visible{outline:2px solid var(--filiz);outline-offset:3px;border-radius:2px} .atla{ position:fixed;top:10px;inset-inline-start:10px;z-index:400;padding:12px 18px; background:var(--filiz);color:var(--gece);border-radius:8px;font-weight:600; transform:translateY(-160%);transition:transform .2s var(--yay); } .atla:focus{transform:none} .wrap{width:100%;max-width:var(--en);margin-inline:auto;padding-inline:var(--kenar)} .mono{font-family:var(--mono);font-feature-settings:"tnum" 1} /* ═══ tipografi ═══ Archivo değişken bir grotesk; genişlik ekseni gerçekten kullanılıyor. Genişletilmiş kesim cihaz üstü etiketlere ve endüstriyel tabelaya benzediği için bu ürüne oturuyor. Satırlar elle bölündüğünden otomatik dengeleme kapalı. */ .dev,.buyuk,.orta{ font-family:var(--dspl);font-weight:700;font-stretch:122%; letter-spacing:-.045em;line-height:.94;color:var(--baslik); } .dev{font-size:clamp(2.15rem,6.4vw,6.6rem)} .buyuk{font-size:clamp(1.95rem,4.4vw,3.9rem);line-height:.98} .orta{font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1} h3{ font-family:var(--dspl);font-weight:650;font-stretch:112%; letter-spacing:-.02em;line-height:1.16;font-size:1.2rem;color:var(--baslik); } .lede{color:var(--sis);font-size:clamp(1.02rem,1.3vw,1.14rem);max-width:54ch;line-height:1.6} .etiket{ display:flex;align-items:center;gap:12px;flex-wrap:wrap; font-family:var(--mono);font-size:.7rem;font-weight:500; letter-spacing:.18em;text-transform:uppercase; } .etiket span{ color:var(--filiz);border:1px solid var(--hat-guclu); padding:5px 11px;border-radius:99px;background:rgba(76,197,129,.06); } .etiket em{font-style:normal;color:var(--sis-sonuk)} .satir{display:block;overflow:hidden;padding-bottom:.06em} .satir>span{display:block;transform:translateY(108%);transition:transform .95s var(--yay)} .geldi .satir>span{transform:none} .satir:nth-child(2)>span{transition-delay:.09s} .satir:nth-child(3)>span{transition-delay:.18s} [data-ac]{opacity:0;transform:translateY(20px);transition:opacity .8s var(--yay-yumusak),transform .8s var(--yay)} [data-ac].geldi{opacity:1;transform:none} [data-gecikme="1"]{transition-delay:.08s} [data-gecikme="2"]{transition-delay:.16s} [data-gecikme="3"]{transition-delay:.24s} .bolum-bas{display:grid;gap:20px;margin-bottom:clamp(44px,5vw,76px)} /* ═══ düğmeler ═══ */ .dg{ position:relative;display:inline-flex;align-items:center;justify-content:center; gap:10px;padding:15px 28px;border-radius:99px; font-weight:600;font-size:.95rem;border:1px solid transparent;white-space:nowrap; transition:background .25s var(--yay),color .25s var(--yay), border-color .25s var(--yay),box-shadow .35s var(--yay); } .dg-dolu{background:var(--dolu-zemin);color:var(--dolu-metin)} .dg-dolu:hover{background:var(--dolu-zemin-uzeri);box-shadow:0 10px 34px -8px rgba(76,197,129,.55)} .dg-hayalet{border-color:var(--hat-guclu);color:var(--kar)} .dg-hayalet:hover{border-color:var(--filiz);color:var(--filiz);background:rgba(76,197,129,.06)} /* ═══ film greni ═══ */ .gren{ position:fixed;inset:0;z-index:300;pointer-events:none;opacity:var(--gren-opak); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* mix-blend-mode BİLEREK yok. Tam ekran sabit bir blend katmanı, altındaki her şey oynadığında tüm görünüm alanını yeniden karıştırmaya zorluyordu: hero'nun her karesi, her kaydırma karesi bu katmanın bedelini ödüyordu. %3 opaklıkta overlay ile düz alfa arasında gözle fark yok, bu yüzden blend kaldırıldı. translateZ(0) katmanı kendi compositor yüzeyine alır; böylece üzerinde durduğu içerik repaint olsa bile gren yeniden boyanmıyor. Buraya mix-blend-mode/filter EKLEMEYİN. */ transform:translateZ(0); } /* ═══ açılış ═══ */ .acilis{ position:fixed;inset:0;z-index:500;background:var(--gece); display:flex;align-items:center;justify-content:center; transition:opacity .7s var(--yay),visibility .7s; } .acilis.bitti{opacity:0;visibility:hidden;pointer-events:none} .acilis-ic{display:flex;align-items:center;gap:18px;font-family:var(--mono);font-size:.76rem;letter-spacing:.2em;text-transform:uppercase} .acilis-kod{color:var(--baslik);font-weight:500} .acilis-yazi{color:var(--sis-sonuk)} .acilis-cizgi{display:block;width:clamp(70px,16vw,190px);height:1px;background:var(--hat)} .acilis-cizgi i{display:block;height:100%;width:0;background:var(--filiz);transition:width 1s var(--yay)} .acilis.suruyor .acilis-cizgi i{width:100%} .acilis-ic>*{opacity:0;transform:translateY(9px);transition:opacity .5s var(--yay),transform .5s var(--yay)} .acilis.suruyor .acilis-ic>*{opacity:1;transform:none} .acilis.suruyor .acilis-ic>*:nth-child(2){transition-delay:.1s} .acilis.suruyor .acilis-ic>*:nth-child(3){transition-delay:.18s} /* ═══════════════════════════════════════════════════════════════ NAV ═══════════════════════════════════════════════════════════════ */ .ust{ position:fixed;top:0;left:0;right:0;z-index:200; border-bottom:1px solid transparent; transition:background .4s var(--yay),border-color .4s,transform .45s var(--yay); } .ust.yapisik{background:var(--cam-nav);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--hat)} .ust.gizli{transform:translateY(-102%)} .ust-ic{ max-width:var(--en);margin-inline:auto;padding-inline:var(--kenar); display:flex;align-items:center;gap:32px;height:74px;transition:height .4s var(--yay); } .ust.yapisik .ust-ic{height:62px} .marka{display:flex;align-items:center;gap:13px;flex:none} .marka img{width:auto} /* İlimera logosu tek renkli beyaz bir PNG: açık temada ters çevrilerek siyaha dönüyor, böylece ikinci bir dosya indirmeye gerek kalmıyor. */ .marka-ilimera{height:19px;opacity:.78} [data-tema="acik"] .marka-ilimera{filter:invert(1);opacity:.72} /* Frigolive kelime markasının PNG'si üstteki konum iğnesi için fazladan boşluk taşıyor; bu yüzden İlimera ile aynı yüksekliğe getirildiğinde harfler görsel olarak daha aşağıda kalıyor. translateY bunu telafi edip iki markanın harf gövdesini aynı hizaya çekiyor. Frigolive kelime markası tek renkli yeşil; koyu zeminde sönük kaldığı için açılıyor, açık zeminde marka yeşili olduğu gibi doğru. */ /* Kaydırma YÜZDE, sabit piksel değil. PNG 260×53 ve harf gövdesi 18-52. satırlarda: harflerin optik merkezi kutu merkezinin %16 altına düşüyor, çünkü "İ"nin üstündeki konum iğnesi kutuyu yukarı doğru büyütüyor. Sabit -3px yalnız 22px'lik masaüstü boyunda doğruydu; logo mobilde 18px'e, 400px altında 16px'e inince kaydırma orantısız kalıp iki marka birbirinden kayıyordu. Yüzde her boyda kendini düzeltiyor. */ .marka-frigo{height:22px;transform:translateY(-16%);filter:brightness(1.35) saturate(.95)} [data-tema="acik"] .marka-frigo{filter:none} /* tema anahtarı */ .tema-dugme{ width:38px;height:38px;flex:none;display:grid;place-items:center; border:1px solid var(--hat-guclu);border-radius:99px;color:var(--sis); transition:color .25s,border-color .25s,background .25s; } .tema-dugme:hover{color:var(--baslik);border-color:var(--filiz);background:rgba(76,197,129,.07)} .tema-dugme svg{ grid-area:1/1;width:17px;height:17px;fill:none;stroke:currentColor; stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; transition:opacity .3s var(--yay),transform .4s var(--yay); } /* koyu temadayken güneş (açığa geçir), açık temadayken ay gösterilir */ .tema-ay{opacity:0;transform:rotate(-60deg) scale(.6)} [data-tema="acik"] .tema-gunes{opacity:0;transform:rotate(60deg) scale(.6)} [data-tema="acik"] .tema-ay{opacity:1;transform:none} .marka-ayrac{width:1px;height:20px;background:var(--hat-guclu)} /* ═══ DİL SEÇİCİ ═══ Düğme tema anahtarıyla aynı ölçüde (38px yuvarlak) ama içinde ikon yerine seçili dilin kodu var: ziyaretçi paneli açmadan hangi dilde olduğunu görüyor. Panelin içeriğini js/i18n.js çiziyor — sekiz dili işaretlemede iki kez (masaüstü + mobil) yazmak, birine dil eklenip diğerine unutulması demekti. */ .dil{position:relative;display:flex;align-items:center;flex:none} .dil-dugme{ display:inline-flex;align-items:center;gap:5px;height:38px;padding:0 11px; border:1px solid var(--hat-guclu);border-radius:99px;color:var(--sis); transition:color .25s,border-color .25s,background .25s; } .dil-dugme:hover,.dil.acik .dil-dugme{color:var(--baslik);border-color:var(--filiz);background:rgba(76,197,129,.07)} .dil-dugme svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .dil-secili{font-size:.68rem;font-weight:600;letter-spacing:.06em} /* Platform açılırıyla aynı davranış ve aynı görsel dil: hover ile açılıyor, `hidden` değil visibility ile gizli — script düşse de menü çalışsın. */ .dil-panel{ position:absolute;top:calc(100% + 14px);inset-inline-end:0; transform:translateY(-6px); width:210px;display:grid;gap:1px;padding:7px; border:1px solid var(--hat);border-radius:16px;background:var(--cam); backdrop-filter:blur(14px) saturate(1.2); box-shadow:0 26px 60px -22px var(--golge-orta); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .28s var(--yay),transform .28s var(--yay),visibility .28s; } /* Düğme ile panel arasındaki boşlukta imleç sarkıp menüyü kapatmasın. */ .dil-panel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px} .dil:hover .dil-panel,.dil:focus-within .dil-panel,.dil.acik .dil-panel{ opacity:1;visibility:visible;pointer-events:auto;transform:none; } .dil-secenek{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:8px 10px;border-radius:10px;text-align:start; color:var(--sis);transition:background .25s var(--yay),color .25s; } .dil-secenek:hover{background:rgba(76,197,129,.09);color:var(--baslik)} .dil-secenek:focus-visible{outline:2px solid var(--filiz);outline-offset:-2px} .dil-secenek.secili{color:var(--filiz)} .dil-ad{font-size:.86rem;font-weight:500} .dil-kisa{font-size:.66rem;color:var(--sis-sonuk)} .dil-secenek.secili .dil-kisa{color:var(--filiz)} /* Mobil menüdeki karşılığı: açılır panel değil, iki sütunlu bir ızgara — sekiz dil tek sütunda telefonda ekranı taşırıyor. */ .tam-menu-dil h4{ font-size:.62rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase; color:var(--sis-sonuk);margin-bottom:8px; } .dil-agi{display:grid;grid-template-columns:1fr 1fr;gap:6px} .dil-kutu{ display:flex;align-items:center;justify-content:space-between;gap:8px; padding:10px 12px;border:1px solid var(--hat);border-radius:12px; color:var(--sis);text-align:start; } .dil-kutu.secili{border-color:var(--filiz);color:var(--filiz)} .dil-kutu .dil-ad{font-size:.9rem} /* Aralık sabit 26px değil: "Nerede kullanılır" etiketi beş bağlantılı satırı ~65px uzattı ve 1080-1240px arasında marka + bağlantılar + iki düğme tek satıra ancak sığıyor. Dar uçta aralık 16px'e iniyor, geniş pencerede eski 26px'ine dönüyor. */ .ust-linkler{display:flex;align-items:center;gap:clamp(12px,1.35vw,22px);margin-inline-start:auto} /* nowrap + flex:none zorunlu: iki etiket ("Teknik özellikler", "Nerede kullanılır") boşluk taşıdığı için sıkışınca iki satıra kırılıyor, o anda satır yüksekliği büyüyüp tek kelimelik komşularının hizası kayıyordu. Kırılmayı yasaklamak taşmayı çözmez, yalnız görünür kılar — çubuğun dar bantta sığması aşağıdaki 1180-1360 bloğuyla sağlanıyor. */ .ust-linkler>a,.ust-acilir-dugme{position:relative;flex:none;white-space:nowrap;font-size:.88rem;color:var(--sis);padding-block:4px;transition:color .25s} .ust-linkler>a::after,.ust-acilir-dugme::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--filiz); transform:scaleX(0);transform-origin:right;transition:transform .4s var(--yay); } .ust-linkler>a:hover,.ust-acilir-dugme:hover,.ust-acilir.acik .ust-acilir-dugme{color:var(--baslik)} .ust-linkler>a:hover::after,.ust-acilir-dugme:hover::after,.ust-acilir.acik .ust-acilir-dugme::after{transform:scaleX(1);transform-origin:left} /* ═══ PLATFORM AÇILIR PANELİ ═══ Dört dış adres (api · developer · support · status) tek bir çubuk öğesine sığsın diye. JS'siz de çalışıyor: açılma temel hâlde :hover ile, motion.js yalnızca tıklama/klavye/dışarı tıklama hâllerini ekliyor. Bu yüzden panel `hidden` DEĞİL, visibility ile gizli — `hidden` olsaydı script düşünce panel hiç açılmazdı. */ .ust-acilir{position:relative;display:flex;align-items:center} .ust-acilir-dugme{display:inline-flex;align-items:center;gap:5px} .ust-acilir-ok{ width:13px;height:13px;flex:none;fill:none;stroke:currentColor; stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round; transition:transform .3s var(--yay); } .ust-acilir:hover .ust-acilir-ok,.ust-acilir.acik .ust-acilir-ok{transform:rotate(180deg)} .ust-acilir-panel{ position:absolute;top:calc(100% + 16px);left:50%; transform:translateX(-50%) translateY(-6px); width:min(322px,78vw);display:grid;gap:2px;padding:8px; border:1px solid var(--hat);border-radius:18px;background:var(--cam); backdrop-filter:blur(14px) saturate(1.2); box-shadow:0 26px 60px -22px var(--golge-orta); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .28s var(--yay),transform .28s var(--yay),visibility .28s; } /* Düğme ile panel arasındaki 16px boşlukta imleç sarkıyor ve menü kapanıyordu; köprü o boşluğu paneli büyütmeden dolduruyor. */ .ust-acilir-panel::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px} .ust-acilir:hover .ust-acilir-panel, .ust-acilir:focus-within .ust-acilir-panel, .ust-acilir.acik .ust-acilir-panel{ opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%); } .ust-acilir-panel a{ display:flex;align-items:center;gap:11px;padding:9px 10px; border-radius:12px;transition:background .25s var(--yay); } .ust-acilir-panel a:hover{background:rgba(76,197,129,.09)} .ust-acilir-panel a:focus-visible{outline:2px solid var(--filiz);outline-offset:-2px} /* İkon kutusu #teknik'teki .kunye-sim ile aynı dil, yalnız daha küçük. */ .acilir-sim{ flex:none;display:grid;place-items:center;width:32px;aspect-ratio:1; border-radius:10px;background:var(--frigo);color:var(--kagit); } .acilir-sim svg{width:54%;height:54%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .acilir-metin{display:grid;gap:1px;min-width:0} .acilir-metin b{font-size:.88rem;font-weight:600;color:var(--baslik)} .acilir-metin .mono{font-size:.7rem;color:var(--filiz)} /* Altıncı öğe eklenince çubuk taşıyor (marka ~225px + iki düğme + tema + dil seçici ~350px sabit, kalana altı etiket sığmıyor). Yalnız yazıyı küçültmek yetmiyordu — fazlalık en uzun iki etiketi ("Teknik özellikler", "Nerede kullanılır") ikinci satıra atıyor, satır yükseklikleri farklılaşınca komşu bağlantıların hizası bozuluyordu. Bu bantta yazının yanı sıra ÜÇ aralık ve düğme dolgusu da sıkışıyor (~70px kazanç). Alt sınır 1180 DEĞİL 1260: dil seçici çubuğa ~62px ekledi ve eski kırılımda sıkıştırılmış hâl bile 1180-1260 arasında sığmıyordu; o bant artık hamburger menüye düşüyor (bkz. aşağıdaki 1259px bloğu). */ @media (min-width:1260px) and (max-width:1420px){ .ust-ic{gap:18px} .ust-linkler{gap:clamp(10px,1.05vw,16px)} .ust-linkler>a,.ust-acilir-dugme{font-size:.82rem} .ust-aksiyon{gap:8px} .ust-aksiyon .dg{padding:10px 15px} } .ust-aksiyon{display:flex;align-items:center;gap:11px;flex:none} .ust-aksiyon .dg{padding:10px 20px;font-size:.87rem} .ust-menu{display:none;width:42px;height:42px;border:1px solid var(--hat-guclu);border-radius:99px;position:relative} .ust-menu i{position:absolute;inset-inline-start:13px; width:16px;height:1.4px;background:var(--kar);transition:transform .3s var(--yay)} .ust-menu i:nth-child(1){top:18px} .ust-menu i:nth-child(2){top:23px} .ust-menu[aria-expanded="true"] i:nth-child(1){transform:translateY(2.5px) rotate(45deg)} .ust-menu[aria-expanded="true"] i:nth-child(2){transform:translateY(-2.5px) rotate(-45deg)} /* Platform bloğu eklenince içerik alçak telefonlarda (ör. 390x844, tarayıcı çubukları düştükten sonra ~700px) ekranı taşıyor. `center` ile birlikte overflow kullanmak üst kısmı erişilemez hâle getirdiği için hizalama `flex-start` + otomatik kenar boşluğu: sığdığında ortalanıyor, sığmadığında kırpılmadan kayıyor. */ .tam-menu{ position:fixed;inset:0;z-index:190;background:var(--gece); display:flex;flex-direction:column;justify-content:flex-start;gap:34px; padding:100px var(--kenar) 56px; overflow-y:auto;overscroll-behavior:contain; } .tam-menu>:first-child{margin-top:auto} .tam-menu>:last-child{margin-bottom:auto} .tam-menu[hidden]{display:none} .tam-menu nav{display:flex;flex-direction:column;gap:4px} .tam-menu nav a{ font-family:var(--dspl);font-weight:650;font-stretch:118%;letter-spacing:-.03em; font-size:clamp(1.9rem,9vw,2.8rem);color:var(--baslik);padding-block:6px; } .tam-menu-dugmeler{display:flex;gap:12px;flex-wrap:wrap} .tam-menu .dg{align-self:flex-start} /* Masaüstündeki açılır panelin telefon karşılığı: aynı dört adres, ama gezinme yazısının boyunda değil — kendi satır listesinde. */ .tam-menu-platform h4{ font-size:.62rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase; color:var(--sis-sonuk);margin-bottom:6px; } .tam-menu-platform a{ display:flex;align-items:baseline;justify-content:space-between;gap:16px; padding:11px 0;border-bottom:1px solid var(--hat); } .tam-menu-platform li:last-child a{border-bottom:0} .tam-menu-platform b{font-size:1rem;font-weight:600;color:var(--kar)} .tam-menu-platform .mono{font-size:.72rem;color:var(--filiz)} /* ═══════════════════════════════════════════════════════════════ KONTROL PANELİ — sayfanın imzası Burası artık sayfaya özel bir "tanıtım grafiği" DEĞİL: ürünün kendi sevkiyat takip ekranının (takip.frigolive.nl → apps/dashboard, `src/app/tracking/page.tsx` ve `components/devices/BilgiKartiPopup.tsx`) birebir kopyası. Ziyaretçi burada ne görüyorsa panele girdiğinde de aynısını görmeli — o yüzden aşağıdaki ölçüler, yarıçaplar ve renkler oradan alındı, sayfanın genel dilinden değil. Ürünün paleti tek bir yerde, --p-* belirteçlerinde toplandı. Panel açık temada üründeki gibi beyaz/slate; sayfanın koyu temasında ise ürünün kendi koyu tema değerlerini (--dk-surface / --dk-card / --dk-border) kullanır. ═══════════════════════════════════════════════════════════════ */ .pano{ /* ── ürünün koyu teması (dashboard globals.css) ── */ --p-yuzey:#1a2236; /* --dk-surface */ --p-kart:#1e2840; /* --dk-card */ --p-kart2:#232e4a; /* tonlu şerit (üründeki bg-slate-50 karşılığı) */ --p-hat:rgba(255,255,255,.10); --p-m1:#e8e8f8; /* birincil metin */ --p-m2:#aab8d8; /* --dk-text-2 */ --p-m3:#7888aa; /* mikro etiket */ --p-yesil:#2FBF8B; /* marka yeşili — koyuda açılmış hâli */ --p-sic:#F87171; --p-nem:#5BB7E8; --p-isik:#F5A623; --p-sar:#C08A6E; --p-mavi:#60A5FA; /* varış noktası */ --p-golge:0 24px 60px -28px rgba(0,0,0,.85); --telefon-govde:#0d1220; --telefon-kenar:rgba(255,255,255,.14); /* rozet/şerit dolguları — ürünün pill renkleri (koyu temada açılmış hâli) */ --p-yesil-yum:rgba(47,191,139,.16); --p-isik-yum:rgba(245,166,35,.18); --p-sic-yum:rgba(248,113,113,.16); --p-sic-hat:rgba(248,113,113,.45); --p-isik-hat:rgba(245,166,35,.45); --p-yesil-bant:rgba(47,191,139,.12); --p-sic-bant:rgba(248,113,113,.12); /* Panel bir TELEFON: ziyaretçi bunu sahada elinde böyle görecek. Dış kabuk gövde, içindeki .telefon-ekran ekranın kendisi. position:fixed DEĞİL — sabitken sayfa kaydıkça haritaya göre kayıyordu. Artık haritayla aynı flex satırında duruyor ve align-self:stretch ile .filo-sahne'nin yüksekliğini birebir alıyor; üstü de altı da haritayla aynı hizada, kaymıyor. */ position:relative;z-index:2;flex:none;width:var(--pano-w);align-self:stretch; padding:12px 11px 14px; opacity:0;transform:translateY(22px); transition:opacity .7s var(--yay),transform .7s var(--yay), border-color .5s var(--yay),box-shadow .6s var(--yay); /* Ürün Inter'i sıkı satır aralığıyla kullanıyor; sayfanın 1.62'lik gövde aralığı panele sızarsa satırlar üründekinin iki katı yükseklikte olur. */ font-family:var(--govde);line-height:1.35; background:var(--telefon-govde); border:1px solid var(--telefon-kenar);border-radius:52px; box-shadow:var(--p-golge), inset 0 0 0 1.5px rgba(255,255,255,.07), inset 0 1px 1px rgba(255,255,255,.14); } /* yan tuşlar — solda ses, sağda güç */ .pano::before,.pano::after{ content:"";position:absolute;width:2px;border-radius:2px; background:var(--telefon-kenar); } .pano::before{inset-inline-start:-3px;top:118px;height:96px; background:linear-gradient(var(--telefon-kenar) 0 42px,transparent 42px 58px,var(--telefon-kenar) 58px 100%)} .pano::after{inset-inline-end:-3px;top:150px;height:78px} .telefon-ada{ position:absolute;top:22px;left:50%;transform:translateX(-50%);z-index:3; width:86px;height:24px;border-radius:99px;background:#05070d; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); } .telefon-cubuk{ position:absolute;bottom:6px;left:50%;transform:translateX(-50%);z-index:3; width:112px;height:4px;border-radius:99px;background:rgba(255,255,255,.32); } .telefon-ekran{ position:relative;height:100%;overflow:hidden; display:grid;gap:8px;align-content:start; padding:34px 10px 18px; /* üstte ada, altta ana ekran çubuğu payı */ background:var(--p-yuzey);border-radius:42px; } /* Açık temada panel üründeki hâliyle birebir: beyaz kartlar, slate metin. Küçük etiketlerde ürünün #94a3b8'i yerine bir ton koyusu kullanılıyor — açık temada soluk gri metin yasağı (apps/dashboard/CLAUDE.md) burada da geçerli. */ :root[data-tema="acik"] .pano{ --p-yuzey:#F1F5F9; --p-kart:#FFFFFF; --p-kart2:#F8FAFC; --p-hat:#E7EDF3; --p-m1:#1e293b; --p-m2:#334155; --p-m3:#64748b; --p-yesil:#1B9970; --p-sic:#EF4444; --p-nem:#3B9ED4; --p-isik:#E8A020; --p-sar:#8B5340; --p-mavi:#3B82F6; --p-golge:0 24px 60px -30px rgba(14,42,29,.45); --telefon-govde:#111827; --telefon-kenar:rgba(255,255,255,.16); /* bu ikisi üründeki rozetlerin birebir dolgusu (BilgiKartiPopup) */ --p-yesil-yum:#E8F8F2; --p-isik-yum:#FFF3E0; --p-sic-yum:#FDECEC; --p-sic-hat:rgba(239,68,68,.35); --p-isik-hat:rgba(232,160,32,.40); --p-yesil-bant:rgba(27,153,112,.10); --p-sic-bant:rgba(239,68,68,.10); } .pano.acik{opacity:1;transform:none} .pano[data-durum="dikkat"]{border-color:rgba(232,160,32,.5)} .pano[data-durum="alarm"]{border-color:rgba(239,68,68,.55)} /* ── başlık çubuğu ── */ .pano-bas{display:flex;align-items:center;gap:9px;padding:2px 2px 8px} .pano-bas-ikon{ width:30px;height:30px;border-radius:10px;flex:none; display:flex;align-items:center;justify-content:center;background:var(--p-yesil); } .pano-bas-ikon svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .pano-bas-ad{display:grid;flex:1;min-width:0} .pano-bas-ad b{font-size:.8rem;font-weight:600;color:var(--p-m1);line-height:1.25} .pano-kod{font-size:.65rem;font-style:normal;color:var(--p-m3);line-height:1.3} .pano-canli{ display:inline-flex;align-items:center;gap:5px;flex:none; padding:3px 8px;border-radius:999px;background:var(--p-yesil-yum); font-size:.6rem;font-weight:600;color:var(--p-yesil); } .pano-canli i{width:5px;height:5px;border-radius:50%;background:var(--p-yesil);animation:nabiz 2s ease-out infinite} @keyframes nabiz{ 0%{box-shadow:0 0 0 0 rgba(27,153,112,.55)} 70%{box-shadow:0 0 0 7px rgba(27,153,112,0)} 100%{box-shadow:0 0 0 0 rgba(27,153,112,0)} } .pano[data-durum="alarm"] .pano-canli{color:var(--p-sic);background:var(--p-sic-yum)} .pano[data-durum="alarm"] .pano-canli i{background:var(--p-sic);animation-name:nabiz-alarm} @keyframes nabiz-alarm{ 0%{box-shadow:0 0 0 0 rgba(239,68,68,.6)} 70%{box-shadow:0 0 0 7px rgba(239,68,68,0)} 100%{box-shadow:0 0 0 0 rgba(239,68,68,0)} } /* ── kart kabuğu — üründeki rounded-2xl + border-slate-100 + shadow-sm ── */ .pano-kart{ background:var(--p-kart);border:1px solid var(--p-hat);border-radius:14px;overflow:hidden; box-shadow:0 1px 3px rgba(15,23,42,.06); } .kart-bas{ padding:7px 11px;border-bottom:1px solid var(--p-hat);background:var(--p-kart2); font-size:.58rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--p-m2); } /* ── cihaz bilgi kartı (BilgiKartiPopup) ── */ .cihaz-bas{display:flex;align-items:center;gap:7px;padding:8px 10px} .cihaz-gorsel{ position:relative;width:26px;height:26px;border-radius:8px;flex:none;overflow:visible; border:2px solid var(--p-yesil); } .cihaz-gorsel img{width:100%;height:100%;object-fit:cover;border-radius:5px} .cihaz-nokta{ position:absolute;top:-3px;inset-inline-end:-3px;width:9px;height:9px;border-radius:50%; background:var(--p-yesil);border:2px solid var(--p-kart); } .cihaz-ad{flex:1;min-width:0;font-size:.74rem;font-weight:600;color:var(--p-m1); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rozet{ flex:none;padding:2px 8px;border-radius:999px;font-size:.6rem;font-weight:600;white-space:nowrap; } .rozet-sevkiyat{background:var(--p-isik-yum);color:var(--p-isik)} .rozet-cevrimici{background:var(--p-yesil-yum);color:var(--p-yesil)} .cihaz-govde{display:flex;align-items:stretch;border-top:1px solid var(--p-hat)} .pano-olcum{display:grid;grid-template-columns:repeat(4,1fr);flex:1;min-width:0} .pano-olcum>div{ display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 0 6px; } .pano-olcum>div+div{border-left:1px solid var(--p-hat)} .olcum-ikon{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .olcum-deger{display:flex;align-items:baseline;gap:1px;line-height:1} .olcum-deger b{font-size:.72rem;font-weight:600;font-variant-numeric:tabular-nums} .olcum-deger i{font-style:normal;font-size:.56rem;font-weight:600} .olcum-ad{font-size:.55rem;font-weight:500;color:var(--p-m3);line-height:1} .pano-olcum [data-olcum="sicaklik"]{color:var(--p-sic)} .pano-olcum [data-olcum="nem"]{color:var(--p-nem)} .pano-olcum [data-olcum="isik"]{color:var(--p-isik)} .pano-olcum [data-olcum="darbe"]{color:var(--p-sar)} /* eşik aşımında ürün de değeri kırmızıya çekip kartı işaretliyor */ .pano[data-durum="alarm"] [data-olcum="sicaklik"] .olcum-deger b{animation:vurgu 1.2s ease-out} @keyframes vurgu{0%{opacity:.35}100%{opacity:1}} .cihaz-guc{ display:flex;flex-direction:column;justify-content:center;gap:5px; padding:0 9px;border-left:1px solid var(--p-hat);flex:none; } .cihaz-guc span{display:flex;align-items:center;gap:4px;font-size:.6rem;font-weight:600;color:var(--p-m2)} .cihaz-guc svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .cihaz-guc [data-olcum="pil"]{color:var(--p-yesil)} .cihaz-guc b{font-weight:600;font-variant-numeric:tabular-nums} .cihaz-guc i{font-style:normal} .cihaz-alt{ display:flex;align-items:center;justify-content:space-between;gap:8px; padding:6px 10px;border-top:1px solid var(--p-hat); } .cihaz-gorulme{display:flex;gap:4px;font-size:.6rem;color:var(--p-m3)} .cihaz-gorulme b{font-weight:600;color:var(--p-m2)} /* ── canlı konum — kroki gerçek koordinatlardan çizilir ── */ .rota-tuval{background:var(--p-kart2);border-bottom:1px solid var(--p-hat)} /* Telefonun ekranındaki gerçek Leaflet haritası. Etkileşim JS tarafında kapatıldı; burada da tıklamayı yutmasın diye pointer-events kapalı. */ .rota-harita{ width:100%;aspect-ratio:11/6;min-height:118px; background:var(--p-kart2);pointer-events:none; } .rota-harita .leaflet-container{background:var(--p-kart2)} /* mini haritadaki tır — büyük haritadakinin küçültülmüş hâli */ .pano-arac span{ display:block;width:12px;height:12px;margin:3px;border-radius:50%; background:var(--p-yesil);border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.35); } .pano[data-durum="alarm"] .pano-arac span{background:var(--p-sic)} /* ── güzergâh — kalkış/varış zaman çizelgesi, harita kartının altında ── */ .guzergah{position:relative;display:grid;gap:7px;padding:8px 11px 9px;padding-inline-start:24px} .guzergah-cizgi{position:absolute;inset-inline-start:15px;top:14px;bottom:14px;width:1px;background:var(--p-hat)} .durak{display:grid;gap:1px;position:relative} .durak::before{ content:"";position:absolute;inset-inline-start:-13px;top:5px;width:8px;height:8px;border-radius:50%; } .durak-kalkis::before{background:var(--p-yesil)} .durak-varis::before{background:var(--p-mavi)} .durak-ad{font-size:.55rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--p-m3);line-height:1.2} .durak b{font-size:.68rem;font-weight:600;color:var(--p-m1);line-height:1.35} .pano-saat{ display:flex;align-items:center;gap:6px;padding:7px 11px; border-top:1px solid var(--p-hat);background:var(--p-kart2); } .pano-saat svg{width:13px;height:13px;flex:none;fill:none;stroke:var(--p-m3);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .saat-ad{flex:1;min-width:0;font-size:.6rem;color:var(--p-m3)} .pano-saat b{font-size:.86rem;font-weight:600;color:var(--p-m1);font-variant-numeric:tabular-nums;letter-spacing:-.01em} .pano-saat em{font-style:normal;font-size:.58rem;color:var(--p-m3)} /* ── sensör geçmişi ── */ .grafik-govde{display:grid;gap:5px;padding:8px 11px 9px} .grafik-lejant{display:flex;align-items:center;gap:5px;font-size:.6rem;font-weight:500;color:var(--p-m2)} .grafik-lejant i{width:6px;height:6px;border-radius:50%;background:var(--p-sic)} .grafik-svg{width:100%;height:56px;overflow:hidden;border-radius:6px} .grafik-bant{fill:var(--p-yesil-bant)} .grafik-izgara line{stroke:var(--p-hat);stroke-width:1;stroke-dasharray:3 3} .grafik-iz{fill:none;stroke:var(--p-sic);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .pano[data-durum="alarm"] .grafik-bant{fill:var(--p-sic-bant)} .grafik-etiket{font-size:.55rem;color:var(--p-m3)} /* ── uyarı bildirimi — ürünün köşe popup'ı (AppLayout.tsx) ── Panel sağda olduğu için bildirim sol üstte duruyor; üründeki gibi kenardan kayarak giriyor, rengini uyarının türü belirliyor. --p-* belirteçlerini panelden değil kendi kopyasından alır, çünkü .pano'nun dışında duruyor. */ .uyari-toast{ --p-kart:#1e2840; --p-hat:rgba(255,255,255,.10); --p-m1:#e8e8f8; --p-m2:#aab8d8; --p-sic:#F87171; --p-isik:#F5A623; --p-sic-yum:rgba(248,113,113,.16); --p-isik-yum:rgba(245,166,35,.18); --p-sic-hat:rgba(248,113,113,.45); --p-isik-hat:rgba(245,166,35,.45); position:fixed;z-index:200;pointer-events:none; inset-inline-start:clamp(16px,2vw,32px);top:clamp(78px,10vh,104px); width:min(22rem,calc(100vw - 2rem)); display:flex;align-items:center;gap:11px;padding:11px 13px; font-family:var(--govde);line-height:1.35; background:var(--p-kart);border:1px solid var(--p-hat);border-radius:10px; box-shadow:0 18px 40px -14px rgba(0,0,0,.6); opacity:0;transform:translateX(var(--toast-kay,-28px));visibility:hidden; transition:opacity .22s var(--yay),transform .22s var(--yay),visibility 0s .22s; } :root[data-tema="acik"] .uyari-toast{ --p-kart:#FFFFFF; --p-hat:#E2E8F0; --p-m1:#1e293b; --p-m2:#475569; --p-sic:#EF4444; --p-isik:#E8A020; --p-sic-yum:#FDECEC; --p-isik-yum:#FFF3E0; --p-sic-hat:rgba(239,68,68,.35); --p-isik-hat:rgba(232,160,32,.40); box-shadow:0 18px 40px -18px rgba(14,42,29,.4); } .uyari-toast[data-durum="dikkat"], .uyari-toast[data-durum="alarm"]{opacity:1;transform:none;visibility:visible;transition-delay:0s} .uyari-toast[data-durum="alarm"]{border-color:var(--p-sic-hat)} .uyari-toast[data-durum="dikkat"]{border-color:var(--p-isik-hat)} .uyari-ikon{ width:34px;height:34px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center; } .uyari-ikon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .uyari-toast[data-durum="alarm"] .uyari-ikon{background:var(--p-sic-yum);color:var(--p-sic)} .uyari-toast[data-durum="dikkat"] .uyari-ikon{background:var(--p-isik-yum);color:var(--p-isik)} .uyari-yazi{display:grid;flex:1;min-width:0} .uyari-yazi b{font-size:.72rem;font-weight:600;color:var(--p-m1)} .uyari-yazi small{font-size:.63rem;color:var(--p-m2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .uyari-ok{width:15px;height:15px;flex:none;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .uyari-toast[data-durum="alarm"] .uyari-ok{stroke:var(--p-sic)} .uyari-toast[data-durum="dikkat"] .uyari-ok{stroke:var(--p-isik)} .pano-marka{text-align:center;font-size:.55rem;font-weight:500;color:var(--p-m3);padding-bottom:1px} .pano-marka b{font-weight:600;color:var(--p-yesil)} /* Dar ekranda panel yine ÜRÜNÜN kartı; sadece viewport'a sığması için genişlik daralıyor ve harita alçalıyor. Hiçbir bölüm gizlenmiyor — mobilde de panelde ne varsa o görünsün. */ @media (max-width:1179px){ /* Dar ekranda telefon gövdesi içeriğe göre uzar; sabit yükseklik burada kartları kırpıyor. */ .filo-duzen{flex-direction:column} /* Bölümün vaadi "haritadan seçin, panelde açılsın" — dikey düzende de sıra o olmalı: önce seçilen yer (harita), hemen altında sonucu gösteren telefon. Telefon üstte kalırsa dokunulan şey ekrandan çıkıyor. */ .filo-duzen .filo-sahne{order:-1} .pano{width:100%;max-width:340px;margin-inline:auto;align-self:auto} .telefon-ekran{height:auto} .grafik-svg{height:52px} } /* ═══════════════════════════════════════════════════════════════ HERO ═══════════════════════════════════════════════════════════════ */ .hero{ position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center; padding:clamp(100px,12vh,150px) 0 clamp(76px,11vh,120px); overflow:hidden;isolation:isolate; } .hero-alan{position:absolute;inset:0;width:100%;height:100%;z-index:-2} .hero-yedek{ position:absolute;inset:0;z-index:-3; background: radial-gradient(120% 90% at var(--hero-isik-x,78%) 18%,rgba(52,141,92,.22),transparent 58%), radial-gradient(80% 70% at var(--hero-isik2-x,12%) 82%,rgba(127,212,232,.10),transparent 60%), var(--gece); } .hero::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(var(--hero-aci,96deg),var(--gece) 0%,rgba(5,16,12,.94) 26%,rgba(5,16,12,.72) 45%,rgba(5,16,12,.28) 64%,transparent 80%), linear-gradient(0deg,var(--gece) 1%,transparent 24%); } .hero-ic{position:relative;z-index:2;width:100%;max-width:var(--en);margin-inline:0;padding-inline:var(--kenar)} .hero-ic>*+*{margin-top:clamp(18px,2.4vw,30px)} .hero-alt{display:grid;gap:24px;max-width:min(52ch,56%)} .hero-dugmeler{display:flex;gap:12px;flex-wrap:wrap} .hero-kanit{ display:grid;grid-template-columns:repeat(4,minmax(0,auto));justify-content:start; gap:clamp(22px,3.4vw,54px); margin-top:clamp(30px,4vw,52px);padding-top:24px;border-top:1px solid var(--hat); } .hero-kanit dt{font-family:var(--mono);font-size:clamp(1rem,1.3vw,1.24rem);font-weight:500;color:var(--baslik);white-space:nowrap} .hero-kanit dd{font-size:.74rem;color:var(--sis);margin-top:4px;white-space:nowrap} .hero-cihaz{ position:absolute;z-index:0;top:50%;inset-inline-end:clamp(60px,9vw,220px); transform:translateY(-44%);display:flex;align-items:center;justify-content:center;pointer-events:none; } .hero-cihaz img{ width:auto;height:min(66vh,620px);position:relative;z-index:2; filter:drop-shadow(0 50px 90px rgba(0,0,0,.7)) drop-shadow(0 0 90px rgba(76,197,129,.16)); will-change:transform; } .hero-hale{display:none} /* Cihazın üstünde gezen ışık huzmesi bilerek YOK: efekt, cihaz PNG'sini maske olarak ikinci kez indirip çözmeyi gerektiriyordu (+400 KB ve iki kat bellek). Hero'nun canlılığını izoterm alanı ile hale zaten taşıyor. */ .hero-kaydir{ position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2; display:flex;flex-direction:column;align-items:center;gap:9px; font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sis-sonuk); } .hero-kaydir i{display:block;width:1px;height:38px;background:linear-gradient(var(--filiz),transparent);animation:inis 2.4s ease-in-out infinite} @keyframes inis{0%,100%{transform:scaleY(.35);opacity:.4;transform-origin:top}50%{transform:scaleY(1);opacity:1;transform-origin:top}} /* ═══════════════════════════════════════════════════════════════ FİLO — Leaflet ═══════════════════════════════════════════════════════════════ */ .filo{padding:var(--bolum) 0;background:var(--kat)} /* Telefon ve harita tek satır: align-items:stretch ikisini birebir aynı yüksekliğe getiriyor, böylece üst ve alt kenarlar hizalı kalıyor. */ .filo-duzen{display:flex;align-items:stretch;gap:clamp(14px,1.6vw,26px)} /* Haritanın kendi sabit yüksekliği (min(76vh,640px)) burada İPTAL: satırın boyunu telefon belirliyor, harita da align-items:stretch ile onun altına kadar uzuyor. Sabit yükseklik kalırsa telefon uzadıkça harita kısa kalıyor ve alt kenarlar tutmuyor. */ .filo-duzen .filo-sahne{flex:1;min-width:0;height:auto;min-height:520px} /* Sahne sayfanın EN GENİŞ öğesi. Metin genişliğine (--en: 1240px) sıkıştırınca telefon + liste 616px'ini yiyor ve haritaya avuç içi kadar yer kalıyordu; burada okunacak bir metin yok, harita ne kadar genişse o kadar iyi. */ .filo-genis{ width:100%;max-width:1720px;margin-inline:auto;padding-inline:var(--kenar); } .filo-sahne{ position:relative;height:min(76vh,640px);border-radius:22px;overflow:hidden; border:1px solid var(--hat-guclu);background:var(--kat2); box-shadow:0 44px 90px -40px var(--golge-derin);isolation:isolate; } #harita{position:absolute;inset:0;z-index:1;background:var(--harita-zemin)} .harita-yok{ position:absolute;inset:0;display:grid;place-items:center; color:var(--sis-sonuk);font-size:.9rem; } /* Karolar hâlâ OpenStreetMap'ten geliyor (mevcut davranış, yeni dış origin eklenmedi). Koyu tema CSS ile sağlanıyor — böylece karanlık bir harita için üçüncü taraf bir "dark tile" sağlayıcısına bağlanmak gerekmiyor. */ .leaflet-container{font-family:var(--govde);background:var(--harita-zemin)} /* Ürünün components/map/leaflet-overrides.css dosyasının birebir kopyası: sol-alt "Leaflet | © …" yazısı tüm haritalarda gizlenir. */ .leaflet-control-attribution, .leaflet-container .leaflet-control-attribution{ display:none!important;visibility:hidden!important;opacity:0!important; pointer-events:none!important;width:0!important;height:0!important; overflow:hidden!important;margin:0!important;padding:0!important; } .leaflet-control-zoom a{background:var(--cam)!important;color:var(--kar)!important;border-color:var(--hat)!important} .leaflet-control-zoom a:hover{background:var(--kat2)!important;color:var(--baslik)!important} /* Zoom düğmeleri sol altta; sevkiyat listesi de solda olduğu için listenin sağına kaydırılıyor, yoksa panelin arkasında kalıyor. */ .leaflet-bottom.leaflet-left{margin-left:0} /* araç marker'ı — DİKKAT: position:relative KULLANMA! Leaflet marker'ları position:absolute varsayımıyla translate3d ile konumlandırır; relative yapılırsa ikonlar normal akışta alt alta dizilir ve her tır kendinden önceki ikonlar kadar aşağı kayar. */ .sev-ikon{position:absolute} .sev-halka{position:absolute;inset:0;border-radius:50%;animation:halka 2.4s ease-out infinite} @keyframes halka{ 0%{box-shadow:0 0 0 0 rgba(76,197,129,.5)} 70%{box-shadow:0 0 0 15px rgba(76,197,129,0)} 100%{box-shadow:0 0 0 0 rgba(76,197,129,0)} } .sev-cek{ position:absolute;inset:1px;border-radius:50%;background:var(--filiz); border:2px solid var(--marker-cizgi);display:grid;place-items:center;line-height:1; box-shadow:0 6px 16px var(--golge-hafif); } /* emoji yerine SVG: emoji glifi kutusunun tam ortasında oturmuyor, ikon rota üzerinde olsa bile kaymış görünüyordu. */ .sev-cek svg{width:15px;height:15px;stroke:var(--marker-cizgi);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;display:block} .sev-pop-bas{display:flex;align-items:center;gap:10px;margin-bottom:11px} .sev-kimlik-ikon{ flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center; background:linear-gradient(150deg,rgba(76,197,129,.2),rgba(52,141,92,.35));border:1px solid var(--hat-guclu); } .sev-kimlik-ikon svg{width:16px;height:16px;stroke:var(--filiz);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .sev-kimlik{min-width:0} .sev-kimlik b{display:block;font-family:var(--mono);font-size:.8rem;font-weight:500;color:var(--baslik)} .sev-kimlik small{display:block;font-size:.72rem;color:var(--sis-sonuk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Sevkiyat kartı — haritadaki popup ile sağdaki liste aynı kartı çiziyor. */ .sev-chips{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--hat);border:1px solid var(--hat);border-radius:10px;overflow:hidden} .chip{display:grid;place-items:center;gap:3px;padding:9px 3px;background:var(--kat2)} .chip svg{width:14px;height:14px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .chip b{font-family:var(--mono);font-size:.72rem;font-weight:500;color:var(--kar);white-space:nowrap} .chip small{font-size:.52rem;color:var(--sis-sonuk);white-space:nowrap} .chip.c-sic svg{stroke:var(--alarm)}.chip.c-sic b{color:var(--alarm)} .chip.c-nem svg{stroke:var(--buzmavi)}.chip.c-nem b{color:var(--buzmavi)} .chip.c-isik svg{stroke:var(--sari)}.chip.c-isik b{color:var(--sari)} .chip.c-sars svg{stroke:#9DB0C4}.chip.c-sars b{color:#9DB0C4} .chip.c-dual{gap:6px;align-content:center;justify-items:start;padding:9px 8px} .mini{display:flex;align-items:center;gap:5px} .mini svg{width:13px;height:13px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .mini b{font-family:var(--mono);font-size:.7rem;font-weight:500} .mini.m-pil svg{stroke:var(--filiz)}.mini.m-pil b{color:var(--filiz)} .mini.m-sinyal svg{stroke:var(--sis)}.mini.m-sinyal b{color:var(--sis)} .sev-alt{display:flex;align-items:center;justify-content:space-between;gap:6px 8px;flex-wrap:wrap;margin-top:11px;padding-top:10px;border-top:1px solid var(--hat)} .sev-alt>small{font-size:.62rem;color:var(--sis-sonuk);white-space:nowrap} .sev-durum{display:flex;gap:5px} .sev-durum em{font-style:normal;font-family:var(--mono);font-size:.6rem;padding:3px 9px;border-radius:99px;white-space:nowrap} .sev-durum .r-yolda{background:rgba(245,185,66,.12);color:var(--sari)} .sev-durum .r-cevrim{background:rgba(76,197,129,.12);color:var(--filiz)} .leaflet-popup-content-wrapper{background:var(--kat)!important;color:var(--kar)!important;border:1px solid var(--hat-guclu);border-radius:14px;box-shadow:0 22px 50px var(--golge-orta)} .leaflet-popup-tip{background:var(--kat)!important;border:1px solid var(--hat-guclu)} .leaflet-popup-content{margin:14px;min-width:268px} .leaflet-popup-close-button{color:var(--sis)!important} /* Liste SAĞDA: sol taraf telefon biçimindeki kontrol paneline ait. */ .sev-panel{ /* Simetri: soldaki telefonla birebir aynı genişlik (--pano-w), harita da tam ortada kalıyor. */ position:absolute;top:0;inset-inline-end:0;bottom:0;z-index:800;width:var(--pano-w); background:var(--cam);backdrop-filter:blur(12px);border-inline-start:1px solid var(--hat); display:flex;flex-direction:column;gap:10px;padding:16px 14px;overflow-y:auto; } .sev-panel-bas{display:flex;align-items:center;gap:9px;font-weight:600;color:var(--baslik);font-size:.94rem;padding:0 2px} .sev-panel-bas i{width:6px;height:6px;border-radius:50%;background:var(--filiz);animation:nabiz 2s ease-out infinite} .sev-adet{font-family:var(--mono);font-size:.66rem;background:rgba(76,197,129,.12);color:var(--filiz);padding:2px 9px;border-radius:99px} .sev-item{ display:flex;flex-direction:column;width:100%;padding:12px; background:var(--kat2);border:1px solid var(--hat);border-radius:13px; cursor:pointer;text-align:left;font-family:var(--govde); transition:border-color .2s,background .2s,box-shadow .25s; } .sev-item:hover{border-color:var(--hat-guclu);background:var(--sev-item-uzeri)} .sev-item.secili{border-color:var(--filiz);box-shadow:0 8px 26px -8px rgba(76,197,129,.5);background:var(--sev-item-uzeri)} .sev-item.secili .sev-kimlik b{color:var(--filiz)} .sev-item .sev-pop-bas{margin-bottom:9px} /* Rozet listenin sağına kaydı: sol üstü liste, sağ tarafı da sayfanın sabit kontrol paneli kaplıyor — ikisinin arasındaki boşlukta duruyor. */ .sahne-rozet{ position:absolute;top:14px;inset-inline-start:14px;z-index:800;pointer-events:none; display:flex;align-items:center;gap:8px; font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;color:var(--kar); background:var(--cam-rozet);border:1px solid var(--hat-guclu); padding:8px 14px;border-radius:99px;backdrop-filter:blur(8px); } .sahne-rozet i{width:6px;height:6px;border-radius:50%;background:var(--filiz);animation:nabiz 2s ease-out infinite} /* ═══════════════════════════════════════════════════════════════ ÖLÇÜM — cihazın ne gördüğü. Sevkiyat bölümünün hemen ardından geliyor: orada "panelde ne görünüyor" gösterildi, burada "bu sayı nereden geliyor" cevaplanıyor. Kutulu kart yok — her ölçüm, aralığı sağa hizalı tek bir satır; teknik kâğıdındaki dl düzeninin koyu zemindeki karşılığı. ═══════════════════════════════════════════════════════════════ */ .olcum{padding:var(--bolum) 0;background:var(--gece)} .olcum-duzen{ display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(28px,4.5vw,72px);align-items:center; } .olcum-foto{ position:relative;border-radius:14px;overflow:hidden; border:1px solid var(--hat);background:var(--kat); box-shadow:0 40px 90px -46px var(--golge-derin); } .olcum-foto img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4} /* Fotoğrafın altına sayfanın yeşiline çalan ince bir perde: sahada çekilmiş bir kare, koyu zemine yamanmış gibi durmasın. */ .olcum-foto::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(0deg,rgba(5,16,12,.55),transparent 46%), radial-gradient(70% 60% at 50% 100%,rgba(52,141,92,.20),transparent 70%); } .olcum-govde .bolum-bas{margin-bottom:clamp(28px,3vw,44px)} .olcum-liste{border-top:1px solid var(--hat)} .olcum-liste li{ display:flex;align-items:center;gap:clamp(12px,1.6vw,20px);flex-wrap:wrap; padding:clamp(14px,1.7vw,20px) 0;border-bottom:1px solid var(--hat); } .olcum-sim{ flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:10px; /* Yeşil dolgu .etiket span ve .ozellik-sim ile aynı; beyaz kutular açık temada zeminden ayrışmıyor, ikonlar soluk görünüyordu. */ border:1px solid var(--hat-guclu);background:rgba(76,197,129,.06);color:var(--filiz); transition:color .3s var(--yay),border-color .3s var(--yay); } .olcum-sim svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .olcum-liste li:hover .olcum-sim{border-color:var(--filiz);color:var(--buzmavi)} .olcum-metin{flex:1 1 200px;min-width:0;display:grid;gap:3px} .olcum-metin b{ font-family:var(--dspl);font-weight:650;font-stretch:112%;letter-spacing:-.02em; font-size:clamp(1.06rem,1.15vw,1.2rem);color:var(--baslik); } .olcum-metin small{color:var(--sis);font-size:.88rem;line-height:1.45} /* Değer bu bölümün ASIL bilgisi — ilk sürümde 12px'lik bir dipnot gibi duruyordu ve okunmuyordu. Artık teknik kâğıdındaki dd satırlarının koyu zemindeki karşılığı: kendi yüzeyi olan, başlık renginde, tablo rakamlı bir ölçüm etiketi. */ .olcum-aralik{ flex:none;margin-inline-start:auto;text-align:end;white-space:nowrap; font-size:clamp(.84rem,.95vw,.96rem);font-weight:500;letter-spacing:-.01em; color:var(--baslik);font-variant-numeric:tabular-nums; background:var(--kat2);border:1px solid var(--hat);border-radius:99px; padding:6px 13px; transition:border-color .3s var(--yay),color .3s var(--yay); } .olcum-liste li:hover .olcum-aralik{border-color:var(--hat-guclu)} /* ═══════════════════════════════════════════════════════════════ ÖZELLİKLER — altı yüzey. İlk sürümü yalnızca ince çizgi + numara + metindi; ekranda "sadece yazı" gibi duruyordu. Artık her madde kenarlıklı, yuvarlak bir yüzey: .pano-kart, .olcum-foto ve .filo-sahne ile aynı dil (kenarlık + yarıçap, ağır gölge yok). Ağırlığı üç şey veriyor: yeşil dolgulu ikon kutusu, sağ üstte hayalet numara ve imleç üzerindeyken markaya dönen kenarlık. ═══════════════════════════════════════════════════════════════ */ .ozellik{padding:var(--bolum) 0;background:var(--kat)} .ozellik-agi{ display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:clamp(26px,3.4vw,52px) clamp(24px,3vw,48px); } .ozellik-agi li{ position:relative;overflow:hidden; display:grid;gap:8px;align-content:start; padding:clamp(17px,2vh,22px) clamp(16px,1.5vw,22px) clamp(19px,2.2vh,24px); border:1px solid var(--hat);border-radius:16px;background:var(--kat2); transition:border-color .4s var(--yay),transform .4s var(--yay),background .4s var(--yay); } .ozellik-agi li:hover{border-color:var(--filiz);transform:translateY(-3px)} .ozellik-sim{ display:grid;place-items:center;width:36px;height:36px;border-radius:11px; border:1px solid var(--hat-guclu);background:rgba(76,197,129,.06); color:var(--filiz);margin-bottom:4px; transition:border-color .4s var(--yay),color .4s var(--yay); } .ozellik-sim svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .ozellik-agi li:hover .ozellik-sim{border-color:var(--filiz);color:var(--buzmavi)} /* Hayalet numara: teknik mührüyle aynı işi görüyor — kutuya ağırlık ve "kayıt no" hissi veriyor. Rengi belirteçten geliyor, opaklık ayrı tutuldu ki temaya göre uydurma bir rgba yazmak gerekmesin. */ .ozellik-no{ position:absolute;top:clamp(6px,1vh,12px);inset-inline-end:clamp(12px,1.4vw,20px); font-family:var(--dspl);font-weight:700;font-stretch:122%;letter-spacing:-.04em; font-size:clamp(2.4rem,4vw,3.4rem);line-height:1;color:var(--hat-guclu); pointer-events:none;user-select:none; transition:color .4s var(--yay),opacity .4s var(--yay); } .ozellik-agi li:hover .ozellik-no{color:var(--filiz);opacity:.26} .ozellik-agi h3{padding-inline-end:clamp(44px,5vw,72px)} .ozellik-agi p{color:var(--sis);font-size:.92rem;line-height:1.55;max-width:40ch} /* ═══════════════════════════════════════════════════════════════ teknik — dört kart, 2×2. Önceki sürüm tek bir beyaz "kalibrasyon kâğıdı"ydı; eski sitedeki dört kartlı düzen tercih edildi. Kartlar sayfanın yüzey diliyle aynı (kenarlık + yarıçap, --gece zemin üstünde --kat yüzey). İkon kutuları burada DOLU yeşil — sayfanın en teknik bölümü, ikonlar başlıkları çapalıyor; diğer bölümlerdeki tintli kutulardan bilerek ayrı. ═══════════════════════════════════════════════════════════════ */ .kunye{padding:var(--bolum) 0;background:var(--gece)} .kunye-bas{ display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap; padding-bottom:clamp(14px,1.8vh,22px);margin-bottom:clamp(18px,2.4vh,32px); border-bottom:1px solid var(--hat-guclu); } .kunye-ustyazi{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--sis-sonuk);margin-bottom:6px} /* İki sütun sabit: auto-fit burada 1144px'lik kapta üç sütun üretip dördüncü kartı alta atıyordu. */ .kunye-satirlar{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,1.8vh,24px) clamp(16px,2vw,30px); } .kunye-grup{ position:relative;overflow:hidden; padding:clamp(14px,1.7vh,20px) clamp(16px,1.6vw,24px) clamp(5px,.9vh,10px); border:1px solid var(--hat);border-radius:16px;background:var(--kat); transition:border-color .4s var(--yay); } /* Baş kenardaki yeşil şerit imleç üzerindeyken yukarıdan aşağı doluyor. */ .kunye-grup::before{ content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--filiz); transform:scaleY(0);transform-origin:top;transition:transform .5s var(--yay); } .kunye-grup:hover{border-color:var(--hat-guclu)} .kunye-grup:hover::before{transform:none} .kunye-grup h3{ display:flex;align-items:center;gap:12px; font-size:clamp(.96rem,1.1vw,1.1rem);color:var(--baslik); padding-bottom:clamp(9px,1.2vh,14px);margin-bottom:2px; border-bottom:1px solid var(--hat); } /* Dolu yeşil kutu; ikon rengi --kagit çünkü iki temada da beyaza yakın olan tek belirteç o (--baslik açık temada koyuya dönüyor ve yeşil dolgunun üstünde okunmuyor). */ .kunye-sim{ flex:none;display:grid;place-items:center; width:clamp(31px,3.6vh,40px);aspect-ratio:1;border-radius:11px; background:var(--frigo);color:var(--kagit); } .kunye-sim svg{width:54%;height:54%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .kunye-grup dl>div{ display:flex;justify-content:space-between;align-items:baseline;gap:16px; padding:clamp(8px,1.2vh,14px) 0;border-bottom:1px solid var(--hat); } .kunye-grup dl>div:last-child{border-bottom:0} .kunye-grup dt{color:var(--sis);font-size:.86rem;flex:none} /* Okunan şey değerin kendisi: etiket sönük, değer başlık renginde. */ .kunye-grup dd{ font-family:var(--mono);font-size:.82rem;font-weight:500;letter-spacing:-.01em; color:var(--baslik);text-align:right;font-variant-numeric:tabular-nums; } .kunye-alt{margin-top:clamp(14px,1.8vh,24px);font-size:.62rem;letter-spacing:.06em;color:var(--sis-sonuk)} /* Destek notu kâğıdın DIŞINDA: belgenin kendisi bir ürün tekniksi, bu ise onun altına iliştirilmiş kurumsal bir dipnot. Kâğıda alınsaydı hem mühürle tekrar ederdi hem de belgenin dilini bozardı. */ .teydeb{ display:flex;align-items:center;gap:clamp(22px,3vw,40px); max-width:none;margin:clamp(34px,4vw,58px) 0 0; padding:clamp(22px,3vw,34px) clamp(24px,3.4vw,42px); background:rgba(52,141,92,.1);border-radius:20px; } .teydeb-rozet{ flex:none;width:132px;height:132px;border-radius:50%;padding:14px;box-sizing:border-box; display:grid;place-items:center;text-align:center;row-gap:6px; background:var(--kat);box-shadow:0 6px 18px var(--golge-hafif); } .teydeb-rozet b{font-family:var(--dspl);font-size:1.04rem;letter-spacing:-.01em;color:var(--baslik)} .teydeb-rozet span{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--sis-sonuk)} .teydeb-icerik{display:grid;gap:10px;max-width:64ch} .teydeb-bas{font-size:clamp(1.08rem,1.9vw,1.4rem);color:var(--baslik)} .teydeb-metin{color:var(--sis);font-size:.96rem;line-height:1.68} .teydeb-kod{font-size:.68rem;letter-spacing:.12em;color:var(--sis-sonuk)} /* ═══════════════════════════════════════════════════════════════ NEREDE ═══════════════════════════════════════════════════════════════ */ .nerede{padding:var(--bolum) 0;background:var(--gece)} .nerede-ust{ display:flex;align-items:center;justify-content:space-between; gap:clamp(24px,4vw,64px);flex-wrap:wrap; margin-bottom:clamp(28px,3.5vw,48px); } .nerede-bas{display:grid;gap:20px;flex:1 1 380px;min-width:0} .nerede-bas .etiket{margin-bottom:0} /* Sahadaki operatör fotoğrafı. Oran (3/4) kaynağın 560×465'inden DAR: cover yalnız yanlardan kırpıyor, dikeyde kırpma yok, operatör de ortada olduğu için object-position:50% onu tam ortalıyor. Eski 59/100 oranı, bu dosyanın yanlarında beyaz bant olan ESKİ sürümünü kırpmak içindi; o bant artık yok (dosya değişti, sütun taramasıyla doğrulandı) ve o oran görüntüyü gereksiz daraltıp operatörü küçültüyordu. Yükseklik sınırlı: 560px'lik kaynak büyütülüp bulanıklaşmasın. */ .nerede-foto{ flex:none;position:relative;height:clamp(240px,36vh,440px);aspect-ratio:3/4; border-radius:16px;overflow:hidden;border:1px solid var(--hat);background:var(--kat); box-shadow:0 34px 70px -44px var(--golge-derin); } .nerede-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 45%} .nerede-foto::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(0deg,rgba(5,16,12,.45),transparent 42%), radial-gradient(70% 55% at 50% 100%,rgba(52,141,92,.22),transparent 72%); } .nerede-liste{border-top:1px solid var(--hat)} .nerede-liste li{ position:relative;display:flex;align-items:baseline;gap:clamp(14px,2.4vw,32px);flex-wrap:wrap; padding:clamp(20px,2.6vw,32px) 0;border-bottom:1px solid var(--hat); transition:padding-left .5s var(--yay); } .nerede-liste li::before{ content:"";position:absolute;inset-inline-start:0;bottom:-1px;height:1px;width:0;background:var(--filiz); transition:width .6s var(--yay); } .nerede-liste li:hover{padding-inline-start:clamp(10px,1.6vw,26px)} .nerede-liste li:hover::before{width:100%} .nerede-liste b{ font-family:var(--dspl);font-weight:700;font-stretch:118%;letter-spacing:-.03em; font-size:clamp(1.5rem,3.2vw,2.5rem);color:var(--baslik);min-width:clamp(120px,16vw,220px); /* Gövdenin 1.62'lik satır aralığı bu boyutta satır başına ~30px fazla yükseklik veriyordu; beş satır bölümü tek ekrandan taşırıyordu. */ line-height:1.05; transition:color .4s var(--yay); } .nerede-liste li:hover b{color:var(--filiz)} .nerede-liste span{color:var(--sis);font-size:.96rem;max-width:52ch} /* ═══════════════════════════════════════════════════════════════ PLATFORM — dört dış adres Çerçeve ve ikon kutusu #teknik'ten (.kunye-grup / .kunye-sim) ödünç: sayfada ikinci bir kart dili istemiyoruz. Farkı, kutunun tamamının bağlantı olması — bu yüzden burada hover'da sol şerit değil, sağ üstteki ok hareket ediyor ve adres altı çiziliyor. ═══════════════════════════════════════════════════════════════ */ .kapilar{padding:var(--bolum) 0;background:var(--gece)} .kapi-agi{ display:grid;grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.4vw,22px); } .kapi{ position:relative;display:flex;flex-direction:column; gap:clamp(7px,.9vh,11px); padding:clamp(16px,2vh,24px) clamp(16px,1.6vw,24px) clamp(18px,2.2vh,26px); border:1px solid var(--hat);border-radius:16px;background:var(--kat); transition:border-color .4s var(--yay),background .4s var(--yay), transform .4s var(--yay); } .kapi:hover{border-color:var(--hat-guclu);background:var(--kat2);transform:translateY(-3px)} /* Klavye ile gezenler için: odak halkası kartın köşe yarıçapını izlesin. */ .kapi:focus-visible{outline:2px solid var(--filiz);outline-offset:3px} .kapi-ust{ display:flex;align-items:center;justify-content:space-between; margin-bottom:clamp(3px,.6vh,7px); } /* Dış bağlantı oku. Kutu duruyorken sönük, üzerine gelince yeşile dönüp kendi yönünde bir adım atıyor. */ .kapi-ok{ flex:none;display:grid;place-items:center;width:22px;height:22px; color:var(--sis-sonuk); transition:color .35s var(--yay),transform .35s var(--yay); } .kapi-ok svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .kapi:hover .kapi-ok{color:var(--filiz);transform:translate(3px,-3px)} .kapi h3{font-size:clamp(1rem,1.15vw,1.14rem);color:var(--baslik)} /* Asıl okunması istenen satır bu: adresin kendisi. Alt çizgi hover'da soldan doluyor (nerede-liste'deki şeritle aynı fikir). */ .kapi-adres{ position:relative;align-self:flex-start; font-size:.76rem;font-weight:500;letter-spacing:-.01em;color:var(--filiz); padding-bottom:2px; } .kapi-adres::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1px; background:currentColor;transform:scaleX(0);transform-origin:right; transition:transform .45s var(--yay); } .kapi:hover .kapi-adres::after{transform:none;transform-origin:left} .kapi p{ color:var(--sis);font-size:.86rem;line-height:1.55; padding-top:clamp(7px,.9vh,11px);border-top:1px solid var(--hat); margin-top:auto; } /* ═══════════════════════════════════════════════════════════════ CTA + FOOTER ═══════════════════════════════════════════════════════════════ */ .cta{ padding:calc(var(--bolum) * 1.1) 0;position:relative;overflow:hidden; background: radial-gradient(80% 120% at 82% 110%,rgba(52,141,92,.24),transparent 62%), radial-gradient(60% 100% at 5% 0%,rgba(127,212,232,.07),transparent 60%), var(--gece); border-top:1px solid var(--hat); } .cta-ic{display:grid;gap:24px} .cta-dugmeler{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px} .cta-yollar{display:flex;gap:28px;flex-wrap:wrap;font-size:.82rem;color:var(--sis);margin-top:10px} .cta-yollar a{transition:color .25s;border-bottom:1px solid var(--hat)} .cta-yollar a:hover{color:var(--filiz);border-bottom-color:var(--filiz)} .alt{padding:clamp(52px,6vw,84px) 0 34px;border-top:1px solid var(--hat);background:var(--gece)} /* Dört sütun: marka · sayfa · platform · iletişim. Adres sütunu (en uzun satır "Geliştirici belgeleri") sayfa sütunuyla eşit pay alıyor. */ .alt-ic{display:grid;grid-template-columns:1.35fr .9fr .95fr 1.25fr;gap:clamp(24px,3vw,48px);margin-bottom:48px} .alt-marka p{color:var(--sis-sonuk);font-size:.88rem;max-width:36ch;margin-top:16px} .alt h4{font-size:.62rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--sis-sonuk);margin-bottom:16px} .alt ul{display:grid;gap:10px} .alt li,.alt li a{color:var(--sis);font-size:.88rem;line-height:1.5} .alt li a{transition:color .25s} .alt li a:hover{color:var(--filiz)} .telif{ padding-top:24px;border-top:1px solid var(--hat); display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap; font-size:.68rem;letter-spacing:.06em;color:var(--sis-sonuk); } /* ═══════════════════════════════════════════════════════════════ AÇIK TEMA — belirteçle çözülemeyen birkaç yer Çok duraklı gradyanlar tek bir renk belirtecine sığmadığı için burada tema başına yeniden yazılıyor. Listeyi kısa tutun: bir renk belirtece sığıyorsa oraya yazın, buraya değil. ═══════════════════════════════════════════════════════════════ */ [data-tema="acik"] .hero-yedek{ background: radial-gradient(120% 90% at 78% 18%,rgba(52,141,92,.16),transparent 58%), radial-gradient(80% 70% at 12% 82%,rgba(31,126,150,.09),transparent 60%), var(--gece); } /* Açık temada hatlar zaten düşük kontrastlı; perde koyu temadaki kadar kalın olursa alan tamamen kayboluyor. Metnin okunduğu sol şerit korunup sağ taraf açılıyor. */ [data-tema="acik"] .hero::after{ background: linear-gradient(96deg,var(--gece) 0%,rgba(243,247,244,.88) 22%,rgba(243,247,244,.52) 40%,rgba(243,247,244,.12) 60%,transparent 74%), linear-gradient(0deg,var(--gece) 1%,transparent 24%); } [data-tema="acik"] .hero-hale{ background:radial-gradient(circle,rgba(52,141,92,.20) 0%,rgba(52,141,92,.07) 46%,transparent 70%); } [data-tema="acik"] .cta{ background: radial-gradient(80% 120% at 82% 110%,rgba(52,141,92,.16),transparent 62%), radial-gradient(60% 100% at 5% 0%,rgba(31,126,150,.06),transparent 60%), var(--gece); } /* Açık temada gren daha da sönük olmalı: koyu zeminde göze çarpmayan doku, kâğıt zeminde kirli görünüyor. Blend yerine opaklıkla çözülüyor. */ [data-tema="acik"] .gren{opacity:calc(var(--gren-opak) * .8)} /* ═══════════════════════════════════════════════════════════════ TAM EKRAN BÖLÜMLER — kaydırınca bir sonraki bölüme oturur Kütüphane yok (fullpage.js vb.): tarayıcının kendi CSS scroll-snap'i kullanılıyor. Kaydırma yine gerçek kaydırma — klavye, dokunmatik, "sayfada bul", derin bağlantı, geri tuşu hepsi bozulmadan çalışıyor; JS ile kaçırılan bir wheel olayı yok. `scroll-snap-stop:always` tek bir hızlı hamlede iki bölüm birden atlanmasını engelliyor — istenen "her kaydırmada bir bölüm" davranışı bundan geliyor. DİKKAT: `mandatory` snap, ekrana SIĞMAYAN bir bölümde içeriğin alt kısmını erişilemez hâle getirir. Bu yüzden iki şey birlikte yapıldı: (1) her bölüm 100svh'ye oturacak şekilde sıkıştırıldı, (2) sığmasının mümkün olmadığı ölçülerde (dar ekran → telefon haritanın altına iniyor, ya da alçak pencere) snap tamamen kapanıyor. Aşağıdaki kapatma kuralını silmeyin. ═══════════════════════════════════════════════════════════════ */ :root{ /* Tam ekran bölümlerde --bolum (168px'e kadar) çok yer yiyor; dikey boşluk artık pencere yüksekliğine bağlı. */ /* Alt sınır üstteki 74px'lik gezinme çubuğunu geçmek zorunda; üst sınır 1440p gibi uzun pencerelerde bölümün havada asılı kalmaması için. */ --bolum-tam:clamp(78px,10vh,124px); } html{ scroll-snap-type:y mandatory; scroll-behavior:smooth; } /* Snap konteyneri html olduğu için window.scrollY ve getBoundingClientRect aynen çalışıyor — motion.js / pano.js / harita.js'te değişiklik gerekmedi. */ .hero{scroll-snap-align:start;scroll-snap-stop:always} .filo,.olcum,.ozellik,.kunye,.nerede,.kapilar{ scroll-snap-align:start;scroll-snap-stop:always; min-height:100svh; display:flex;flex-direction:column;justify-content:center; padding-block:var(--bolum-tam); } /* ── son durak: CTA + alt bilgi TEK ekranı paylaşıyor ── İkisi ayrı snap noktasıyken alt bilgi kendi başına bir sayfa gibi görünüyordu. Bu yüzden .cta artık snap noktası DEĞİL; tek durak .alt'ın `end` hizası, o da sayfanın dibini ekranın dibine oturtuyor ve ikisi birlikte görünüyor. KOŞUL: .cta + .alt toplam boyu 100svh'yi geçmemeli — aşağıdaki ölçüler (başlık boyu, dikey boşluklar) buna göre kısıldı. Bu bölüme içerik eklenirse önce bu bütçeye bakın. */ .cta{ scroll-snap-align:none;min-height:0; padding-block:clamp(52px,6.8vh,92px); } .cta .dev{font-size:clamp(1.9rem,4.2vw,3.4rem)} .cta-ic{gap:clamp(14px,1.9vh,24px)} .cta-dugmeler{margin-top:0} .cta-yollar{margin-top:0} .alt{scroll-snap-align:end;scroll-snap-stop:always;padding:clamp(36px,4.4vh,64px) 0 26px} /* Bölüm başlıkları: tam ekranda üç satırlık başlık + 76px boşluk fazla. */ .olcum .bolum-bas,.ozellik .bolum-bas,.kapilar .bolum-bas{margin-bottom:clamp(24px,3.4vh,48px)} .nerede-ust{margin-bottom:clamp(20px,2.8vh,40px)} /* ── filo: sayfanın en sıkışık bölümü ── Başlık tek şerit; telefon + harita satırı kendi doğal boyunda kalıp dikeyde ortalanıyor (satırı esnetirsek telefonun altında boş ekran kalıyor, çünkü .telefon-ekran içeriği yukarıdan diziyor). */ .filo-bas{ display:flex;align-items:flex-end;justify-content:space-between; gap:clamp(18px,3vw,48px);flex-wrap:wrap; margin-bottom:clamp(18px,2.4vh,32px); } .filo-bas>div{display:grid;gap:12px} .filo-bas .lede{max-width:44ch;font-size:.95rem} /* ── teknik: kâğıt + TEYDEB notu birlikte tek ekrana sığmalı ── */ .kunye .wrap{display:grid;gap:0} .teydeb{margin-top:clamp(22px,3vh,40px)} .teydeb-metin{font-size:.9rem} /* ── ölçüm ── Bu bölüm başlık + 5 satır + dikey fotoğraf taşıyor; ölçüleri sabit px ya da vw'ye bağlı bırakınca alçak pencerede taşıyor (satırların üstü ve altı kırpılıyordu). Hepsi vh'ye bağlandı. */ .olcum-foto img{max-height:calc(100svh - 2 * var(--bolum-tam));object-position:center} .olcum .buyuk{font-size:clamp(1.7rem,3vw,2.7rem)} .olcum .lede{max-width:50ch;font-size:1rem} .olcum-liste li{padding:clamp(11px,1.5vh,18px) 0} /* ── nerede: fotoğraf + başlık satırı ve beş sektör satırı birlikte ── */ .nerede-liste li{padding:clamp(12px,1.7vh,26px) 0} .nerede-liste b{font-size:clamp(1.3rem,2.6vw,2.1rem)} .nerede .buyuk{font-size:clamp(1.7rem,3.4vw,3rem)} /* ── özellikler: iki satırlık yüzey şebekesi tek ekrana otursun ── */ .ozellik-agi{gap:clamp(18px,2.6vh,44px) clamp(24px,3vw,48px)} .ozellik .buyuk{font-size:clamp(1.7rem,3vw,2.7rem)} .ozellik .lede{max-width:52ch} /* ── platform: dört kart + başlık tek ekrana otursun ── */ .kapilar .buyuk{font-size:clamp(1.7rem,3vw,2.7rem)} .kapilar .lede{max-width:56ch} /* ═══ alçak pencere merdiveni ═══ Panel ürünün ekranının birebir kopyası olduğu için içinden bölüm çıkarılmıyor; sadece iç boşluklar ve iki grafik alanı daralıyor. Böylece 1080p'de de ~800px'lik bir pencerede de hiçbir kart kırpılmıyor. min-width:1180px ŞART: bu sıkıştırmanın tek sebebi snap'li düzende bölümün 100svh'ye oturması. 1179px altında snap zaten kapalı ve bölüm serbest kayıyor — ama telefonlar da (844px, 915px…) bu max-height eşiklerini geçtiği için kurallar oraya da uyguluyordu: çentik yukarı kayıyor, mini harita 72px'e iniyor, grafik 32px'e düşüyordu. Telefonda sığdırılacak bir şey yok; panel kendi boyunda duruyor. */ @media (min-width:1180px) and (max-height:1040px){ /* DİKKAT: .telefon-ekran'ın üst boşluğu çentiğin (.telefon-ada) altına denk gelmek zorunda — ekran içeriği .pano'nun 12px padding'i + bu boşluk kadar aşağıdan başlıyor, çentik ise 22+24=46px'de bitiyor. Üst boşluk kısılacaksa çentik de aynı anda yukarı çekilmeli, yoksa "Sevkiyat Detayı" başlığının üstüne biniyor. */ .telefon-ada{top:14px;width:74px;height:18px} .telefon-cubuk{bottom:4px;width:96px} .telefon-ekran{padding:26px 9px 11px;gap:6px} .kart-bas{padding:5px 11px} .rota-harita{aspect-ratio:11/4.4;min-height:86px} .guzergah{padding:6px 11px 6px 24px;gap:5px} .grafik-govde{padding:6px 11px;gap:4px} .grafik-svg{height:40px} .cihaz-bas{padding:6px 10px} /* tekniknin kendi ölçüleri artık vh'ye bağlı (clamp'lerin ikinci değeri), burada ayrıca kısmaya gerek yok. */ } @media (min-width:1180px) and (max-height:880px){ .rota-harita{aspect-ratio:11/3.6;min-height:72px} .grafik-svg{height:32px} .telefon-ada{top:11px;width:66px;height:15px} .telefon-ekran{padding:22px 9px 10px;gap:5px} .olcum-liste li{padding:clamp(10px,1.3vh,15px) 0} .filo-bas .lede{max-width:36ch;font-size:.88rem} .ozellik-agi li{padding-block:clamp(13px,1.6vh,18px)} .ozellik-sim{width:32px;height:32px;border-radius:10px;margin-bottom:2px} .ozellik-sim svg{width:16px;height:16px} } /* ═══ SNAP'İN KAPANDIĞI YERLER ═══ 1179px altında telefon haritanın altına iniyor (bkz. yukarıdaki max-width:1179px bloğu) — filo bölümü iki katına çıkıyor, hiçbir sıkıştırma onu tek ekrana sığdırmıyor. 760px altı pencerede (ör. 1366×768 dizüstü) sıkıştırma da yetmiyor: telefon paneli tek başına o yüksekliğin yarısından fazlasını istiyor. Bu koşullarda sayfa normal, serbest kaydırmaya dönüyor. */ @media (max-width:1179px),(max-height:760px){ html{scroll-snap-type:none} .filo,.olcum,.ozellik,.kunye,.nerede,.kapilar,.cta{ min-height:0;display:block;padding-block:var(--bolum); } .olcum-foto img{max-height:none} .teydeb{flex-direction:column;align-items:flex-start;max-width:74ch} /* Snap kapalıyken #sevkiyat gibi çapalara atlayınca bölümün başlığı sabit üst çubuğun altında kalıyordu; her bölüm çubuk boyu kadar aşağıdan hizalanıyor. */ .hero,.filo,.olcum,.ozellik,.kunye,.nerede,.kapilar,.cta{scroll-margin-top:80px} } /* ═══════════════════════════════════════════════════════════════ DUYARLI ═══════════════════════════════════════════════════════════════ */ /* ═══ ÜST ÇUBUK: solda menü · ortada marka · sağda tema ═══ Kırılım 1080 DEĞİL 1259: menüdeki beş bağlantıdan ikisi ("Teknik özellikler", "Nerede kullanılır") tek kelimelik etiketlerden ~135px daha uzun. Marka + beş bağlantı + Platform açılırı + dil seçici + tema + iki düğme ancak ~1240px'den sonra tek satıra sığıyor; altında en uzun iki etiket ikinci satıra düşüp komşularının hizasını bozuyordu. Bu blok yalnız ÜST ÇUBUĞU taşır. Sayfanın geri kalanı (filo/telefon, snap) kendi 1179px bloklarında kalıyor — onlar dil seçiciden etkilenmedi, iki kırılımın farklı olması bilinçli. Bu blok yalnız üst çubuğu taşır; hero/ölçüm/alt bilgi düzeni aşağıdaki 1080 bloğunda kalıyor — küçük dizüstünde (1100px) cihaz görselinin metnin üstüne çıkması istenmiyor. */ @media (max-width:1259px){ .ust-linkler{display:none} .ust-menu{display:block} /* Dil seçici de gizleniyor: ızgara üç sütunlu (menü · marka · tema) ve dördüncü bir öğe markayı ortadan kaydırıyor. Telefon karşılığı tam menüdeki .tam-menu-dil bloğu. */ .dil{display:none} /* Menü ve tema düğmeleri işaretlemede aynı kabın (.ust-aksiyon) içinde ve ikisi de sağda. Kabı display:contents ile kaldırıyoruz; çocukları doğrudan .ust-ic'in ızgara öğesi oluyor. DİKKAT — üçüne de SATIR verilmek zorunda (grid-area:1/n). Yalnız sütun yazılırsa .marka işaretlemede ilk sırada olduğu için imleç 1. sütunu geçiyor, geri dönmüyor ve hamburger ikinci satıra düşüyor. Uç sütunlar auto değil SABİT 36px: 36+gap+1fr+gap+36 her koşulda kabın tam genişliği, satır taşamaz ve orta sütun simetrik olduğu için marka satırın gerçek ortasına oturur. */ .ust-ic{ display:grid;grid-template-columns:36px minmax(0,1fr) 36px; grid-template-rows:auto;align-items:center;gap:12px; } .ust-aksiyon{display:contents} .ust-menu{grid-area:1/1;justify-self:start;width:36px;height:36px} /* overflow:hidden BURAYA KOYULMAZ. Frigolive görseli translateY(-16%) ile yukarı kayıyor (bkz. .marka-frigo) ve üst kenarı marka kutusunun dışına taşıyor; kutu kırparsa taşan kısım — yani "V"nin üstündeki konum iğnesi — tepesinden kesiliyor. Ölçüldü: iğne 18px'lik logoda ~6px olması gerekirken 2px kalıyordu. Yatay güvenlik min-width:0 ve sabit 38px'lik uç sütunlarla zaten sağlanıyor, kırpmaya gerek yok. 5px aşağı: harf gövdeleri hizalı olsa bile iğne çifti optik olarak yukarı çekiyor. */ .marka{grid-area:1/2;justify-self:center;min-width:0;transform:translateY(5px)} .tema-dugme{grid-area:1/3;justify-self:end;width:36px;height:36px} /* Her iki düğme de tam menünün içinde (bkz. index.html .tam-menu-dugmeler). */ .ust-aksiyon .dg{display:none} /* çubuklar 36px'lik kutuya göre ortalanıyor */ .ust-menu i{inset-inline-start:10px} .ust-menu i:nth-child(1){top:15px} .ust-menu i:nth-child(2){top:20px} } /* ═══════════════════════════════════════════════════════════════ DUYARLI — düzen ═══════════════════════════════════════════════════════════════ */ @media (max-width:1080px){ /* inset-inline-end SIFIRLANMAK ZORUNDA: masaüstünde cihaz o özellikle konumlanıyor (bkz. .hero-cihaz), burada position:relative'e dönüyor ve değer kalırsa elemanı akış içinde yana itiyor — mobilde cihaz ortadan kayıyordu. Fiziksel 'right:auto' bunu sıfırlamaz, adı tutmuyor. */ .hero-cihaz{ position:relative;top:auto;inset-inline-end:auto;transform:none; order:-1;margin-bottom:26px;align-self:center; } .hero-cihaz img{height:min(38vh,320px)} .hero{padding-top:104px} .hero-alt{max-width:100%} .hero::after{background:linear-gradient(0deg,var(--gece) 1%,transparent 26%)} .alt-ic{grid-template-columns:1fr 1fr} /* Dört kart tek sırada 1080px'te 200px'lik sütunlara düşüyor; adres satırı (developer.frigolive.nl) o genişlikte kırılıyor. 2×2. */ .kapi-agi{grid-template-columns:1fr 1fr} /* Fotoğraf tek sütuna inince 4/5 dikey kare ekranın yarısını yiyor; yatay bir şerit olarak metnin üstünde duruyor. */ .olcum-duzen{grid-template-columns:1fr} .olcum-foto img{aspect-ratio:16/9} /* Fotoğraf kendi satırına düşüyor. .nerede-ust'ün space-between'i tek kalan öğeyi sola yapıştırıyordu; margin-inline:auto onu satırın ortasına alır. Boy artık yükseklikten değil GENİŞLİKTEN türüyor: dar ekranda yüksekliğe bağlı clamp fotoğrafı bir pul kadar bırakıyordu. */ .nerede-foto{margin-inline:auto;height:auto;width:min(340px,74vw)} } @media (max-width:760px){ body{font-size:16px} /* ═══ ÜST ÇUBUK ═══ Üç bölmeli ızgaranın kendisi 1080px bloğunda kuruluyor; burada yalnız telefona göre ölçüler daralıyor. Marka + iki düğme 390px'lik bir satıra ancak bu boyutlarda rahat sığıyor. */ .ust-ic{gap:8px;height:64px} .ust.yapisik .ust-ic{height:58px} .marka{gap:8px} .marka-ilimera{height:18px} .marka-frigo{height:21px} /* Ayraç iki markadan uzun kalırsa gözü o çekiyor ve ikisi hizasızmış gibi duruyor; harf gövdesi boyuna iniyor. */ .marka-ayrac{height:18px} /* Tam menüde düğmeler parmak boyunda ve tam genişlikte. */ .tam-menu{gap:26px} .tam-menu-dugmeler{display:grid;gap:10px} .tam-menu .dg{align-self:stretch;justify-content:center;padding-block:16px} /* ═══ HERO ═══ Telefonda cihaz görseli metnin üstünde duruyor (bkz. 1080px bloğu); masaüstündeki 38vh'lik boy başlığı katlanan alanın altına itiyordu. Görsel kısalıyor, dikey boşluklar toparlanıyor. */ .hero{padding-top:96px;padding-bottom:clamp(56px,8vh,80px)} .hero-cihaz{margin-bottom:18px} .hero-cihaz img{ height:min(30vh,250px); /* İki katmanlı drop-shadow telefon GPU'sunda her karede yeniden rasterleniyor; tek ve dar bir gölge aynı işi görüyor. */ filter:drop-shadow(0 22px 38px rgba(0,0,0,.6)); } .hero-ic>*+*{margin-top:16px} .hero-alt{gap:18px} .hero-dugmeler{gap:10px} .hero-dugmeler .dg{flex:1 1 150px} .hero-kanit{grid-template-columns:repeat(2,minmax(0,auto));gap:16px 22px;margin-top:26px;padding-top:20px} /* "Kaydır" ipucu parmakla gezilen bir sayfada bilgi taşımıyor, üstelik hero uzayınca kanıt satırının üstüne biniyor. */ .hero-kaydir{display:none} /* ═══ SEVKİYAT ═══ */ /* Dikey düzende harita telefonun üstüne çıkıyor; kendi yüksekliğini almalı, yoksa esneme kuralından gelen 520px'te kalıyor. Seçici, üstteki .filo-duzen .filo-sahne kuralını yenecek kadar belirgin olmak zorunda. */ .filo-duzen .filo-sahne{height:min(74vh,520px);min-height:0} .filo-sahne{border-radius:16px} /* Sevkiyat listesi telefonda GİZLENMİYOR — haritanın sağındaki sütun yerine alt kenarına yapışan, yatay kaydırılan bir kart şeridine dönüşüyor. Gizlendiğinde mobil ziyaretçinin sevkiyatlara ulaşmasının tek yolu haritadaki 32px'lik tır ikonlarına isabet ettirmekti. backdrop-filter burada yok: telefonda tam genişlikte bir bulanıklık katmanı kaydırmanın her karesinde yeniden karışıyor. */ .sev-panel{ /* Boy SABİT: hem haritanın fitBounds dolgusu (js/harita.js → SERIT) hem de aşağıdaki leaflet düğmelerinin konumu bu 150px'e göre hesaplanıyor. Değiştirirseniz üçünü birlikte değiştirin. */ top:auto;left:0;right:0;bottom:0;width:auto;height:150px; flex-direction:row;gap:10px;padding:10px 12px 12px; background:linear-gradient(0deg,var(--gece) 12%,rgba(5,16,12,.86)); backdrop-filter:none;border-left:0;border-top:1px solid var(--hat); overflow-x:auto;overflow-y:hidden; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; scrollbar-width:none; } .sev-panel::-webkit-scrollbar{display:none} .sev-panel-bas{display:none} .sev-item{flex:0 0 min(300px,86%);min-width:0;scroll-snap-align:center;padding:11px} .sev-item .sev-pop-bas{margin-bottom:8px} /* Son görülme + durum rozetleri şeritte yok: kart 150px'e sığmalı ve aynı bilgi hemen aşağıdaki panelde zaten açık duruyor. */ .sev-item .sev-alt{display:none} .chip{padding:8px 2px} .chip.c-dual{padding:8px 6px} .sahne-rozet{inset-inline-start:14px} /* Zoom ve katman düğmeleri şeridin arkasında kalmasın. */ .filo-sahne .leaflet-bottom{bottom:160px} .leaflet-bottom.leaflet-left{margin-left:0} /* ═══ ÖLÇÜM ═══ */ .olcum-liste li{align-items:flex-start} /* Dar ekranda aralık değeri satır sonuna sığmıyor; ikonun altına, açıklamayla aynı sütuna geçiyor. Hap kendi genişliğinde kalsın diye satırın tamamını kaplamıyor. */ .olcum-aralik{ margin:4px 0 0 calc(38px + clamp(12px,1.6vw,20px)); text-align:left;flex-basis:100%;align-self:flex-start; width:fit-content; } /* ═══ TEKNİK ═══ */ /* teknik kartları iki sütunda 320px'in altına düşüyor; tek sütuna iner. */ .kunye-satirlar{grid-template-columns:1fr} .kunye-grup dt{font-size:.82rem} .kunye-grup dd{font-size:.78rem} .teydeb-rozet{width:110px;height:110px} /* ═══ NEREDE ═══ */ .nerede-liste li{gap:6px} .nerede-liste b{min-width:0;width:100%} /* ═══ CTA + ALT BİLGİ ═══ */ .cta-dugmeler .dg{flex:1 1 100%} .cta-yollar{gap:10px 24px} .alt-ic{grid-template-columns:1fr;gap:32px;margin-bottom:36px} .kapi-agi{grid-template-columns:1fr} .kapi:hover{transform:none} /* Parmakla açılacak bağlantılar 44px'lik hedefe yaklaşsın. */ .alt ul{gap:14px} /* ═══ UYARI BİLDİRİMİ ═══ Masaüstünde sol üstte duruyor; telefonda orası sabit üst çubuğun ve hero başlığının yeri. Ekranın altına, tam genişlikte bir şeride iniyor — ürünün mobil bildirimi de oradan geliyor. */ .uyari-toast{ left:12px;right:12px;width:auto;top:auto;bottom:14px; transform:translateY(20px); } .uyari-toast[data-durum="dikkat"], .uyari-toast[data-durum="alarm"]{transform:none} } /* ═══════════════════════════════════════════════════════════════ KÜÇÜK TELEFON — 560px altı ═══════════════════════════════════════════════════════════════ */ @media (max-width:560px){ /* ═══ AÇILIŞ ŞERİDİ ═══ Tek satırda "F-007 — SOĞUK ZİNCİR TAKİP SİSTEMİ" duruyordu: metin .2em harf aralığıyla ~244px, artı kod ~55px, çizginin taban değeri 70px ve iki boşluk 36px → ~405px. .acilis ortalayan bir flex kutu olduğu için 390px'lik telefonda satır iki yandan birden kırpılıyordu. Dar ekranda üç parça alt alta diziliyor; çizgi de yatay bir ayraç olarak kalıyor. */ .acilis-ic{ flex-direction:column;gap:13px; max-width:100%;padding-inline:24px;text-align:center; font-size:.66rem;letter-spacing:.16em; } .acilis-cizgi{width:min(140px,44vw)} .acilis-yazi{line-height:1.7} /* ═══ TELEFON MAKETİ SOYULUYOR ═══ Maket masaüstünde işe yarıyor: ziyaretçiye "bu ekranı sahada elinde böyle göreceksin" diyor. Telefonda ise telefonun içinde ikinci bir telefon oluyor — anlatısı boşa düşüyor, üstelik 52px'lik kabuk + çentik payı 390px'lik bir ekranın ~60px'ini ve ~46px'ini yiyor. Kabuk kalkıyor, geriye ürünün kendi kartı kalıyor; içerik aynı. Maketi geri isterseniz bu bloğu silmek yeterli. */ .pano{ max-width:none;padding:0;border-radius:18px; background:var(--p-yuzey);border-color:var(--p-hat); box-shadow:0 18px 44px -30px var(--golge-derin); } .pano::before,.pano::after{display:none} .telefon-ada,.telefon-cubuk{display:none} .telefon-ekran{padding:12px 10px 14px;border-radius:18px} /* Etiket + değer aynı satıra sığmayınca değer sağa yaslı iki satıra bölünüyor ve okunmaz oluyor; alt alta geçip sola hizalanıyorlar. */ .kunye-grup dl>div{flex-direction:column;align-items:flex-start;gap:2px} .kunye-grup dd{text-align:left} /* Özellik kartlarındaki hayalet numara başlığın üstüne binmesin. */ .ozellik-no{font-size:2.2rem} .ozellik-agi h3{padding-inline-end:40px} .telif{gap:8px} } /* ═══════════════════════════════════════════════════════════════ ÇOK DAR — 400px altı (iPhone SE, katlanabilir kapak ekranları) .dev'in clamp tabanı 2.15rem; 320px'lik bir ekranda "güvenli teslimat." satıra sığmıyor ve .satir{overflow:hidden} onu kırpıyordu — harf yarısından kesilmiş bir başlık çıkıyordu. ═══════════════════════════════════════════════════════════════ */ @media (max-width:400px){ :root{--kenar:16px} /* İki kelime markası ortada kalsın diye gizlenmiyor, bir tık küçülüyor: 320px'de yanlardaki iki 36px'lik düğmeden geriye 200px kalıyor, bu ölçülerde marka 184px sürüyor. */ .marka{gap:6px} .marka-ilimera{height:15px} .marka-frigo{height:18px} .marka-ayrac{height:15px} .dev{font-size:1.86rem} .buyuk{font-size:1.72rem} .orta{font-size:1.45rem} .hero-kanit{gap:14px 18px} .hero-kanit dt{font-size:.92rem} .hero-kanit dd{font-size:.68rem} .sev-item{flex:0 0 88%} } /* ═══════════════════════════════════════════════════════════════ DOKUNMATİK — :hover'ın yapışıp kaldığı yerler Parmakla dokunulan öğe tarayıcıda :hover durumunda KALIR: kart havada asılı, sektör satırı sağa kaymış, kartın yeşil şeridi inmiş donuyor ve bir sonraki dokunuşa kadar öyle duruyor. Fare olmayan cihazlarda bu geçişler tamamen kapanıyor — bilgi taşımıyorlar, yalnız süsler. ═══════════════════════════════════════════════════════════════ */ @media (hover:none){ .ozellik-agi li:hover{transform:none;border-color:var(--hat)} .ozellik-agi li:hover .ozellik-sim{border-color:var(--hat-guclu);color:var(--filiz)} .ozellik-agi li:hover .ozellik-no{color:var(--hat-guclu);opacity:1} .nerede-liste li:hover{padding-left:0} .nerede-liste li:hover::before{width:0} .nerede-liste li:hover b{color:var(--baslik)} .kunye-grup:hover{border-color:var(--hat)} .kunye-grup:hover::before{transform:scaleY(0)} .olcum-liste li:hover .olcum-sim{border-color:var(--hat-guclu);color:var(--filiz)} .olcum-liste li:hover .olcum-aralik{border-color:var(--hat)} .dg-dolu:hover{background:var(--dolu-zemin);box-shadow:none} .dg-hayalet:hover{border-color:var(--hat-guclu);color:var(--kar);background:none} .ust-linkler>a:hover::after,.ust-acilir-dugme:hover::after{transform:scaleX(0)} .sev-item:hover{border-color:var(--hat);background:var(--kat2)} /* seçili kart yine vurgulu kalmalı — o bir durum, hover değil */ .sev-item.secili{border-color:var(--filiz);background:var(--sev-item-uzeri)} } /* ═══════════════════════════════════════════════════════════════ HAREKET AZALTMA — her şey durur, hiçbir içerik gizli kalmaz ═══════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important; } [data-ac],.satir>span{opacity:1!important;transform:none!important} /* Bölüme yapışan kaydırma da bir harekettir; kapalı olmalı. Bölümler yine tam ekran kalıyor, sadece kaydırma serbestleşiyor. */ html{scroll-snap-type:none!important} .hero,.filo,.olcum,.ozellik,.kunye,.nerede,.cta,.alt{scroll-snap-align:none;scroll-snap-stop:normal} .acilis,.gren,.hero-kaydir{display:none} /* panel kaydırmayı takip etmez; sevkiyat bölümünün başında durağan bir özet olarak akışın içinde durur */ .pano{ position:static;width:auto;max-width:420px;height:auto;transform:none;opacity:1; margin:0 auto clamp(48px,6vw,88px); } .telefon-ekran{height:auto} } /* ═══════════════════════════════════════════════════════════════ DİL ═══════════════════════════════════════════════════════════════ */ /* Çeviri perdesi. 'deki önyükleyici sözlüğü senkron indiriyor, ama uygulama yine de ilk boyamadan hemen sonraya düşebiliyor; bu nitelik o aralıkta GÖVDE ÇOCUKLARINI gizler. body'nin kendisi gizlenmiyor: zemin rengi onda tanımlı (bkz. body{background:var(--gece)}) ve gizlenirse sayfa bir kare beyaza düşerdi — temanın kaçındığı parlamanın aynısı. Nitelik iki yoldan kalkıyor: js/i18n.js çeviriyi uygulayınca, ya da sözlük hiç inmezse önyükleyicideki 2 sn'lik emniyet zamanlayıcısıyla. İkisi de olmazsa sayfa görünmez kalırdı; bu yüzden emniyet şart. */ html[data-ceviri="bekliyor"] body>*{visibility:hidden} /* ─── RTL (Arapça) ─── Yön çevirimini tarayıcı yapıyor: kök elemanda dir="rtl" (bkz. index.html önyükleyici) + düzenin akış-göreli özellikleri. Sayfadaki fiziksel left/right değerleri bu iş kapsamında `inset-inline-*` / `padding-inline-*` ile MANTIKSAL karşılıklarına çevrildi, çünkü onlar iki yönde de kendiliğinden doğru çalışıyor — buradaki blok yalnızca mantıksal karşılığı OLMAYAN şeyler için: gradyan açıları, transform yönleri ve iki dilli metin izolasyonu. Yeni bir kural eklerken: fiziksel left/right yerine inset-inline-start/end yazın, o zaman buraya hiçbir şey eklemeniz gerekmez. Kaydırma ve harita BİLEREK dışarıda: Leaflet kendi içinde LTR çalışır, karo koordinatları yön değiştirmez. */ /* Hero: metin bir tarafta, cihaz görseli karşı tarafta duruyor. Cihaz inset-inline-end ile kendiliğinden aynalanıyor; gradyanların açısı ve odak noktası mantıksal olmadığı için burada çevriliyor. Aynalanmazsa okunabilirlik perdesi metnin DEĞİL cihazın tarafını karartıyor ve başlık görselin üstünde okunmaz hâle geliyor. */ [dir="rtl"] .hero{--hero-aci:264deg;--hero-isik-x:22%;--hero-isik2-x:88%} dışına doğru kayıp içeri "geri" gelir. Konumu inset-inline-start ile zaten aynalanıyor, çeviren yalnızca giriş yönü. */ [dir="rtl"] .uyari-toast{--toast-kay:28px} /* Yönü olan ikonlar: ok "ileri"yi gösteriyor, RTL'de ileri sola bakar. */ [dir="rtl"] .uyari-ok{transform:scaleX(-1)} [dir="rtl"] .kapi-ok svg{transform:scaleX(-1)} /* Sayısal/teknik alanlar LTR kalıyor: kod, adres, ölçü ve tarih Arapça metnin içinde de soldan sağa okunur — izole edilmezse iki yönlü algoritma "F00705001P" veya "±0.1 °C" gibi parçaları ters çeviriyor. */ [dir="rtl"] .mono,[dir="rtl"] .kapi-adres,[dir="rtl"] .pano-kod, [dir="rtl"] .cihaz-ad,[dir="rtl"] .olcum-deger,[dir="rtl"] .cihaz-guc, [dir="rtl"] .pano-saat b,[dir="rtl"] .pano-saat em,[dir="rtl"] .hero-kanit dt, [dir="rtl"] .olcum-aralik,[dir="rtl"] .kunye-grup dd,[dir="rtl"] .cta-yollar{ direction:ltr;unicode-bidi:isolate; } /* .olcum-aralik hariç: o zaten text-align:end ile kendini hizalıyor. */ /* İzole edilen kutular akışın başına yaslanmalı: unicode-bidi:isolate metnin YÖNÜNÜ çeviriyor, kutunun hizasını değil — text-align olmadan künye değerleri ve hero sayıları satırın karşı ucuna kaçıyor. */ [dir="rtl"] .hero-kanit dt,[dir="rtl"] .kunye-grup dd, [dir="rtl"] .cta-yollar{text-align:right} /* Devanagari (hi) ve Arapça (ar) için yazı tipi. Sayfanın kendi yazı tipleri (Archivo/Inter) yalnız latin ve latin-ext alt kümelerini taşıyor — bu iki yazı sistemi onlarda YOK ve tarayıcı sessizce kendi yedeğine düşüyor. Dış origin eklenmiyor (bkz. /trust): sistem yazı tipleri açıkça sıralanıyor, böylece hangi yedeğe düşüleceği tarayıcının keyfine kalmıyor. */ html[lang="hi"] body{ font-family:"Nirmala UI","Noto Sans Devanagari","Mangal",var(--govde); } html[lang="hi"] .dspl,html[lang="hi"] h1,html[lang="hi"] h2,html[lang="hi"] h3{ font-family:"Nirmala UI","Noto Sans Devanagari",var(--dspl); font-stretch:normal;letter-spacing:normal; } html[lang="ar"] body{ font-family:"Segoe UI","Noto Naskh Arabic","Tahoma",var(--govde); } html[lang="ar"] .dspl,html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{ font-family:"Segoe UI","Noto Kufi Arabic","Tahoma",var(--dspl); font-stretch:normal;letter-spacing:normal; } /* Latin gövdenin aksine bu iki yazı sisteminde harfin üstünde ve altında iş var: Arapça'da hareke (shadda, kasra), Devanagari'de mātrā çizgisi ve alt işaretler. Başlıkların temel satır aralığı .94 — kendi latin gövdesi için doğru, ama bu işaretleri satır kutusunun dışına taşırıyor ve .satir{overflow:hidden} onları kırpıyor (kırpma kaldırılamaz: satırın aşağıdan yukarı kayarak gelmesi o kırpmayla oluyor). Çözüm kutuyu büyütmek. */ html[lang="hi"] .dev,html[lang="hi"] .buyuk,html[lang="hi"] .orta, html[lang="ar"] .dev,html[lang="ar"] .buyuk,html[lang="ar"] .orta{ line-height:1.32;letter-spacing:normal; } html[lang="hi"] .satir,html[lang="ar"] .satir{padding-bottom:.16em}