/* ============================================================ WINARI GUNCEL TEKNIK YONETIM (5x5 MESH & KATMAN DUZENI) ============================================================ */ /* 1. SIVALI (PLASTERED) SISTEMLER - 5x5 KARE TEL MESH */ /* Hem sol (::before) hem sag (::after) kasetlere 5px mesh uygular */ .product-card.plastered .door-frame-front::before, .product-card.plastered .door-frame-front::after, .product-card.plastered .door-frame-top::before, .product-card.plastered .door-frame-top::after { background-color: rgba(var(--line-rgb), 0.04) !important; background-image: linear-gradient(to right, rgba(var(--line-rgb), 0.22) 1px, transparent 1px), linear-gradient(to bottom, rgba(var(--line-rgb), 0.22) 1px, transparent 1px) !important; background-size: 6px 6px !important; /* Istedigin 5x5 olcusu */ z-index: 1 !important; /* Dokulari en alta cektik */ } /* 2. ALCIPAN (BOARD) SISTEMLER - 7 ADET YATAY KLAPA */ .product-card.board .door-frame-front::before, .product-card.board .door-frame-front::after { background-color: rgba(var(--line-rgb), 0.04) !important; background-image: linear-gradient( transparent 94%, rgba(var(--line-rgb), 0.25) 94% ) !important; background-size: 100% 20% !important; background-repeat: repeat-y !important; z-index: 1 !important; } /* 3. LUCE (ISIKLI) SERI KATMAN DUZELTMESI */ /* Isik mesh goruntusunun ustunde, panelin altinda kalmali */ .door-frame-front.luce::after, .door-frame-top.luce::after { z-index: 5 !important; /* Mesh'in (1) ustune cikardik */ background: #FFD700 !important; /* Net sari */ box-shadow: 0 0 15px rgba(255, 215, 0, 0.7) !important; border: none !important; content: ''; position: absolute; width: 20px; height: 100%; left: 50%; margin-left: -20px; } /* 4. TUM KULPLARIN STANDART OLCUSU VE KONUMLARI */ .door-panel-front::after { content: ''; position: absolute; width: 7px; height: 7px; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.6) !important; border-radius: 50%; z-index: 50 !important; /* Her seyin en ustunde */ box-shadow: inset 1px 1px 1px rgba(0,0,0,0.5); } /* Kulp Yonleri */ .single .door-panel-front::after, .double .door-panel-front:first-child::after, .telescopic .door-panel-front:last-child::after, .telescopic-double .door-panel-front:nth-child(2)::after { right: 3px; left: auto; } .double .door-panel-front:last-child::after, .telescopic-double .door-panel-front:nth-child(4)::after { left: 5px; right: auto; } /* DUO Kulp Ayari */ .duo .door-panel-front:first-child::after { left: 5px !important; right: auto !important; } .duo .door-panel-front:last-child::after { right: 5px !important; left: auto !important; filter: brightness(1.3); } /* Duo sag tarafta kaset olmadigi icin deseni temizle */ .duo .door-frame-front::after { background-image: none !important; } /* 5. GEREKSIZLERI GIZLE */ .telescopic .door-panel-front:first-child::after, .telescopic-double .door-panel-front:nth-child(1)::after, .telescopic-double .door-panel-front:nth-child(3)::after { display: none !important; } /* ============================================================ WINARI KESIN COZUM: 5x5 MESH & SIMETRIK GORUNUM ============================================================ */ /* 1. SOL KASET (::before) ICIN 5x5 MESH ZORLAMASI */ .product-card.plastered div[class*="door-frame"]::before { background-color: rgba(var(--line-rgb), 0.04) !important; background-image: linear-gradient(to right, rgba(var(--line-rgb), 0.22) 1px, transparent 1px), linear-gradient(to bottom, rgba(var(--line-rgb), 0.22) 1px, transparent 1px) !important; background-size: 6px 6px !important; /* Sol taraf icin kesin komut */ background-repeat: repeat !important; z-index: 1 !important; } /* 2. SAG KASET (::after) ICIN 5x5 MESH ZORLAMASI */ .product-card.plastered div[class*="door-frame"]::after { background-color: rgba(var(--line-rgb), 0.04) !important; background-image: linear-gradient(to right, rgba(var(--line-rgb), 0.22) 1px, transparent 1px), linear-gradient(to bottom, rgba(var(--line-rgb), 0.22) 1px, transparent 1px) !important; background-size: 6px 6px !important; /* Sag taraf icin kesin komut */ background-repeat: repeat !important; z-index: 1 !important; } /* 3. ALCIPAN (BOARD) SISTEMLER - 7 ADET YATAY KLAPA */ .product-card.board div[class*="door-frame"]::before, .product-card.board div[class*="door-frame"]::after { background-color: rgba(var(--line-rgb), 0.04) !important; background-image: linear-gradient( transparent 94%, rgba(var(--line-rgb), 0.25) 94% ) !important; background-size: 100% 20% !important; background-repeat: repeat-y !important; z-index: 1 !important; } /* 4. LUCE (ISIKLI) KATMAN SIRALAMASI */ .door-frame-front.luce::after, .door-frame-top.luce::after { z-index: 5 !important; /* Isigi meshin uzerine cikarir */ background: #FFD700 !important; box-shadow: 0 0 15px rgba(255, 215, 0, 0.7) !important; width: 20px; height: 100%; left: 50%; margin-left: -20px; } /* 5. KULP (HANDLE) YONETIMI - 5px MESAFE ILE */ .door-panel-front::after { content: ''; position: absolute; width: 7px; height: 7px; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.6) !important; border-radius: 50%; z-index: 50 !important; box-shadow: inset 1px 1px 1px rgba(0,0,0,0.5); } /* Kulp Konumlari */ .single .door-panel-front::after, .double .door-panel-front:first-child::after, .telescopic .door-panel-front:last-child::after, .telescopic-double .door-panel-front:nth-child(2)::after { right: 5px; /* Kenar payini 5px'e sabitledik */ left: auto; } .double .door-panel-front:last-child::after, .telescopic-double .door-panel-front:nth-child(4)::after, .duo .door-panel-front:first-child::after { left: 5px; right: auto; } .duo .door-panel-front:last-child::after { right: 5px !important; left: auto !important; } /* Gereksizleri Gizle */ .telescopic .door-panel-front:first-child::after, .telescopic-double .door-panel-front:nth-child(1)::after, .telescopic-double .door-panel-front:nth-child(3)::after { display: none !important; } :root { --primary: #E87722; --primary-dark: #D4691A; --secondary: #4B4B4B; --secondary-light: #808080; --accent: #F5F5F0; --accent-dark: #E8E8E0; --text: #333333; --text-light: #666666; --white: #FFFFFF; --transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); --line-rgb: 75, 75, 75; --surface-rgb: 255, 255, 255; --surface-alt-rgb: 245, 245, 240; --surface: rgb(var(--surface-rgb)); --surface-alt: rgb(var(--surface-alt-rgb)); --heading: #4B4B4B; --danger: #B0392A; } /* ================= ACIK / KOYU TEMA ================= */ html[data-theme="dark"] { --text: #D8D8D8; --text-light: #9A9A9A; --line-rgb: 255, 255, 255; --surface-rgb: 36, 36, 36; --surface-alt-rgb: 24, 24, 24; --heading: #EFEFEF; --accent: #181818; --accent-dark: #101010; --danger: #E5604C; } html[data-theme="dark"] body { background: #141414; } html[data-theme="dark"] .arch-bg { background: #141414; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(var(--line-rgb),0.2); background: transparent; cursor: pointer; color: var(--white); transition: var(--transition); margin-left: 10px; } .navbar.scrolled .theme-toggle { color: var(--heading); border-color: rgba(var(--line-rgb),0.2); } .theme-toggle:hover { border-color: var(--primary); color: var(--primary); } .theme-toggle i { font-size: 14px; } .theme-toggle .icon-moon { display: none; } html[data-theme="dark"] .theme-toggle .icon-sun { display: none; } html[data-theme="dark"] .theme-toggle .icon-moon { display: inline; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Montserrat', sans-serif; color: var(--text); background: var(--secondary); overflow-x: hidden; } /* Navigation */ .navbar { position: fixed; top: 0; width: 100%; z-index: 1000; padding: 20px 60px; display: flex; justify-content: space-between; align-items: center; transition: var(--transition); } .navbar.scrolled { background: rgba(var(--surface-rgb),0.95); backdrop-filter: blur(20px); box-shadow: 0 2px 30px rgba(0,0,0,0.08); padding: 15px 60px; } .logo { display: flex; align-items: center; gap: 12px; text-decoration: none; } .logo-full { height: 34px; width: auto; display: block; transition: var(--transition); } .logo-full.logo-koyu { display: none; } .navbar.scrolled .logo-full.logo-beyaz { display: none; } .navbar.scrolled .logo-full.logo-koyu { display: block; } html[data-theme="dark"] .navbar.scrolled .logo-full.logo-beyaz { display: block; } html[data-theme="dark"] .navbar.scrolled .logo-full.logo-koyu { display: none; } .logo-icon { height: 30px; width: auto; display: block; } .logo-dots { display: flex; gap: 6px; } .logo-dot { width: 12px; height: 12px; border-radius: 50%; } .logo-dot:nth-child(1) { background: var(--primary); } .logo-dot:nth-child(2) { background: #C0C0C0; } .logo-dot:nth-child(3) { background: var(--heading); } .logo-text { font-size: 28px; font-weight: 300; letter-spacing: 8px; color: var(--white); transition: var(--transition); } .navbar.scrolled .logo-text { color: var(--heading); } .logo-text span { color: var(--primary); font-weight: 400; } .nav-links { display: flex; gap: 40px; list-style: none; } .nav-links a { text-decoration: none; color: rgba(255,255,255,0.9); font-size: 13px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 0; transition: var(--transition); } .navbar.scrolled .nav-links a { color: var(--text); } .nav-links a:hover { color: var(--primary); } .nav-links a.active { color: var(--primary); } /* Hero */ .hero { height: 100vh; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(135deg, var(--secondary) 0%, #262626 100%); } .hero-content { position: relative; z-index: 2; text-align: center; max-width: 900px; padding: 0 40px; } .hero h1 { font-family: 'Playfair Display', serif; font-size: 72px; font-weight: 400; color: var(--white); line-height: 1.1; margin-bottom: 20px; } .hero h1 span:not(.ch) { color: var(--primary); font-style: italic; } /* Sections */ .products-section { background: var(--accent); color: var(--text); padding: 100px 60px; } .products-layout { max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: 240px 1fr; gap: 50px; align-items: start; } .products-sidebar { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 4px; background: var(--surface); border-radius: 16px; padding: 12px; border: 1px solid rgba(var(--line-rgb),0.08); box-shadow: 0 4px 20px rgba(var(--line-rgb),0.05); } .products-sidebar a { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-decoration: none; padding: 13px 16px; border-radius: 10px; color: var(--text); font-size: 13px; font-weight: 600; transition: var(--transition); } .products-sidebar a:hover { background: rgba(232,119,34,0.08); color: var(--primary); } .products-sidebar a .coming-soon-badge { font-size: 8.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-light); background: rgba(var(--line-rgb),0.08); padding: 3px 6px; border-radius: 6px; white-space: nowrap; } .products-main { min-width: 0; } .category-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: var(--surface); border: 1.5px dashed rgba(var(--line-rgb),0.22); border-radius: 20px; padding: 60px 30px; text-align: center; color: var(--text-light); font-size: 14px; max-width: 600px; margin: 0 auto; } .category-placeholder i { font-size: 26px; color: var(--primary); opacity: 0.6; } .products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; } .category-title { grid-column: 1 / -1; margin: 60px 0 30px; font-size: 26px; font-weight: 600; color: var(--primary); display: flex; align-items: center; gap: 15px; } .category-title::after { content: ''; flex: 1; height: 1px; background: rgba(var(--line-rgb),0.15); } .product-card { background: var(--surface); border: 1px solid rgba(var(--line-rgb),0.1); border-radius: 20px; overflow: hidden; transition: var(--transition); cursor: pointer; box-shadow: 0 4px 20px rgba(var(--line-rgb),0.06); } .product-card:hover { transform: translateY(-5px); border-color: var(--primary); box-shadow: 0 20px 40px rgba(var(--line-rgb),0.15); } a.product-card { display: block; text-decoration: none; color: inherit; } /* ========================================= ORTAK ANIMASYON ALTYAPISI ========================================= */ .product-image { height: 350px; background: rgba(var(--line-rgb),0.03); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .views-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 40px; width: 100%; padding: 0 20px; } .view-wrapper { display: flex; flex-direction: column; align-items: center; gap: 10px; } .view-label { font-size: 11px; color: rgba(var(--line-rgb),0.55); letter-spacing: 2px; text-transform: uppercase; font-weight: 600;} /* Ortak Paneller */ .door-panel-front { position: absolute; height: 100%; background: linear-gradient(90deg, rgba(232,119,34,0.3), rgba(232,119,34,0.1)); border-right: 2px solid var(--primary); transition: var(--transition); } .door-panel-top { position: absolute; height: 8px; background: var(--primary); border-radius: 2px; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2; } /* ========================================= TEKNIK YUZEY DETAYLARI (EN SONA EKLEYIN) ========================================= */ /* SIVALI SISTEMLER - 4x4 KARE TEL MESH */ /* .plastered sinifina sahip kartlarin icindeki kasetleri hedefler */ .product-card.plastered .door-frame-front::before, .product-card.plastered .door-frame-top::before { background-color: rgba(var(--line-rgb), 0.04) !important; background-image: linear-gradient(to right, rgba(var(--line-rgb), 0.22) 1px, transparent 1px), linear-gradient(to bottom, rgba(var(--line-rgb), 0.22) 1px, transparent 1px) !important; background-size: 4px 4px !important; z-index: 1 !important; } /* ALCIPAN SISTEMLER - 7 ADET YATAY KLAPA */ /* .board sinifina sahip kartlarin icindeki kasetleri hedefler */ .product-card.board .door-frame-front::before { background-color: rgba(var(--line-rgb), 0.04) !important; background-image: linear-gradient( transparent 94%, rgba(var(--line-rgb), 0.25) 94% ) !important; background-size: 100% 14.28% !important; background-repeat: repeat-y !important; z-index: 1 !important; } /* KULPLARIN BU DESENLERIN USTUNDE KALMASINI GARANTILE */ .door-panel-front::after { z-index: 20 !important; } /* --- LUCE OZEL SERISI (Sadece .luce sinifi eklenenlerde calisir) --- */ /* Cephe Gorunumundeki Sari Serit */ .door-frame-front.single.luce::after { content: ''; position: absolute; top: 0; width: 20px; /* Serit genisligi */ height: 100%; left: 50%; margin-left: -20px; /* Orta hattin 20px soluna sabitleme */ background: rgba(255, 215, 0, 0.3); /* Seffaf Sari */ box-shadow: 0 0 12px rgba(255, 165, 0, 0.25); /* Isima efekti */ border-left: 1px solid rgba(var(--line-rgb), 0.2); z-index: 0; /* Kapi panelinin arkasinda kalmasini saglar */ } /* Plan Gorunumundeki Sari Serit */ .door-frame-top.single.luce::after { content: ''; position: absolute; height: 100%; width: 20px; left: 50%; margin-left: -20px; background: rgba(255, 215, 0, 0.4); box-shadow: 0 0 8px rgba(255, 165, 0, 0.3); z-index: 0; } /* ========================================= 1. KLASIK SISTEMLER ========================================= */ /* TEKLI CEPHE */ .door-frame-front.single { width: 140px; height: 200px; border: 2px solid rgba(var(--line-rgb),0.25); position: relative; background: rgba(var(--line-rgb),0.03); overflow: hidden; border-radius: 4px 4px 0 0; } .door-frame-front.single::before { content: ''; position: absolute; height: 100%; width: 50%; left: 0; background: rgba(var(--line-rgb),0.04); z-index: 1; border-right: 1px dashed rgba(var(--line-rgb),0.3); } .door-frame-front.single .door-panel-front { width: 50%; left: 0; z-index: 2; transform: translateX(0); } .door-frame-front.single .door-panel-front { width: 50%; left: 0; z-index: 2; transform: translateX(0); position: relative; /* Kulp icin referans noktasi */ } /* Klasik Tekli Kapi Icin Kulp (Sag Kenarda) */ .door-frame-front.single .door-panel-front::after { content: ''; position: absolute; width: 7px; height: 7px; right: 3px; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4); } .product-card:hover .door-frame-front.single .door-panel-front { transform: translateX(100%); } /* TEKLI PLAN */ .door-frame-top.single { width: 170px; height: 25px; border: 2px solid rgba(var(--line-rgb),0.25); position: relative; overflow: hidden; display: flex; align-items: center; border-radius: 4px; } .door-frame-top.single::before { content: ''; position: absolute; height: 100%; width: 50%; left: 0; background: rgba(var(--line-rgb),0.06); z-index: 1; border-right: 1px dashed rgba(var(--line-rgb),0.35); } .door-frame-top.single .door-panel-top { width: 50%; left: 0; transform: translateX(0); } .product-card:hover .door-frame-top.single .door-panel-top { transform: translateX(100%); } /* CIFTLI CEPHE */ .door-frame-front.double { width: 140px; height: 200px; border: 2px solid rgba(var(--line-rgb),0.25); position: relative; background: rgba(var(--line-rgb),0.03); overflow: hidden; border-radius: 4px 4px 0 0; } .door-frame-front.double::before { content: ''; position: absolute; height: 100%; width: 25%; left: 0; background: rgba(var(--line-rgb),0.04); z-index: 1; border-right: 1px dashed rgba(var(--line-rgb),0.3); } .door-frame-front.double::after { content: ''; position: absolute; height: 100%; width: 25%; right: 0; background: rgba(var(--line-rgb),0.04); z-index: 1; border-left: 1px dashed rgba(var(--line-rgb),0.3); } .door-frame-front.double .door-panel-front { width: 25%; z-index: 2; } .door-frame-front.double .door-panel-front:first-child { left: 0; transform: translateX(0); } /* Sol panelin kulpu (Sag kenarda olmali) */ .door-frame-front.double .door-panel-front:first-child::after { content: ''; position: absolute; width: 7px; height: 7px; right: 3px; /* Sag kenara yasla */ top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.25); border-radius: 50%; box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4); } .door-frame-front.double .door-panel-front:last-child { left: auto; right: 0; border-right: none; border-left: 2px solid var(--primary); transform: translateX(0); } /* Sag panelin kulpu (Sol kenarda olmali) */ .door-frame-front.double .door-panel-front:last-child::after { content: ''; position: absolute; width: 7px; height: 7px; left: 3px; /* Sol kenara yasla */ right: auto; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.25); border-radius: 50%; box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4); } .product-card:hover .door-frame-front.double .door-panel-front:first-child { transform: translateX(100%); } .product-card:hover .door-frame-front.double .door-panel-front:last-child { transform: translateX(-100%); } /* CIFTLI PLAN */ .door-frame-top.double { width: 170px; height: 25px; border: 2px solid rgba(var(--line-rgb),0.25); position: relative; overflow: hidden; display: flex; align-items: center; border-radius: 4px; } .door-frame-top.double::before { content: ''; position: absolute; height: 100%; width: 25%; left: 0; background: rgba(var(--line-rgb),0.06); z-index: 1; border-right: 1px dashed rgba(var(--line-rgb),0.35); } .door-frame-top.double::after { content: ''; position: absolute; height: 100%; width: 25%; right: 0; background: rgba(var(--line-rgb),0.06); z-index: 1; border-left: 1px dashed rgba(var(--line-rgb),0.35); } .door-frame-top.double .door-panel-top { width: 25%; } .door-frame-top.double .door-panel-top:first-child { left: 0; transform: translateX(0); } .door-frame-top.double .door-panel-top:last-child { left: auto; right: 0; transform: translateX(0); } .product-card:hover .door-frame-top.double .door-panel-top:first-child { transform: translateX(100%); } .product-card:hover .door-frame-top.double .door-panel-top:last-child { transform: translateX(-100%); } /* ========================================= 2. DUO SISTEM (KESIN COZUM - CEPHE & PLAN) ========================================= */ /* --- DUO CEPHE (Onden Gorunum) --- */ .door-frame-front.duo { width: 140px; height: 200px; border: 2px solid rgba(var(--line-rgb),0.25); position: relative; background: rgba(var(--line-rgb),0.03); overflow: hidden; border-radius: 4px 4px 0 0; } /* Merkezi Kaset */ .door-frame-front.duo::before { content: ''; position: absolute; height: 100%; width: 33.33%; left: 33.33%; background: rgba(var(--line-rgb),0.04); z-index: 1; border-left: 1px dashed rgba(var(--line-rgb),0.3); border-right: 1px dashed rgba(var(--line-rgb),0.3); } .door-frame-front.duo .door-panel-front { width: 33.33%; position: absolute; height: 100%; } /* Sol Kapi (Sola acilir, kulp solda) — on yuz cizgisi disa (sol) bakar */ .door-frame-front.duo .door-panel-front:first-child { left: 0; z-index: 3; border-right: none; border-left: 2px solid var(--primary); background: linear-gradient(to left, rgba(232,119,34,0.3), rgba(232,119,34,0.1)); transform: translateX(100%); } /* Sol Kapi Kulpu - Netlestirilmis */ .door-frame-front.duo .door-panel-front:first-child::after { content: ''; position: absolute; width: 7px; height: 7px; /* Olcu 7px */ left: 3px; /* Mesafe 3px */ top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.45); /* Daha koyu ve net */ border-radius: 50%; z-index: 10; /* Panelin en ustune cikartildi */ box-shadow: inset 1px 1px 2px rgba(0,0,0,0.5); } /* Sag Kapi (Saga acilir, kulp sagda) — on yuz cizgisi disa (sag) bakar, soldakinden daha belirgin */ .door-frame-front.duo .door-panel-front:last-child { right: 0; z-index: 2; border-right: 2px solid var(--primary); border-left: none; background: linear-gradient(to right, rgba(232,119,34,0.3), rgba(232,119,34,0.1)); filter: brightness(0.85); transform: translateX(-100%); } /* Sag Kapi Kulpu - Netlestirilmis */ .door-frame-front.duo .door-panel-front:last-child::after { content: ''; position: absolute; width: 7px; height: 7px; /* Olcu 7px */ right: 3px; /* Mesafe 3px */ top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.45); /* Daha koyu ve net */ border-radius: 50%; z-index: 10; /* Filtreden etkilenmemesi icin katman yukseltildi */ filter: brightness(1.2); /* Panel karartmasini telafi eder */ box-shadow: inset 1px 1px 2px rgba(0,0,0,0.5); } /* Hover: Cephe Panelleri */ .product-card:hover .door-frame-front.duo .door-panel-front { transform: translateX(0); } /* --- DUO PLAN (Ustten Gorunum) --- */ .door-frame-top.duo { width: 170px; height: 45px; border: 2px solid rgba(var(--line-rgb),0.25); position: relative; overflow: hidden; border-radius: 4px; } /* Plandaki Merkezi Kaset */ .door-frame-top.duo::before { content: ''; position: absolute; height: 100%; width: 33.33%; left: 33.33%; background: rgba(var(--line-rgb),0.06); z-index: 1; border-left: 1px dashed rgba(var(--line-rgb),0.35); border-right: 1px dashed rgba(var(--line-rgb),0.35); } .door-frame-top.duo .door-panel-top { width: 33.33%; position: absolute; height: 8px; } /* Sol Ust Panel (Ray 1) */ .door-frame-top.duo .door-panel-top:first-child { left: 0; top: 8px; transform: translateX(100%); } /* Sag Ust Panel (Ray 2) */ .door-frame-top.duo .door-panel-top:last-child { right: 0; bottom: 8px; transform: translateX(-100%); } /* Hover: Plan Panelleri */ .product-card:hover .door-frame-top.duo .door-panel-top { transform: translateX(0); } /* ========================================= 3. TELESKOPIK 2'LI ========================================= */ /* TELESKOPIK CEPHE */ .door-frame-front.telescopic { width: 150px; height: 220px; border: 2px solid rgba(var(--line-rgb),0.25); position: relative; background: rgba(var(--line-rgb),0.03); overflow: hidden; border-radius: 4px 4px 0 0; } /* Duvar Kaseti Cizgisi */ .door-frame-front.telescopic::before { content: ''; position: absolute; height: 100%; width: 33.33%; left: 0; background: rgba(var(--line-rgb),0.04); z-index: 1; border-right: 1px dashed rgba(var(--line-rgb),0.35); } .door-frame-front.telescopic .door-panel-front { width: 33.33%; left: 0; position: absolute; } /* ARKA PANEL (Kulp Olmaz) */ .door-frame-front.telescopic .door-panel-front:first-child { z-index: 2; filter: brightness(0.85); } /* ON PANEL (Kulp Burada Olmali) */ .door-frame-front.telescopic .door-panel-front:last-child { z-index: 3; } /* Teleskopik Kulp: Sadece On Panelin Sag Kenarinda */ .door-frame-front.telescopic .door-panel-front:last-child::after { content: ''; position: absolute; width: 7px; /* Kulp Boyutu */ height: 7px; right: 3px; /* Kenar Mesafesi */ top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.3); border-radius: 50%; box-shadow: inset 1px 1px 2px rgba(0,0,0,0.5); } /* HOVER: Kademeli Acilis */ .product-card:hover .door-frame-front.telescopic .door-panel-front:first-child { transform: translateX(100%); } .product-card:hover .door-frame-front.telescopic .door-panel-front:last-child { transform: translateX(200%); } /* TELESKOPIK PLAN */ .door-frame-top.telescopic { width: 180px; height: 45px; border: 2px solid rgba(var(--line-rgb),0.25); position: relative; overflow: hidden; border-radius: 4px; } .door-frame-top.telescopic::before { content: ''; position: absolute; height: 100%; width: 33.33%; left: 0; background: rgba(var(--line-rgb),0.06); z-index: 1; border-right: 1px dashed rgba(var(--line-rgb),0.35); } .door-frame-top.telescopic .door-panel-top { width: 33.33%; left: 0; } .door-frame-top.telescopic .door-panel-top:first-child { top: 8px; } .door-frame-top.telescopic .door-panel-top:last-child { bottom: 8px; } .product-card:hover .door-frame-top.telescopic .door-panel-top:first-child { transform: translateX(100%); } .product-card:hover .door-frame-top.telescopic .door-panel-top:last-child { transform: translateX(200%); } /* ========================================= 4. CIFT YONLU TELESKOPIK (4 KANATLI) ========================================= */ /* CEPHE GORUNUMU */ .door-frame-front.telescopic-double { width: 220px; height: 220px; border: 2px solid rgba(var(--line-rgb),0.25); position: relative; background: rgba(var(--line-rgb),0.03); overflow: hidden; border-radius: 4px 4px 0 0; } /* Sol ve Sag Kaset Bosluklari */ .door-frame-front.telescopic-double::before { content: ''; position: absolute; height: 100%; width: 16.666%; left: 0; background: rgba(var(--line-rgb),0.04); z-index: 1; border-right: 1px dashed rgba(var(--line-rgb),0.35); } .door-frame-front.telescopic-double::after { content: ''; position: absolute; height: 100%; width: 16.666%; right: 0; background: rgba(var(--line-rgb),0.04); z-index: 1; border-left: 1px dashed rgba(var(--line-rgb),0.35); } .door-frame-front.telescopic-double .door-panel-front { width: 16.666%; position: absolute; } /* 1. KANAT (Sol Arka - Kulpsuz) */ .door-frame-front.telescopic-double .door-panel-front:nth-child(1) { left: 0; z-index: 2; filter: brightness(0.85); border-right: 2px solid var(--primary); } /* 2. KANAT (Sol On - KULPLU) */ .door-frame-front.telescopic-double .door-panel-front:nth-child(2) { left: 0; z-index: 3; border-right: 2px solid var(--primary); } /* Sol on panelin kulpu (Sag kenarda) */ .door-frame-front.telescopic-double .door-panel-front:nth-child(2)::after { content: ''; position: absolute; width: 7px; height: 7px; right: 3px; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.3); border-radius: 50%; } /* 3. KANAT (Sag Arka - Kulpsuz) */ .door-frame-front.telescopic-double .door-panel-front:nth-child(3) { left: auto; right: 0; z-index: 2; filter: brightness(0.85); border-left: 2px solid var(--primary); border-right: none; } /* 4. KANAT (Sag On - KULPLU) — en sagdaki kanat, en belirgin cizgi */ .door-frame-front.telescopic-double .door-panel-front:nth-child(4) { left: auto; right: 0; z-index: 3; border-left: 2px solid var(--primary); border-right: none; } /* Sag on panelin kulpu (Sol kenarda) */ .door-frame-front.telescopic-double .door-panel-front:nth-child(4)::after { content: ''; position: absolute; width: 7px; height: 7px; left: 3px; right: auto; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.3); border-radius: 50%; } /* HOVER HAREKETLERI */ .product-card:hover .door-frame-front.telescopic-double .door-panel-front:nth-child(1) { transform: translateX(100%); } .product-card:hover .door-frame-front.telescopic-double .door-panel-front:nth-child(2) { transform: translateX(200%); } .product-card:hover .door-frame-front.telescopic-double .door-panel-front:nth-child(3) { transform: translateX(-100%); } .product-card:hover .door-frame-front.telescopic-double .door-panel-front:nth-child(4) { transform: translateX(-200%); } /* CIFT YONLU PLAN */ .door-frame-top.telescopic-double { width: 250px; height: 45px; border: 2px solid rgba(var(--line-rgb),0.25); position: relative; overflow: hidden; border-radius: 4px; } .door-frame-top.telescopic-double::before { content: ''; position: absolute; height: 100%; width: 16.666%; left: 0; background: rgba(var(--line-rgb),0.06); z-index: 1; border-right: 1px dashed rgba(var(--line-rgb),0.35); } .door-frame-top.telescopic-double::after { content: ''; position: absolute; height: 100%; width: 16.666%; right: 0; background: rgba(var(--line-rgb),0.06); z-index: 1; border-left: 1px dashed rgba(var(--line-rgb),0.35); } .door-frame-top.telescopic-double .door-panel-top { width: 16.666%; } .door-frame-top.telescopic-double .door-panel-top:nth-child(1) { left: 0; top: 8px; } .door-frame-top.telescopic-double .door-panel-top:nth-child(2) { left: 0; bottom: 8px; } .door-frame-top.telescopic-double .door-panel-top:nth-child(3) { right: 0; left: auto; top: 8px; } .door-frame-top.telescopic-double .door-panel-top:nth-child(4) { right: 0; left: auto; bottom: 8px; } .product-card:hover .door-frame-top.telescopic-double .door-panel-top:nth-child(1) { transform: translateX(100%); } .product-card:hover .door-frame-top.telescopic-double .door-panel-top:nth-child(2) { transform: translateX(200%); } .product-card:hover .door-frame-top.telescopic-double .door-panel-top:nth-child(3) { transform: translateX(-100%); } .product-card:hover .door-frame-top.telescopic-double .door-panel-top:nth-child(4) { transform: translateX(-200%); } /* Product Info */ .product-info { padding: 35px; color: var(--text); } .product-tag { background: rgba(232,119,34,0.15); color: var(--primary); padding: 6px 12px; border-radius: 4px; font-size: 11px; font-weight: 700; margin-bottom: 15px; display: inline-block; letter-spacing: 1px; text-transform: uppercase; } .product-info h3 { font-size: 22px; margin-bottom: 12px; font-weight: 600; } .product-info p { font-size: 14px; color: var(--text-light); line-height: 1.7; } /* Footer */ footer { background: #262626; padding: 60px; text-align: center; color: rgba(255,255,255,0.4); font-size: 13px; } .reveal { opacity: 0; transform: translateY(30px); transition: 0.8s ease; } .reveal.active { opacity: 1; transform: translateY(0); } /* ================= TASLAK: YENI BOLUMLER ================= */ .section-label { display: inline-block; color: var(--primary); font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 14px; } .section-title { font-family: 'Playfair Display', serif; font-size: 40px; font-weight: 500; color: var(--heading); line-height: 1.25; margin-bottom: 18px; } .section-title span { color: var(--primary); font-style: italic; } .section-intro { max-width: 720px; color: var(--text-light); font-size: 15px; line-height: 1.8; } .section-head { max-width: 780px; margin: 0 auto 60px; text-align: center; } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 32px; border-radius: 4px; font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; transition: var(--transition); cursor: pointer; border: 2px solid transparent; } .btn-primary { background: var(--primary); color: var(--white); } .btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); } .btn-outline { border-color: rgba(255,255,255,0.4); color: var(--white); } .btn-outline:hover { border-color: var(--white); background: rgba(255,255,255,0.08); } .btn-outline-dark { border-color: rgba(var(--line-rgb),0.3); color: var(--heading); } .btn-outline-dark:hover { border-color: var(--heading); background: rgba(var(--line-rgb),0.06); } .hero-subtitle { color: rgba(255,255,255,0.75); font-size: 17px; line-height: 1.8; max-width: 620px; margin: 0 auto 36px; } .hero-actions { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; } .nav-cta { background: var(--primary); color: var(--white) !important; padding: 10px 20px; border-radius: 4px; } .nav-cta:hover { background: var(--primary-dark); color: var(--white) !important; } /* Neden WINARI */ .neden-section { background: var(--surface); padding: 110px 60px; } .compare-grid { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 0.85fr 1fr 1fr; gap: 30px; } .compare-card { border-radius: 16px; padding: 40px; } .compare-card.old { background: rgba(var(--line-rgb),0.04); border: 1px solid rgba(var(--line-rgb),0.08); } .compare-card.new { background: linear-gradient(160deg, var(--secondary), #262626); color: var(--white); box-shadow: 0 20px 50px rgba(var(--line-rgb),0.25); } .compare-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 12px; border-radius: 4px; margin-bottom: 20px; } .compare-card.old .compare-tag { background: rgba(176,57,42,0.1); color: var(--danger); } .compare-card.new .compare-tag { background: rgba(232,119,34,0.2); color: var(--primary); } .compare-card h3 { font-size: 22px; margin-bottom: 14px; } .compare-card.old h3 { color: var(--heading); } .compare-card p { font-size: 14.5px; line-height: 1.8; } .compare-card.old p { color: var(--text-light); } .compare-card.new p { color: rgba(255,255,255,0.75); } .compare-stat { font-family: 'Playfair Display', serif; font-size: 46px; font-weight: 600; margin: 18px 0 6px; } .compare-card.old .compare-stat { color: var(--danger); } .compare-card.new .compare-stat { color: var(--primary); } .stat-banner { max-width: 1100px; margin: 50px auto 0; text-align: center; padding: 30px; border-radius: 16px; background: rgba(232,119,34,0.06); border: 1px dashed rgba(232,119,34,0.3); color: var(--heading); font-size: 15.5px; line-height: 1.8; } .stat-banner strong { color: var(--primary); } /* Kat plani karsilastirmasi */ .plan-compare { max-width: 1180px; margin: 60px auto 0; } .plan-compare-head { text-align: center; max-width: 760px; margin: 0 auto 34px; } .plan-compare-head h3 { font-family: 'Playfair Display', serif; font-size: 30px; font-weight: 500; color: var(--heading); margin-bottom: 14px; } .plan-compare-head p { color: var(--text-light); font-size: 15px; line-height: 1.8; } .plan-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } .plan-card { background: var(--surface); border: 1px solid rgba(var(--line-rgb),0.08); border-radius: 22px; padding: 26px 26px 24px; box-shadow: 0 18px 50px rgba(var(--line-rgb),0.08); position: relative; } .plan-card.old { border-top: 3px solid var(--danger); } .plan-card.new { border-top: 3px solid var(--primary); } .plan-tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; padding: 7px 13px; border-radius: 20px; margin-bottom: 18px; } .plan-card.old .plan-tag { background: rgba(176,57,42,0.1); color: var(--danger); } .plan-card.new .plan-tag { background: rgba(232,119,34,0.12); color: var(--primary); } /* Katalogdaki gibi: plan, yuvarlatilmis cerceveli ve zeminden ayrisan bir kutu icinde */ .plan-card img { display: block; margin: 0 auto; width: auto; max-width: 100%; max-height: 32vh; height: auto; background: #6B6A62; border-radius: 14px; padding: 12px; } /* Cerceve renkleri katalogdaki gibi: standart kapi turuncu, duvar ici surgulu lacivert */ .plan-card.old img { border: 6px solid var(--primary); } .plan-card.new img { border: 6px solid #2F3D4A; } html[data-theme="dark"] .plan-card.new img { border-color: #7E93A6; } html[data-theme="dark"] .plan-card img { background: #5C5B54; } /* Banyo girisi detayi — planin hemen altinda */ .plan-card img.plan-detail { margin-top: 16px; max-height: 24vh; padding: 10px; } .plan-card.old img.plan-detail { border-color: var(--primary); } .plan-card.new img.plan-detail { border-color: #2F3D4A; } html[data-theme="dark"] .plan-card.new img.plan-detail { border-color: #7E93A6; } .plan-card figcaption { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(var(--line-rgb),0.08); font-size: 13.5px; line-height: 1.8; color: var(--text-light); } .plan-card figcaption strong { display: block; color: var(--heading); font-size: 14.5px; margin-bottom: 6px; font-weight: 600; } @media (max-width: 860px) { .plan-compare-grid { grid-template-columns: 1fr; } .plan-card { padding: 18px 16px 16px; } } .neden-reference-grid { max-width: 1100px; margin: 50px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .neden-reference-grid img { width: 100%; border-radius: 20px; display: block; box-shadow: 0 20px 50px rgba(var(--line-rgb),0.12); } @media (max-width: 800px) { .neden-reference-grid { grid-template-columns: 1fr; } } /* Teknoloji */ .tech-section { background: var(--surface); padding: 110px 60px; } .tech-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; } .tech-card { background: var(--accent); border-radius: 16px; padding: 34px 26px; text-align: center; transition: var(--transition); } .tech-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(var(--line-rgb),0.1); } .tech-card i { font-size: 26px; color: var(--primary); margin-bottom: 18px; } .tech-card .tech-stat { font-family: 'Playfair Display', serif; font-size: 30px; color: var(--heading); font-weight: 600; margin-bottom: 6px; } .tech-card h4 { font-size: 13.5px; font-weight: 700; letter-spacing: 0.5px; color: var(--heading); margin-bottom: 10px; text-transform: uppercase; } .tech-card p { font-size: 13px; color: var(--text-light); line-height: 1.7; } .tech-footnote { text-align: center; max-width: 700px; margin: 50px auto 0; color: var(--text-light); font-size: 13.5px; } /* Hakkimizda */ .about-section { background: var(--accent); padding: 110px 60px; } .about-top { max-width: 780px; margin: 0 auto 60px; text-align: center; } .about-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .about-card { background: var(--surface); border-radius: 16px; padding: 36px 32px; border: 1px solid rgba(var(--line-rgb),0.08); } .about-card i { font-size: 22px; color: var(--primary); margin-bottom: 16px; } .about-card h4 { font-size: 17px; color: var(--heading); margin-bottom: 12px; font-weight: 600; } .about-card p { font-size: 13.5px; color: var(--text-light); line-height: 1.8; } .about-policy { max-width: 900px; margin: 50px auto 0; background: var(--surface); border-radius: 16px; padding: 36px 40px; border: 1px solid rgba(var(--line-rgb),0.08); } .about-policy h4 { color: var(--heading); font-size: 17px; margin-bottom: 16px; } .about-policy ul { list-style: none; display: grid; gap: 12px; } .about-policy li { font-size: 13.5px; color: var(--text-light); line-height: 1.6; padding-left: 22px; position: relative; } .about-policy li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: var(--primary); position: absolute; left: 0; font-size: 11px; top: 2px; } /* Referanslar */ .ref-section { background: var(--surface); padding: 110px 60px; } .ref-map { max-width: 900px; margin: 0 auto 45px; text-align: center; } .ref-map img { width: 100%; height: auto; display: block; opacity: 0.9; } .ref-map-caption { display: block; margin-top: 10px; font-size: 12.5px; letter-spacing: 0.4px; color: var(--text-light); } html[data-theme="dark"] .ref-map img { opacity: 0.85; } .ref-groups { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .ref-group { background: var(--accent); border-radius: 16px; padding: 30px 34px; } .ref-group h4 { color: var(--heading); font-size: 15px; margin-bottom: 16px; letter-spacing: 0.5px; display: flex; align-items: center; gap: 10px; } .ref-group h4::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); } .ref-group ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; } .ref-group li { font-size: 12.5px; color: var(--text-light); background: var(--surface); border: 1px solid rgba(var(--line-rgb),0.08); padding: 6px 12px; border-radius: 20px; } /* Uygulama fotograflari galerisi */ .ref-gallery { max-width: 1200px; margin: 46px auto 0; } .ref-gallery h4 { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; color: var(--primary); margin-bottom: 22px; } .ref-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .ref-gallery figure { margin: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 14px 36px rgba(var(--line-rgb),0.1); background: rgba(var(--line-rgb),0.04); } .ref-gallery img { width: 100%; height: 240px; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.25,1,0.5,1); } .ref-gallery figure:hover img { transform: scale(1.05); } @media (max-width: 900px) { .ref-gallery-grid { grid-template-columns: repeat(2, 1fr); } .ref-gallery img { height: 190px; } } @media (max-width: 560px) { .ref-gallery-grid { grid-template-columns: 1fr; } } .ref-note { text-align: center; max-width: 600px; margin: 40px auto 0; color: var(--text-light); font-size: 13px; font-style: italic; } /* Footer genisletme */ footer { text-align: left; } .footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 50px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.08); } .footer-brand p { margin-top: 16px; font-size: 13px; line-height: 1.8; color: rgba(255,255,255,0.4); max-width: 320px; } .footer-col h5 { color: rgba(255,255,255,0.8); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 18px; } .footer-col ul { list-style: none; display: grid; gap: 10px; } .footer-col a { color: rgba(255,255,255,0.45); text-decoration: none; font-size: 13.5px; transition: var(--transition); } .footer-col a:hover { color: var(--primary); } .footer-bottom { max-width: 1200px; margin: 0 auto; padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 12px; } @media (max-width: 900px) { .compare-grid, .about-grid, .ref-groups { grid-template-columns: 1fr; } .tech-grid { grid-template-columns: repeat(2,1fr); } .footer-inner { grid-template-columns: 1fr; } .section-title { font-size: 30px; } .products-layout { grid-template-columns: 1fr; } .products-sidebar { position: static; flex-direction: row; overflow-x: auto; } .products-sidebar a { white-space: nowrap; } } /* ================= TASLAK: BOYDAN BOYA MIMARI FOTOGRAF SERIDI ================= */ .arch-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--secondary); } .photo-strip { position: absolute; top: 0; left: 0; height: 100%; display: flex; will-change: transform; filter: blur(3px) saturate(1) brightness(1); } .photo-strip .scene { position: relative; height: 100%; width: 46vw; min-width: 420px; flex-shrink: 0; } .photo-strip .scene img { width: 100%; height: 100%; object-fit: cover; display: block; } .arch-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(38,38,38,0.28), rgba(var(--line-rgb),0.16) 50%, rgba(38,38,38,0.28)); } @media (max-width: 900px) { .arch-bg { display: none; } } /* Icerik bolumleri, sabit cizimin z-index:0 uzerinde, hafif yari saydam zeminle ustunde kalir */ .hero, .neden-section, .products-section, .tech-section, .about-section, .ref-section, footer { position: relative; z-index: 1; } .neden-section, .tech-section, .ref-section { background: rgba(var(--surface-rgb),0.46); } .products-section, .about-section { background: rgba(var(--surface-alt-rgb),0.42); } .compare-visual, .tech-visual { border-radius: 16px; overflow: hidden; box-shadow: 0 20px 40px rgba(44,62,80,0.12); min-height: 340px; } .compare-visual img, .tech-visual img { width: 100%; height: 100%; object-fit: cover; display: block; } .tech-visual { max-width: 900px; height: 320px; margin: 0 auto 60px; } /* ================= TASLAK: ACILIS ANIMASYONU (SPLASH — TAM EKRAN CIFT KANAT) ================= */ .splash { position: fixed; inset: 0; z-index: 9999; cursor: pointer; overflow: hidden; } .splash-wing { position: absolute; top: 0; width: 50%; height: 100%; background: linear-gradient(135deg, var(--secondary) 0%, #262626 100%); transition: transform 1.5s cubic-bezier(0.86,0,0.07,1); will-change: transform; } .splash-wing::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 34px 34px; } .splash-wing-left { left: 0; border-right: 2px solid var(--primary); } .splash-wing-right { right: 0; border-left: 2px solid var(--primary); transition-delay: 0.07s; } .splash.open .splash-wing-left { transform: translateX(-100%); } .splash.open .splash-wing-right { transform: translateX(100%); } .splash.open { pointer-events: none; } .splash-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) translateY(14px) scale(0.96); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 28px; opacity: 0; will-change: transform, opacity; transition: opacity 1.1s cubic-bezier(0.16,1,0.3,1), transform 1.1s cubic-bezier(0.16,1,0.3,1); } .splash-logo.in { opacity: 1; transform: translate(-50%, -50%); } .splash-logo.leaving { opacity: 0; transform: translate(-50%, -50%) scale(1.03); transition: opacity 0.55s cubic-bezier(0.4,0,0.2,1), transform 0.55s cubic-bezier(0.4,0,0.2,1); } .splash-logo img { width: min(520px, 74vw); height: auto; display: block; } .splash-word { font-size: 62px; font-weight: 300; letter-spacing: 15px; color: var(--white); } .splash-word i { color: var(--primary); font-style: normal; } .splash-caption { opacity: 0; color: rgba(255,255,255,0.55); font-size: 13px; letter-spacing: 4px; text-transform: uppercase; transition: opacity 0.8s ease; } .splash-logo.in .splash-caption { opacity: 1; transition-delay: 0.95s; } @media (max-width: 600px) { .splash-logo { gap: 18px; } } /* Arkadaki hero metni, kapi animasyonu biterken iceri gelsin (sadece splash olan ana sayfada kullanilir) */ .hero-content .section-label, .hero-content .hero-subtitle, .hero-content .hero-actions { opacity: 0; transform: translateY(18px); transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1); } .hero-content.revealed .section-label { opacity: 1; transform: none; } .hero-content.revealed .hero-subtitle { opacity: 1; transform: none; transition-delay: 0.9s; } .hero-content.revealed .hero-actions { opacity: 1; transform: none; transition-delay: 1.1s; } .hero h1 .ch { display: inline-block; opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; } .hero-content.revealed h1 .ch { opacity: 1; transform: none; } /* ================= URUN DETAY SAYFALARI (paylasilan) ================= */ .page-hero { height: 60vh; min-height: 440px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(135deg, var(--secondary) 0%, #262626 100%); text-align: center; } .page-hero-content { position: relative; z-index: 2; max-width: 780px; padding: 0 40px; margin-top: 40px; } .page-hero h1 { font-family: 'Playfair Display', serif; font-size: 52px; font-weight: 500; color: var(--white); margin-bottom: 16px; } .page-hero p { color: rgba(255,255,255,0.75); font-size: 16px; line-height: 1.8; max-width: 600px; margin: 0 auto; } .breadcrumb { position: relative; z-index: 2; margin-bottom: 22px; font-size: 12px; letter-spacing: 1px; } .breadcrumb a { color: rgba(255,255,255,0.5); text-decoration: none; } .breadcrumb a:hover { color: var(--primary); } .breadcrumb span { color: rgba(255,255,255,0.3); margin: 0 8px; } .breadcrumb strong { color: var(--primary); font-weight: 500; } .variant-section { background: var(--surface); padding: 90px 60px; } .variant-section:nth-of-type(even) { background: var(--accent); } .variant-head { max-width: 1300px; margin: 0 auto 50px; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; } .variant-head h2 { font-family: 'Playfair Display', serif; font-size: 32px; color: var(--heading); font-weight: 500; } .variant-head .product-tag { margin-bottom: 0; } .variant-body { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: center; } .variant-visual { background: var(--surface); border: 1px solid rgba(var(--line-rgb),0.08); border-radius: 20px; padding: 40px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 40px rgba(var(--line-rgb),0.06); } .variant-text p { color: var(--text-light); font-size: 14.5px; line-height: 1.9; margin-bottom: 18px; } .variant-text p:last-child { margin-bottom: 0; } .tech-diagram { max-width: 860px; margin: 36px auto 0; padding: 30px 36px 26px; text-align: center; background: var(--surface); border: 1px solid rgba(var(--line-rgb),0.08); border-radius: 20px; box-shadow: 0 16px 44px rgba(var(--line-rgb),0.09); } .tech-diagram img { max-width: 100%; max-height: 56vh; width: auto; height: auto; margin: 0 auto; display: block; } .tech-diagram figcaption { margin-top: 20px; font-size: 12.5px; color: var(--text-light); letter-spacing: 0.3px; } .spec-table-wrap { max-width: 820px; margin: 36px auto 0; overflow-x: auto; } /* Katalogdaki olcu tablosu duzeni */ .spec-table { width: 100%; border-collapse: collapse; font-size: 11.5px; min-width: 540px; background: transparent; } .spec-table caption { caption-side: top; text-align: left; font-size: 12px; font-weight: 700; letter-spacing: 0.2px; color: var(--heading); padding-bottom: 10px; } .spec-table caption span { font-weight: 400; color: var(--text-light); } .spec-table th, .spec-table td { padding: 7px 8px; text-align: center; border: none; } .spec-table thead tr.group-row th { font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--heading); text-align: left; padding: 8px 8px 6px; border-top: 1.5px solid rgba(var(--line-rgb),0.55); border-bottom: 1px solid rgba(var(--line-rgb),0.2); } .spec-table thead tr.col-row th { font-size: 10px; font-weight: 700; letter-spacing: 0.3px; color: var(--heading); border-bottom: 1.5px solid rgba(var(--line-rgb),0.45); padding-bottom: 9px; line-height: 1.35; } .spec-table tbody td { color: var(--text); border-bottom: 1px solid rgba(var(--line-rgb),0.14); font-weight: 400; font-variant-numeric: tabular-nums; } .spec-table tbody tr:last-child td { border-bottom: 1.5px solid rgba(var(--line-rgb),0.45); } .spec-table tbody tr:hover td { background: rgba(232,119,34,0.06); } .faq-grid { max-width: 1300px; margin: 40px auto 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .faq-card { background: var(--surface); border: 1px solid rgba(var(--line-rgb),0.08); border-radius: 14px; padding: 24px 28px; } .faq-card .wrong { color: var(--danger); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; } .faq-card .wrong-text { font-size: 13.5px; color: var(--text-light); margin-bottom: 14px; font-style: italic; } .faq-card .right { color: var(--primary); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; } .faq-card .right-text { font-size: 13.5px; color: var(--text-light); line-height: 1.7; } .cta-band { background: linear-gradient(135deg, var(--secondary) 0%, #262626 100%); padding: 80px 60px; text-align: center; } .cta-band h2 { font-family: 'Playfair Display', serif; font-size: 34px; color: var(--white); margin-bottom: 16px; } .cta-band p { color: rgba(255,255,255,0.7); max-width: 560px; margin: 0 auto 30px; font-size: 15px; line-height: 1.8; } /* ================= KATALOG & TEKNIK VERILER SAYFASI ================= */ .catalog-section { background: linear-gradient(135deg, rgba(var(--surface-rgb),1) 0%, rgba(var(--surface-alt-rgb),1) 100%); padding: 90px 60px; } html[data-theme="dark"] .catalog-section { background: linear-gradient(135deg, var(--secondary) 0%, #262626 100%); } html[data-theme="dark"] .catalog-section:nth-of-type(even) { background: #242424; } .catalog-hero-card { max-width: 1000px; margin: 0 auto; background: linear-gradient(135deg, var(--secondary) 0%, #262626 100%); border-radius: 24px; padding: 50px 60px; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; color: var(--white); } .catalog-hero-icon { font-size: 42px; color: var(--primary); flex-shrink: 0; } .catalog-hero-text h3 { font-family: 'Playfair Display', serif; font-size: 26px; margin-bottom: 10px; font-weight: 500; } .catalog-hero-text p { color: rgba(255,255,255,0.65); font-size: 14px; max-width: 420px; line-height: 1.7; } .catalog-hero-card .catalog-download-btn { margin-top: 18px; } .catalog-group { max-width: 1300px; margin: 0 auto; } .catalog-group-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 26px; } .catalog-group-head h3 { font-family: 'Playfair Display', serif; font-size: 24px; color: var(--heading); font-weight: 500; } .catalog-group-head span { font-size: 12px; color: var(--text-light); } .catalog-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; } .catalog-card { background: var(--surface); border: 1px solid rgba(var(--line-rgb),0.08); border-radius: 18px; padding: 24px; display: flex; align-items: flex-start; gap: 16px; transition: var(--transition); } .catalog-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(var(--line-rgb),0.1); } .catalog-card-visual { width: 58px; height: 58px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(var(--line-rgb),0.04); border-radius: 12px; overflow: hidden; } .catalog-card-visual .product-card { flex-shrink: 0; } .catalog-card-visual [class*="door-frame-front"] { transform: scale(0.22); } .catalog-card-visual .product-card.board .door-panel-front { background: linear-gradient(90deg, rgba(168,149,130,0.5), rgba(168,149,130,0.2)); border-color: #A89582; } html[data-theme="dark"] .catalog-card-visual .product-card.board .door-frame-front::before { background-image: linear-gradient( transparent 94%, rgba(var(--line-rgb), 0.1) 94% ) !important; } html[data-theme="dark"] .catalog-download-btn.ready { background: rgba(var(--line-rgb), 0.12); } html[data-theme="dark"] .catalog-download-btn.ready:hover { background: var(--primary); } /* Kartin herhangi bir yerine gelince animasyon direkt calissin (kucultulmus ikon sart degil) */ .catalog-card:hover .door-frame-front.single .door-panel-front { transform: translateX(100%); } .catalog-card:hover .door-frame-front.double .door-panel-front:first-child { transform: translateX(100%); } .catalog-card:hover .door-frame-front.double .door-panel-front:last-child { transform: translateX(-100%); } .catalog-card:hover .door-frame-front.duo .door-panel-front { transform: translateX(0); } .catalog-card:hover .door-frame-front.telescopic .door-panel-front:first-child { transform: translateX(100%); } .catalog-card:hover .door-frame-front.telescopic .door-panel-front:last-child { transform: translateX(200%); } .catalog-card:hover .door-frame-front.telescopic-double .door-panel-front:nth-child(1) { transform: translateX(100%); } .catalog-card:hover .door-frame-front.telescopic-double .door-panel-front:nth-child(2) { transform: translateX(200%); } .catalog-card:hover .door-frame-front.telescopic-double .door-panel-front:nth-child(3) { transform: translateX(-100%); } .catalog-card:hover .door-frame-front.telescopic-double .door-panel-front:nth-child(4) { transform: translateX(-200%); } .catalog-card-body { flex: 1; min-width: 0; } .catalog-card-body h4 { font-size: 14px; color: var(--heading); font-weight: 600; margin-bottom: 4px; } .catalog-card-body .wall-tag { font-size: 10px; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.5px; } .catalog-download-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; padding: 8px 14px; border-radius: 20px; text-decoration: none; margin-top: 12px; transition: var(--transition); } .catalog-download-btn.ready { background: rgba(232,119,34,0.14); color: var(--primary); } .catalog-download-btn.ready:hover { background: var(--primary); color: var(--white); } .catalog-download-btn.pending { background: rgba(var(--line-rgb),0.06); color: var(--text-light); cursor: default; pointer-events: none; } .catalog-doc-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .catalog-doc-item { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: 10px; text-decoration: none; transition: var(--transition); } .catalog-doc-item i:first-child { width: 14px; text-align: center; font-size: 11px; flex-shrink: 0; } .catalog-doc-item span { flex: 1; } .catalog-doc-item .status-icon { font-size: 10px; flex-shrink: 0; } .catalog-doc-item.pending { background: rgba(var(--line-rgb),0.05); color: var(--text-light); cursor: default; pointer-events: none; } .catalog-doc-item.ready { background: rgba(232,119,34,0.1); color: var(--primary); cursor: pointer; } .catalog-doc-item.ready:hover { background: var(--primary); color: var(--white); } .catalog-placeholder-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; max-width: 900px; margin: 0 auto; } .catalog-placeholder-card { background: var(--surface); border: 1.5px dashed rgba(var(--line-rgb),0.22); border-radius: 18px; padding: 34px 24px; text-align: center; color: var(--text-light); } .catalog-placeholder-card i { font-size: 22px; color: var(--primary); opacity: 0.6; margin-bottom: 12px; display: block; } .catalog-placeholder-card h4 { font-size: 14.5px; color: var(--heading); margin-bottom: 8px; font-weight: 600; } .catalog-placeholder-card p { font-size: 12.5px; line-height: 1.6; } .product-subnav { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 26px 20px; background: var(--surface); border-bottom: 1px solid rgba(var(--line-rgb),0.08); position: relative; z-index: 1; } .product-subnav a { text-decoration: none; font-size: 12.5px; font-weight: 600; letter-spacing: 0.5px; color: var(--text-light); padding: 8px 18px; border-radius: 20px; border: 1px solid rgba(var(--line-rgb),0.12); transition: var(--transition); } .product-subnav a:hover { color: var(--primary); border-color: var(--primary); } .product-subnav a.active { background: var(--primary); border-color: var(--primary); color: var(--white); } .no-table-note { max-width: 1300px; margin: 40px auto 0; padding: 22px 28px; border-radius: 14px; background: rgba(232,119,34,0.06); border: 1px dashed rgba(232,119,34,0.3); color: var(--heading); font-size: 13.5px; line-height: 1.8; } /* ================= URUNLER MEGA MENU — sol: basliklar, sag: sadece ikon flyout ================= */ .nav-item-mega { position: relative; } .mega-menu { position: absolute; top: 100%; left: 0; padding-top: 18px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0.25s; z-index: 1001; } .nav-item-mega:hover .mega-menu, .mega-menu:hover { opacity: 1; visibility: visible; pointer-events: auto; } .mega-menu-inner { width: 290px; background: var(--surface); border-radius: 18px; box-shadow: 0 30px 70px rgba(0,0,0,0.28); padding: 12px; transform: translateY(-8px); transition: transform 0.25s ease; } .nav-item-mega:hover .mega-menu-inner, .mega-menu:hover .mega-menu-inner { transform: translateY(0); } .mega-menu-inner .mega-l1-trigger, .mega-menu-inner .mega-l1-link { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 600; text-transform: none; white-space: nowrap; cursor: pointer; text-decoration: none; color: var(--heading); transition: background 0.2s ease, color 0.2s ease; } .mega-l1-trigger i:first-child, .mega-l1-link i:first-child { color: var(--primary); width: 16px; text-align: center; flex-shrink: 0; } .mega-l1-trigger:hover, .mega-l1-link:hover { background: rgba(232,119,34,0.08); color: var(--primary); } .mega-l1-chevron { margin-left: auto; font-size: 10px; color: var(--text-light); } .mega-menu-inner .mega-l1-link .coming-soon-badge { margin-left: auto; font-size: 8.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-light); background: rgba(var(--line-rgb),0.08); padding: 3px 6px; border-radius: 6px; white-space: nowrap; } /* Surgulu Kapilar'in saginda acilan ikon-only flyout */ .mega-l1 { position: relative; } .mega-flyout { display: none; position: absolute; left: 100%; top: 0; padding-left: 12px; } .mega-l1:hover .mega-flyout, .mega-flyout:hover { display: block; } .mega-flyout-inner { width: 620px; max-width: 85vw; max-height: calc(100vh - 100px); overflow-y: auto; background: var(--surface); border-radius: 18px; box-shadow: 0 30px 70px rgba(0,0,0,0.28); padding: 22px; } .mega-flyout-inner::-webkit-scrollbar { width: 6px; } .mega-flyout-inner::-webkit-scrollbar-track { background: transparent; } .mega-flyout-inner::-webkit-scrollbar-thumb { background: rgba(var(--line-rgb),0.2); border-radius: 3px; } .mega-flyout-inner::-webkit-scrollbar-thumb:hover { background: var(--primary); } .mega-group { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(var(--line-rgb),0.08); } .mega-group:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .mega-group h4 { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: var(--primary); margin-bottom: 10px; padding-left: 2px; } .mega-group-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .mega-group-grid a.product-card { width: 300px; border-radius: 10px; overflow: hidden; zoom: 0.56; } .mega-group-grid .product-tag, .mega-group-grid .product-info p, .mega-group-grid .view-label { display: none; } .mega-group-grid .view-wrapper:nth-child(2) { display: none; } .mega-group-grid .views-container { padding: 0; } .mega-group-grid .product-image { height: auto; padding: 16px 0 6px; } .mega-group-grid .product-info { padding: 10px 6px 12px; text-align: center; } .mega-group-grid .product-info h3 { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 500; letter-spacing: 0; line-height: 1.3; } @media (max-width: 900px) { .mega-menu { display: none; } } @media (max-width: 900px) { .variant-body { grid-template-columns: 1fr; } .faq-grid { grid-template-columns: 1fr; } .page-hero h1 { font-size: 36px; } } /* Arka kanatlardaki brightness filtresi kaldirildi: tum kanatlar ayni tonda (turuncu ve kahve tonlari her sistemde birebir ayni). */ .door-panel-front, .door-panel-top { filter: none !important; } /* Tum sistemlerde kaset siniri, kapinin kenar cizgisi kalinligi (2px) kadar kisaltildi; boylece kesikli sinir cizgisi kapinin turuncu/kahve kenar cizgisiyle tam ayni hizada bitiyor (Duo'daki duzenin aynisi). */ .door-frame-front.duo::before, .door-frame-top.duo::before { width: calc(33.33% - 2px); } .door-frame-front.single::before, .door-frame-top.single::before { width: calc(50% - 2px); } .door-frame-front.double::before, .door-frame-top.double::before { width: calc(25% - 2px); } .door-frame-front.double::after, .door-frame-top.double::after { width: calc(25% - 2px); } .door-frame-front.telescopic::before, .door-frame-top.telescopic::before { width: calc(33.33% - 2px); } .door-frame-front.telescopic-double::before, .door-frame-top.telescopic-double::before { width: calc(16.666% - 2px); } .door-frame-front.telescopic-double::after, .door-frame-top.telescopic-double::after { width: calc(16.666% - 2px); } /* ===== KONFIGURATOR — BASLANGIC ===== */ .kf-section { padding: 70px 40px 100px; background: linear-gradient(135deg, rgba(var(--surface-rgb),1) 0%, rgba(var(--surface-alt-rgb),1) 100%); } html[data-theme="dark"] .kf-section { background: linear-gradient(135deg, var(--secondary) 0%, #262626 100%); } .kf-wrap { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: minmax(0,1fr); gap: 24px; align-items: start; } .kf-akis { display: flex; flex-direction: column; gap: 14px; min-width: 0; } /* ---------- Akordiyon panel ---------- */ .kf-panel { background: var(--surface); border: 1px solid rgba(var(--line-rgb),0.09); border-radius: 18px; overflow: hidden; box-shadow: 0 10px 34px rgba(var(--line-rgb),0.06); transition: border-color 0.35s ease, box-shadow 0.35s ease; } .kf-panel.open { border-color: rgba(232,119,34,0.35); box-shadow: 0 16px 46px rgba(232,119,34,0.12); } .kf-panel-head { display: flex; align-items: center; gap: 16px; padding: 20px 24px; cursor: pointer; user-select: none; } .kf-panel-no { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; border: 1.5px solid rgba(var(--line-rgb),0.22); color: var(--text-light); transition: var(--transition); } .kf-panel.open .kf-panel-no { background: var(--primary); border-color: var(--primary); color: #fff; } .kf-panel.tamam:not(.open) .kf-panel-no { background: rgba(232,119,34,0.12); border-color: rgba(232,119,34,0.4); color: var(--primary); } .kf-panel-baslik { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .kf-panel-baslik strong { font-size: 14px; font-weight: 700; color: var(--heading); letter-spacing: 0.2px; } .kf-panel-alt { font-size: 11.5px; color: var(--text-light); } .kf-panel-ozet { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--primary); text-align: right; max-width: 46%; opacity: 0; transition: opacity 0.3s ease; } .kf-panel-ozet.dolu { opacity: 1; } .kf-panel.open .kf-panel-ozet { opacity: 0; } .kf-panel-ok { margin-left: 12px; font-size: 12px; color: var(--text-light); transition: transform 0.35s ease; flex-shrink: 0; } .kf-panel.open .kf-panel-ok { transform: rotate(180deg); color: var(--primary); } .kf-panel-govde { display: none; padding: 4px 24px 26px; border-top: 1px solid rgba(var(--line-rgb),0.07); } .kf-panel.open .kf-panel-govde { display: block; animation: kfAc 0.4s cubic-bezier(0.25,1,0.5,1); } @keyframes kfAc { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* ---------- Secenek kartlari ---------- */ .kf-opt-grid { display: grid; gap: 12px; padding-top: 22px; } .kf-opt-grid-sistem { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .kf-opt-grid-duvar { grid-template-columns: 1fr 1fr; } .kf-opt-grid-bilinen { grid-template-columns: 1fr 1fr; } .kf-opt { display: flex; align-items: flex-start; gap: 14px; text-align: left; padding: 16px; border-radius: 14px; border: 1.5px solid rgba(var(--line-rgb),0.1); background: rgba(var(--line-rgb),0.015); cursor: pointer; font-family: inherit; transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease; } .kf-opt:hover { border-color: rgba(232,119,34,0.45); transform: translateY(-2px); } .kf-opt.secili { border-color: var(--primary); background: rgba(232,119,34,0.07); } .kf-opt-metin { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .kf-opt-metin strong { font-size: 13px; font-weight: 700; color: var(--heading); } .kf-opt-etiket { font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--primary); } .kf-opt-alt { font-size: 11px; line-height: 1.55; color: var(--text-light); } .kf-opt-sistem { flex-direction: column; align-items: stretch; gap: 12px; } .kf-opt-gorsel.product-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 132px; padding: 10px 0; border-radius: 10px; overflow: hidden; cursor: pointer; background: rgba(var(--line-rgb),0.04) !important; border: none !important; box-shadow: none !important; } .kf-opt-cephe, .kf-opt-plan { display: flex; align-items: center; justify-content: center; width: 100%; overflow: hidden; } .kf-opt-cephe { height: 84px; } .kf-opt-plan { height: 20px; } /* Ikonlar