/* ========================================================================== SAYFA YÜZEYLERİ VE BİLEŞEN KATMANI (styles.css'ten SONRA yüklenir) Sıra önemlidir: 1) Cam yüzeyler 2) Köşe yuvarlama 3) Etiket stili Header/mega menü/modal/widget'a dokunmaz (main/section/footer kapsamı) — radius ve düğme kuralları istisna olarak tüm sitedeki düğmeleri kapsar. ========================================================================== */ /* ───── 1) CAM YÜZEYLER (iOS Liquid Glass) ───── */ /* ========================================================================== IMPULA — iOS "Liquid Glass" YÜZEY KATMANI -------------------------------------------------------------------------- styles.css'ten SONRA yüklenir; yalnızca sayfa içeriğini (main / section / footer) günceller. Header, mega menü, modal ve widget'lara DOKUNMAZ. Tamamen geri alınabilir: layout'taki 'i kaldırmak yeterli. Yazı tipleri typography.css'ten gelir; burada font tanımlanmaz. ========================================================================== */ :root { /* iOS malzeme (material) değerleri */ --ios-glass-bg: #ffffff; --ios-glass-bg-thin: #ffffff; --ios-glass-blur: none; --ios-glass-border: rgba(226,232,240,.9); /* üstten ince parlama (specular) + alttan yansıma + yumuşak düşen gölge */ --ios-glass-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(20,30,70,.05), 0 14px 36px -14px rgba(40,50,110,.22); --ios-glass-shadow-hover: inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(255,255,255,.4), 0 2px 4px rgba(20,30,70,.06), 0 26px 48px -16px rgba(80,60,200,.30); --ios-radius-card: 1.75rem; /* 28px */ --ios-radius-row: 1.25rem; /* 20px */ --ios-ease: cubic-bezier(.32,.72,0,1); /* iOS yay eğrisi */ } /* --- Cam yüzeyler ------------------------------------------------------- */ main .glass-panel, section .glass-panel, footer .glass-panel { background: var(--ios-glass-bg); backdrop-filter: var(--ios-glass-blur); -webkit-backdrop-filter: var(--ios-glass-blur); border: 1px solid var(--ios-glass-border); box-shadow: var(--ios-glass-shadow); border-radius: var(--ios-radius-card); transition: transform .45s var(--ios-ease), box-shadow .45s var(--ios-ease); } /* Kartlarda hover animasyonu yok: yükselme, gölge değişimi, yakınlaşma kapalı */ main .glass-panel, section .glass-panel, main .glass-panel:hover, section .glass-panel:hover, main a.glass-panel:hover, section a.glass-panel:hover { transform: none; box-shadow: var(--ios-glass-shadow); transition: none; } main .glass-panel:hover [class*="group-hover:translate"], section .glass-panel:hover [class*="group-hover:translate"], main .glass-panel:hover [class*="group-hover:scale"], section .glass-panel:hover [class*="group-hover:scale"] { transform: none; } main .glass-panel-subtle, section .glass-panel-subtle, footer .glass-panel-subtle { background: var(--ios-glass-bg-thin); backdrop-filter: var(--ios-glass-blur); -webkit-backdrop-filter: var(--ios-glass-blur); border: 1px solid var(--ios-glass-border); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 18px -10px rgba(40,50,110,.2); border-radius: var(--ios-radius-row); } /* Pill (kapsül) — iOS segmented/capsule hissi */ main .glass-pill, section .glass-pill { background: var(--ios-glass-bg-thin); backdrop-filter: var(--ios-glass-blur); -webkit-backdrop-filter: var(--ios-glass-blur); border: 1px solid var(--ios-glass-border); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 14px -8px rgba(40,50,110,.25); border-radius: 9999px; } /* --- Kart içi ikon kutuları: iOS uygulama ikonu (squircle) --------------- */ main .glass-panel .w-11.h-11, section .glass-panel .w-11.h-11 { border-radius: 14px; background: linear-gradient(180deg, #fff 0%, #f3f6fd 100%); box-shadow: inset 0 1px 0 #fff, 0 6px 14px -6px rgba(40,50,110,.28); } /* --- Bölüm başlıkları: iOS "Large Title" ritmi --------------------------- */ main section > div > h2, main section h2.font-display { letter-spacing: -.02em; } /* --- Vurgu butonları: kapsül + iç parlama ------------------------------- */ main .bg-brand-gradient, section .bg-brand-gradient { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 24px -10px rgba(118,45,233,.55); } /* --- Kaydırmalı şerit / yuvarlak ok butonları: cam daire ---------------- */ section [data-scroll-controls] button, section .h-ctl button { background: var(--ios-glass-bg); backdrop-filter: var(--ios-glass-blur); -webkit-backdrop-filter: var(--ios-glass-blur); border: 1px solid var(--ios-glass-border); box-shadow: var(--ios-glass-shadow); } /* --- Hareket azaltma tercihine saygı ------------------------------------ */ /* Şerit okları: hover'da koyu dolgu (geri bildirim net olsun) */ section .h-ctl button:hover { background: #0f172a; border-color: #0f172a; color: #fff; } /* ───── 2) KÖŞE YUVARLAMA SİSTEMİ ───── */ /* ========================================================================== KÖŞE YUVARLAMA SİSTEMİ — tek kaynak Düğmeler ve kapsüller tam yuvarlak; kartlar ve diğer yüzeyler hafif. Değerleri yalnızca buradan değiştirin. ========================================================================== */ :root { --r-pill: 9999px; /* düğmeler, etiket kapsülleri, yuvarlak ikon düğmeleri */ --r-card: 12px; /* kartlar, paneller, büyük görseller */ --r-md: 8px; /* form alanları, küçük kutular */ --r-sm: 5px; /* minik rozetler */ } /* Tailwind yuvarlama sınıfları -> hafif değerlere eşle (rounded-full dokunulmaz) */ .rounded-3xl, .rounded-2xl { border-radius: var(--r-card) !important; } .rounded-xl, .rounded-lg { border-radius: var(--r-md) !important; } .rounded, .rounded-md, .rounded-sm { border-radius: var(--r-sm) !important; } /* Cam yüzeyler ve kart içi görseller */ .glass-panel, .dark-showcase-panel, .proj-card { border-radius: var(--r-card) !important; } .glass-panel-subtle { border-radius: var(--r-md) !important; } .proj-card .proj-media, .proj-media { border-radius: var(--r-md) !important; } /* Form alanları */ input:not([type="checkbox"]):not([type="radio"]), select, textarea { border-radius: var(--r-md) !important; } /* Düğmeler: tam yuvarlak */ button:not(.x-none), [type="submit"], .glass-pill, .circle-link b, a.bg-brand-gradient:not(.flex-col), [data-open-modal] { border-radius: var(--r-pill) !important; } /* Tam genişlik bantlar (marquee vb.) düğme değildir: köşeler düz */ section.bg-brand-gradient, footer, main, section { border-radius: 0 !important; } .rounded-full { border-radius: var(--r-pill) !important; } /* Kart köşesindeki dekoratif tint: sağ-alt dışa doğru yuvarlak kalsın */ .rounded-bl-full { border-bottom-left-radius: var(--r-pill) !important; } /* ───── 3) ETİKET STİLİ ───── */ /* ========================================================================== ETİKET STİLİ — küçük, büyük harfli, mono/aralıklı etiketler yerine okunaklı, normal yazım etiketler. Sayfa içeriğine uygulanır; header'a dokunmaz. ========================================================================== */ main .font-mono, section .font-mono, footer .font-mono, main .font-mono.uppercase, section .font-mono.uppercase, footer .font-mono.uppercase { text-transform: none !important; letter-spacing: .01em !important; } /* minik boyutlar okunaklı hale gelir */ main .font-mono[class*="text-[9px]"], section .font-mono[class*="text-[9px]"], footer .font-mono[class*="text-[9px]"] { font-size: 11.5px !important; } main .font-mono[class*="text-[10px]"], section .font-mono[class*="text-[10px]"], footer .font-mono[class*="text-[10px]"] { font-size: 12px !important; } main .font-mono[class*="text-[11px]"], section .font-mono[class*="text-[11px]"], footer .font-mono[class*="text-[11px]"] { font-size: 13px !important; } main .font-mono.text-xs, section .font-mono.text-xs, footer .font-mono.text-xs { font-size: 13px !important; } /* Hero dışı etiketlerde (uppercase + aralıklı) sade görünüm */ main .uppercase, section .uppercase, footer .uppercase { text-transform: none !important; letter-spacing: .01em !important; } main [class*="tracking-wider"], section [class*="tracking-wider"], footer [class*="tracking-wider"], main [class*="tracking-[0."], section [class*="tracking-[0."], footer [class*="tracking-[0."] { letter-spacing: .01em !important; } /* Buton sistemindeki büyük harf de kalkar */ .btn-x { text-transform: none; letter-spacing: .01em; font-size: .8125rem; } /* Mega menü paneli: üst köşeler düz (header'a yapışık görünür), alt köşeler kart değeriyle yuvarlak */ .nav-mega-panel .glass-panel { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } /* Kartlar düz beyaz: hizmet içeriklerindeki satır içi yarı saydam kartlar da dahil */ .service-content [style*="rgba(255,255,255,0.72)"], .service-content [style*="rgba(255, 255, 255, 0.72)"], .service-content [style*="rgba(255,255,255,.72)"] { background: #fff !important; border-color: rgba(226,232,240,.9) !important; } /* Site arka planı: düz beyaz (renk lekeleri ve duvar kağıdı gradyanı yok) */ body, body.site-bg-white { background: #ffffff !important; background-image: none !important; } .ambient-blobs { display: none !important; } /* Hizmet gezgini: görselin gradyanı kartın tüm zemini olur (daha açık/şeffaf ton) */ section .se-panel.glass-panel { background: radial-gradient(520px 340px at 78% 28%, rgba(37,150,255,.16), transparent 70%), radial-gradient(560px 380px at 96% 95%, rgba(118,45,233,.18), transparent 70%), linear-gradient(135deg, rgba(37,150,255,.07), rgba(118,45,233,.09)), #ffffff; } .se-visual { background: transparent; } .se-orb { display: none; }