/* ═══════════════════════════════════════════════════════════ TASARIM 2026 — YENİ BİLEŞENLER ═══ NEDEN AYRI DOSYA ═══ Buradaki bileşenlerin HİÇBİRİ eski sayfada yoktu: üst bar slogan satırı, konum çubuğu, yeni hero katmanları, partner ızgarası, eSIM şeridi, Sidera çubuğu, alt gezinme. Yeni sınıf adları olduğu için eski kuralları EZMİYORLAR — bu projede en pahalı hata kalıbı aynı özelliği iki yerde yazmaktı (dil seçici flex, hero nowrap, kategori hesabı; üçü de sessizce ezilmişti). Değişen ESKİ bileşenler burada değil, kendi dosyalarında düzeltildi. Palet ve yazı tipi `styles.css` içindeki tek belirteç bloğundan geliyor. ═══ ÖLÇÜLER TASARIMDAN ═══ Claude Design yön çalışması 412 piksel telefon çerçevesinde çizildi. Ölçüler oradan alındı; 8 pikselin altına düşen iki değer (6 punto slogan) okunabilirlik için büyütüldü ve sebebi ilgili kuralın yanında yazıyor. ═══════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════ 1 · ÜST BAR Tasarım: 12/16 dolgu, 1 piksel alt çizgi, 38 piksel kontroller, 5 piksel aralık. Marka solda İKİ SATIR: logo ve altında slogan. ═══════════════════════════════════════════════════════════ */ .ust-marka{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; /* Ana sayfaya dönüş bağlantısı: dokunma hedefi 44 piksel. Logo 26, slogan 12 piksel; ikisi 40 ediyordu. */ min-height:44px; gap:2px; min-width:0; flex:0 1 auto; /* SERT GÜVENCE: slogan sütundan taşıp sağdaki düğmelerin ALTINA giremesin. TARAYICIYA SORULDU (412 px): sütun 161 piksele sıkışıyordu ama slogan 190 piksel istiyor ve fark 19 piksel favori düğmesinin üstüne biniyordu. Punto küçültmek tek başına yetmez — çeviriler farklı uzunlukta, biri yine taşardı. */ overflow:hidden; } .ust-marka img{display:block;height:26px;width:auto;max-width:100%} /* * SLOGAN SATIRI * Tasarımda 6 punto. 6 punto ekranda okunmuyor — telefon * çerçevesinde "grafik doku" gibi duruyor, gerçek ekranda ise * gezgin ne yazdığını seçemiyor. 8,5 puntoya çıkarıldı ve harf * aralığı .06em yapıldı; logo 26 piksel olduğu için oran * tasarımdakiyle aynı kalıyor (24/6 ≈ 26/8,5 değil ama tasarımın * amacı orantı değil "ikinci satır sessiz kalsın"dı). * * 320 pikselde slogan gizleniyor: orada bar zaten dolu ve marka * adının kırpılması kabul edilemez. */ .ust-slogan{ /* Ekran genişliğiyle ölçekleniyor: logo 26 piksel yüksekliğinde 161 piksel yer kaplıyor (2010/320 en-boy) ve slogan o genişliğe sığmak zorunda. ÖLÇÜLDÜ — 412 pikselde 7,8 punto ile 31 karakter 159 piksel; 480 ve üstünde 9 puntoya çıkıyor. */ font-size:clamp(7px,1.8vw,9px); font-weight:700; letter-spacing:.06em; color:var(--muted); white-space:nowrap; text-transform:uppercase; max-width:100%; overflow:hidden; text-overflow:ellipsis; } /* * Kontrol grubu: favori · giriş (menü düğmesi grubun dışında). * * ═══ ÜÇ KONTROL, 44 PİKSEL ═══ * Önce beş kontrol vardı ve hepsi 38 pikseldeydi; ölçümde 320'de * 29 piksele kadar iniyorlardı. Dil ve para menüye taşınınca yer * açıldı ve kalan üçü şartnamedeki 44 piksel dokunma hedefine * çıkabildi. Ölçüldü: 320'de üçü + marka tam sığıyor. */ .ust-araclar{display:flex;align-items:center;gap:6px;flex:0 1 auto;min-width:0} /* Tasarımdaki nötr düğme: açık gri zemin, ince çizgi, 12 köşe. */ .ust-dugme{ display:flex;align-items:center;justify-content:center;gap:3px; min-height:44px;min-width:44px;padding:0 10px; border:1px solid var(--line);border-radius:var(--r-kucuk); background:var(--yuzey-2);color:var(--ink); font-size:11.5px;font-weight:700;white-space:nowrap;cursor:pointer; transition:background .15s ease,border-color .15s ease,transform .12s ease; } .ust-dugme:active{transform:scale(.95)} @media(hover:hover){ .ust-dugme:hover{background:var(--turkuaz-acik);border-color:var(--turkuaz-cizgi)} } /* Tek simgelik düğmelerde yan dolgu yok: kare kalsınlar. */ .ust-dugme.ust-simge{padding:0;width:44px;flex:0 0 44px} /* ═══ HAMBURGER ÇİZGİLERİ YAN YANA DÜŞÜYORDU ═══ `.menu-button` hem eski kuralını hem `.ust-dugme`yi taşıyor. `.ust-dugme` `display:flex` veriyor ve varsayılan yön SATIR; üç çizgi (18×2 piksel) yan yana dizilip ekranda BOŞ BİR KUTU olarak görünüyordu — ölçüldü, 412 pikselde düğme görünüyor ama içi boştu. Çizgiler alt alta ve ortalı: menü düğmesi dar ekranda tek gezinme yolu, kaybolması kabul edilemez. */ .menu-button.ust-dugme{flex-direction:column;gap:4px} .menu-button.ust-dugme span{width:18px;height:2px;margin:0;border-radius:1px;background:var(--ink)} /* * ═══ DİL VE PARA KUTULARI BURADA TANIMLANMIYOR ═══ * İlk yazımda `select.ust-dugme` diye ayrı bir kural yazdım ve * yerleşik oku kaldırıp kendi okumu çizdim. EKRANDA İKİ OK ÇIKTI: * `styles.css` bu işi ZATEN yapıyordu (`appearance:none` + `::after` * ile "▾"). İkinci kural birincisini ezmedi, YANINA eklendi. * * Bu projenin en pahalı hata kalıbı bu ve bu sefer ekranda * görüldüğü için yakalandı. Kutuların görünümü tek yerde: * `styles.css` içindeki `.dil-secici select` ve `.para-secici * select` kuralları — 2026 ölçüleri oraya yazıldı. */ /* Giriş: sayfadaki tek degrade düğme. İkinci bir yerde kullanılırsa "birincil eylem" olmaktan çıkar. */ .ust-giris{ display:flex;align-items:center;justify-content:center; min-height:44px;padding:0 13px; border:0;border-radius:var(--r-kucuk); background:var(--dolgu-marka); color:#fff;font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer; box-shadow:0 3px 10px rgba(22,143,211,.24); transition:filter .15s ease,transform .12s ease; } .ust-giris:active{transform:scale(.96)} @media(hover:hover){.ust-giris:hover{filter:brightness(1.06)}} @media(max-width:359px){ /* 320 pikselde ölçüldü: slogan satırı bara 96 piksel ekliyor ve menü düğmesi ekrandan taşıyor. Slogan kalkıyor, logo kalıyor. */ .ust-slogan{display:none} } /* ═══════════════════════════════════════════════════════════ 2 · KONUM ÇUBUĞU Üst barın hemen altında tek satır: gezgin nerede olduğumuzu bildiğimizi ilk bakışta görüyor. Konum yoksa çubuk aynı yerde "konum al" çağrısına dönüşüyor — iki ayrı öğe değil, tek satırın iki hâli. İki öğe olsaydı biri güncellenip öteki eskirdi. ═══════════════════════════════════════════════════════════ */ .konum-cubugu{ display:flex;align-items:center;justify-content:center;gap:7px; /* 34 → 44: teslim şartnamesinde dokunma hedefi en az 44 piksel. Bu çubuk konum vermenin TEK kapısı; kaçırılan dokunuş vitrini boş bırakıyor. */ width:100%;min-height:44px;padding:9px 16px; border:0;border-bottom:1px solid var(--line); background:var(--turkuaz-acik); color:var(--turkuaz-koyu); font-size:12px;font-weight:700;line-height:1.3; text-align:center;cursor:pointer; } .konum-cubugu svg{flex:0 0 auto;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9} /* Konum bilinmiyorken çubuk bir EYLEM: rengi nötr, oku var. */ .konum-cubugu.konum-yok{background:var(--yuzey);color:var(--muted)} .konum-cubugu.konum-yok b{color:var(--ink)} .konum-cubugu-ok{margin-left:2px;color:var(--turkuaz-koyu)} /* ═══════════════════════════════════════════════════════════ 3 · HERO — ÜÇ SLAYT ═══ NEDEN 2:1 ═══ Tasarım 16:9 istiyor. Dosyalar ölçüldü: hero-travel.webp 1536×1024 (üstte 1536×768 fotoğraf, altta beyaz bant) hero-esim.webp 1536×1024 (aynı yapı) hero-rentacar.webp 1536×864 (tam 16:9) Travel ve eSIM'in FOTOĞRAF alanı tam 2:1. Kutu 2:1 olunca `object-fit:cover` + üst hizalama beyaz bandı TAM OLARAK kırpıyor; 16:9 kutuda ise bandın bir kısmı ekranda kalıyordu (ölçüldü: kutu yüksekliğinin %11'i beyaz şerit). Rent a Car 16:9 olduğu için 2:1 kutuda dikeyde %11 kırpılıyor, ortalanmış — arabanın kompozisyonu bozulmuyor. ═══ MUTLAK KONUMLAMA YOK ═══ Eski hero'da her metin katmanı `position:absolute` ve YÜZDESEL `top` değerindeydi. Yüzde sabit bir nokta veriyor; metin uzayınca alttakinin üstüne biniyordu — iki kez düzeltildi, iki kez geri geldi (v704, v705). Şimdi slaytın içinde TEK katman var, o da `inset:0` ile slaytı kaplıyor ve içindekiler `flex` + `gap` ile diziliyor. Metin uzarsa yığın yukarı doğru büyür, çakışacak ikinci bir katman yok. ═══════════════════════════════════════════════════════════ */ .hero.hero-kayan{ position:relative; isolation:isolate; padding:0; background:#fff; } .hero-gorsel-kaydirici{ position:relative; z-index:1; width:100%; aspect-ratio:2/1; overflow:hidden; background:var(--zemin); cursor:grab; /* Dikey kaydırma parmaktan alınmaz: yalnız yatay sürükleme slaytı çeviriyor. */ touch-action:pan-y; user-select:none; -webkit-user-select:none; } .hero-gorsel-kaydirici:active{cursor:grabbing} .hero-gorsel-track{ display:flex; width:100%;height:100%; will-change:transform; transform:translate3d(-100%,0,0); transition:transform .76s cubic-bezier(.22,.72,.2,1); } .hero-gorsel-slide{ position:relative; flex:0 0 100%; width:100%;height:100%; overflow:hidden; background:var(--zemin); } .hero-zemin{ position:absolute;inset:0; display:block;width:100%;height:100%; object-fit:cover; pointer-events:none; -webkit-user-drag:none; user-select:none; } /* Beyaz bant tam kırpılsın diye üstten hizalanıyorlar. */ .hero-gorsel-travel .hero-zemin, .hero-gorsel-esim .hero-zemin{object-position:top center} .hero-gorsel-rentacar .hero-zemin{object-position:center} /* Perde: fotoğrafın üstündeki yazı her fotoğrafta okunsun diye. Ölçüldü — perdesiz hâlde beyaz başlık açık gökyüzünde 1,6 kontrasta düşüyordu, WCAG 4,5 istiyor. */ .hero-perde{position:absolute;inset:0;pointer-events:none} .hero-perde-yan{background:linear-gradient(to right,rgba(3,17,34,.84) 0%,rgba(3,17,34,.45) 55%,rgba(3,17,34,.05) 100%)} .hero-perde-dip{background:linear-gradient(to top,rgba(3,17,34,.86) 0%,rgba(3,17,34,.35) 38%,rgba(3,17,34,0) 62%)} /* Metin yığını: tek katman, flex, gap. Yüzde yok. */ .hero-kat{ position:absolute;inset:0;z-index:2; display:flex;flex-direction:column;justify-content:flex-end; gap:7px; padding:18px 16px 30px; color:#fff; } /* Seyahat slaytı degradenin ortasında duruyor: fotoğraf yok, dolayısıyla dip hizası yerine dikey ortalama. */ .hero-kat-orta{justify-content:center;padding-bottom:34px} .hero-gorsel-travel{background:var(--dolgu-marka)} .hero-ustyazi{ font-size:11px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;opacity:.88; } .hero-h{ margin:0; font-size:clamp(19px,5.4vw,30px); line-height:1.18;font-weight:700;letter-spacing:-.02em; color:#fff; } .hero-alt{ margin:0; font-size:clamp(12px,3.4vw,15px); line-height:1.4;opacity:.92; } /* Sağda QR duruyorsa metin onun altına girmesin. */ .hero-kat-esim .hero-h, .hero-kat-esim .hero-alt{max-width:calc(100% - 76px)} /* eSIM üç adımı: çip satırı sarabilir, taşamaz. */ .hero-esim-satir{display:flex;align-items:flex-end;justify-content:space-between;gap:12px} .hero-esim-metin{display:flex;flex-direction:column;gap:7px;min-width:0} .hero-adimlar{display:flex;flex-wrap:wrap;gap:6px} .hero-adim{ font-size:11.5px;font-weight:600; background:rgba(255,255,255,.18); border-radius:999px;padding:5px 9px; /* Sarmaya izin var: Almanca "1 · Kaufen" kısa ama Rusça karşılıkları iki katı. Sarmayan çip komşusunun üstüne biner — bu projede tam olarak böyle oldu. */ white-space:normal; overflow-wrap:anywhere; } .hero-qr{ flex:0 0 auto; display:block; background:#fff;border-radius:10px;padding:6px;line-height:0; box-shadow:0 4px 14px rgba(3,17,34,.28); } .hero-qr svg{display:block;width:52px;height:52px} /* Araç slaytındaki ortak logosu: beyaz zeminde okunsun. */ .hero-marka-cip{ align-self:flex-start; display:flex;align-items:center; background:#fff;border-radius:7px;padding:4px 7px; } .hero-marka-cip img{display:block;height:14px;width:auto;object-fit:contain} .hero-gorsel-noktalar{ position:absolute;left:50%;bottom:10px;z-index:5; display:flex;gap:7px; transform:translateX(-50%); } /* * ═══ GÖRÜNEN 8 PİKSEL, DOKUNULAN 44 ═══ * Nokta 8 piksel çünkü tasarımda gösterge, düğme değil. Ama ÖLÇÜLDÜ: * dokunma alanı da 8 pikseldi ve parmakla vurulamıyordu. Görünümü * `::before` taşıyor, dokunma alanını kutunun kendisi. */ .hero-gorsel-nokta{ position:relative;width:44px;height:44px;padding:0;border:0; background:none;box-shadow:none;cursor:pointer; } .hero-gorsel-nokta::before{ content:"";position:absolute;inset:0;margin:auto; width:8px;height:8px;border-radius:50%; background:rgba(255,255,255,.55); box-shadow:0 1px 3px rgba(3,17,34,.4); } .hero-gorsel-nokta.is-active::before{background:#fff} @media(min-width:901px){ /* Geniş ekranda hero sayfayla aynı ölçüde kalıyor; tam ekrana yayılınca fotoğraf devleşiyor ve altındaki içerik ekran dışına düşüyordu. */ .hero-gorsel-kaydirici{width:min(1280px,100%);margin-inline:auto;border-radius:var(--r-kart)} .hero-kat{padding:26px 30px 40px} } @media(max-width:620px){ /* Telefonda hero kenardan kenara: 16 piksel yan boşluk fotoğrafı küçültüyor ve bant hissi kayboluyordu. */ .hero-gorsel-kaydirici{width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw)} } @media(prefers-reduced-motion:reduce){ .hero-gorsel-track{transition:none} } /* ═══════════════════════════════════════════════════════════ 4 · PARTNERLERİMİZ · TEK LİSTEDE Altı kutu, iki kolon, her biri "Keşfet →". Kayan şerit değil IZGARA: şeritte gezgin altı ortağın altısını görmek için beklemek zorundaydı, ızgarada hepsi bir bakışta. ═══════════════════════════════════════════════════════════ */ .ortak-izgara-bolum{display:flex;flex-direction:column;gap:12px} /* ═══ KAYAN ŞERİT (22 Ağustos, kullanıcı isteğiyle geri geldi) ═══ KULLANICI: "partnerlerimiz tek listede olan yer kayan bant şerit halinde eski tasarımdaki gibi kalacak." ═══ NEDEN `transform`, `scrollLeft` DEĞİL ═══ Daha önce iki yol da denendi ve ikisi de EKRANDA görüldü: `scrollLeft` kesirli değer tutmuyor, üç karede bir 1 piksel sıçrıyor (titreşim). Kaydırılabilir kabı `transform` ile kaydırmak ise içeriği kabın ulaşamadığı bir alana itiyor ve şerit yarım turda kayboluyor. Şimdi TEK mekanizma: kap kaydırılmıyor, hem otomatik dönüş hem parmakla sürükleme aynı `--kaydir` değişkenini yazıyor. Kenarlarda maske: logolar aniden kesilmek yerine soluyor. */ .ortak-serit{ position:relative; margin:2px auto 4px; max-width:100%; overflow:hidden; /* Dikey kaydırma parmakta kalıyor: sayfa aşağı inebilsin. */ touch-action:pan-y; cursor:grab; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); } .ortak-serit.suruklenirken{cursor:grabbing} .ortak-serit:focus-visible{outline:2px solid var(--turkuaz-dolgu);outline-offset:3px;border-radius:var(--r-kutu)} .ortak-ray{ display:flex; gap:9px; width:max-content; padding:2px; transform:translate3d(var(--kaydir,0px),0,0); will-change:transform; } .ortak-kart{ /* Sabit genişlik: şeritte kutular aynı ritimde geçmeli. */ flex:0 0 158px; display:flex;flex-direction:column;gap:6px; padding:12px; border:1px solid var(--line);border-radius:var(--r-kutu); background:#fff; text-align:left; cursor:pointer; transition:border-color .15s ease,box-shadow .15s ease,transform .12s ease; } .ortak-kart:active{transform:scale(.985)} @media(hover:hover){ .ortak-kart:hover{border-color:var(--turkuaz-cizgi);box-shadow:var(--golge-kart)} } /* Logolar farklı en-boy oranında geliyor; sabit yükseklik ve `contain` hepsini aynı optik ağırlığa getiriyor. */ .ortak-kart img{display:block;height:17px;width:auto;max-width:100%;object-fit:contain;object-position:left center} .ortak-kart-not{font-size:12px;line-height:1.35;color:var(--muted)} .ortak-kart-kesfet{ margin-top:auto; font-size:12px;font-weight:700;color:var(--turkuaz-koyu); } .ortak-izgara-not{margin:0;font-size:11.5px;line-height:1.45;color:var(--muted)} @media(min-width:700px){ .ortak-kart{flex-basis:184px} } /* ═══════════════════════════════════════════════════════════ 5 · eSIM ŞERİDİ Vitrin bölümlerinin arasında tek satır: gezgin turları gezerken "internet de lazım" hatırlatması. Kart değil şerit çünkü ürün listesinin ritmini bölmemeli. ═══════════════════════════════════════════════════════════ */ .esim-serit{ display:flex;align-items:center;gap:12px; padding:14px; border-radius:var(--r-kart); background:var(--dolgu-marka); color:#fff; } .esim-serit-ikon{ flex:0 0 auto;display:grid;place-items:center; width:42px;height:42px;border-radius:var(--r-kucuk); background:rgba(255,255,255,.18); } .esim-serit-ikon svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.7} .esim-serit-metin{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto} .esim-serit-metin b{font-size:14px;font-weight:700;line-height:1.25} .esim-serit-metin span{font-size:12px;line-height:1.35;opacity:.9} .esim-serit-dugme{ flex:0 0 auto; display:flex;align-items:center;justify-content:center; min-height:36px;padding:0 12px; border-radius:999px;background:#fff;color:var(--turkuaz-koyu); font-size:12px;font-weight:700;white-space:nowrap; } /* ═══════════════════════════════════════════════════════════ 6 · SİDERA ÇUBUĞU — YENİDEN YAZILMADI Tasarımın "kademe 1"i her sayfanın altında duran tek satırlık Sidera çubuğu. Bu sitede O ÇUBUK ZATEN VAR: `ai-cubugu.js` `.ytg-cubuk` olarak çiziyor ve tasarımdakinden bir adım ileride — gezgin çubuğa doğrudan yazabiliyor, önce açmak zorunda değil. İkinci bir çubuk yazmak aynı işi iki yerde tutmak olurdu; bu projede ortak adları, kategori listesi ve pickup metni tam böyle üçer kopyaya çıkmıştı. Burada yapılan tek şey KONUMU: çubuk alt gezinmenin üstüne çıkıyor. Kuralın kendisi `styles.css` içindeki tek `.ytg-cubuk` tanımında; burada ikinci bir tanım YOK. ═══════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════ 7 · ALT GEZİNME Dört sekme, 62 piksel yüksek. Yükseklik BİR DEĞİŞKENDE çünkü üç yer onu bilmek zorunda: gezinmenin kendisi, üstünde duran Sidera çubuğu ve sayfanın alt dolgusu. Üç yere ayrı ayrı "62" yazmak, birini değiştirip ötekileri unutmak demekti — çubuk gezinmenin altında kalır ve tıklanamazdı. ═══════════════════════════════════════════════════════════ */ .alt-gezinme{ position:fixed;left:0;right:0;bottom:0;z-index:55; display:grid;grid-template-columns:repeat(4,1fr); height:calc(var(--alt-gezinme) + env(safe-area-inset-bottom, 0px)); padding-bottom:env(safe-area-inset-bottom, 0px); border-top:1px solid var(--line); background:rgba(255,255,255,.97); backdrop-filter:blur(12px); } .alt-gezinme a{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; font-size:10.5px;font-weight:600;color:var(--muted); } .alt-gezinme svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .alt-gezinme a.is-aktif{color:var(--turkuaz-koyu)} .alt-gezinme a.is-aktif svg{stroke-width:2.1} /* ═══════════════════════════════════════════════════════════ 8 · ÜRÜN KARTI FOTOĞRAF ŞERİDİ — KÜÇÜK KARELER Tasarım 3a: kaydırma alışkanlık ama alttaki küçük kareler "daha var" bilgisini fotoğrafı kapatmadan veriyor. TEK FOTOĞRAFTA KAREler KAYBOLUYOR ve kart yüksekliği DEĞİŞMİYOR: kareler görselin üstünde duruyor, akışta yer kaplamıyorlar. Tasarımın 3d "bozulma testi" tam bunu istiyor. ═══════════════════════════════════════════════════════════ */ .uk-kareler{ position:absolute;left:10px;bottom:10px;z-index:2; display:flex;gap:4px; pointer-events:none; } .uk-kare{ width:20px;height:15px;border-radius:4px; background-size:cover;background-position:center; box-shadow:0 0 0 1.5px rgba(255,255,255,.9); opacity:.72; } .uk-kare.is-aktif{opacity:1} /* Beşten fazlası kareyi okunmaz yapıyor; kalanı sayaç anlatıyor. */ .uk-kare:nth-child(n+6){display:none} /* ═══════════════════════════════════════════════════════════ 9 · BÖLÜM BAŞLIĞI ORTAK RİTMİ Tasarımda her bölüm aynı iki satırla açılıyor: küçük büyük harf üst yazı, altında başlık. Vitrin bölümleri bunu `.vb-*` ile yapıyor; sayfa bölümleri için aynı ritim burada. ═══════════════════════════════════════════════════════════ */ .bolum-bas{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .bolum-ustyazi{ display:block; font-size:11px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--turkuaz-koyu); } .bolum-baslik{margin:2px 0 0;font-size:21px;line-height:1.2;font-weight:700} /* ═══════════════════════════════════════════════════════════ 10 · MENÜ İÇİ DİL / PARA KUTUSU `ust-kontrol.js` 360 pikselin altında seçicileri buraya taşıyor. Kutu boşken HİÇ ÇİZİLMİYOR (`hidden`): boş bir başlık, olmayan bir bölüm gibi durur. ═══════════════════════════════════════════════════════════ */ /* ═══ MENÜDEKİ DİL VE PARA SATIRLARI ═══ Menü satır yüksekliği tasarımda 48 piksel; seçiciler de aynı ritimde duruyor ki liste tek bir sütun gibi okunsun. Yerleşik `