:root{ --ana:#ff8c42; /* sıcak turuncu — pati/enerji */ --ana-koyu:#e6712a; --ikincil:#2a9d8f; /* teal */ --lacivert:#264653; --oto:#7b2ff7; /* autoship moru */ --arka:#fdf7f2; --kart:#ffffff; --metin:#2b2b2b; --gri:#7a7a7a; --acik-gri:#ece4dc; --yesil:#2a9d5a; --kirmizi:#d64545; --altin:#c9a227; --koyu:#20272e; --golge:0 4px 14px rgba(0,0,0,.07); --radius:14px; /* Gece modunda ezilen yardımcı tonlar (gündüz değerleri burada) */ --girdi:#ffffff; /* form alanı zemini */ --satir-uyari:#fdeeee; --satir-dikkat:#fff8e8; --yesil-zemin:#e4f6ec; --yesil-yazi:#1c7a44; --yesil-kenar:#b6e6c8; --kirmizi-zemin:#fdeaea; --kirmizi-yazi:#a83232; --kirmizi-kenar:#f2c4c4; --ipucu-zemin:#fff4e5; --ipucu-kenar:#f0c884; --ipucu-yazi:#8a5a12; /* 11 Eyl 2026: sabit renkli kurallar gece modunda kayboluyordu (lacivert rakam koyu kartta, açık krem kutuda açık yazı…) → her renk ailesi bir değişkene bağlandı. */ --vurgu-metin:#264653; /* fiyat, gösterge rakamı, toplam, yasal başlık */ --yazi-yumusak:#5a5148; --yazi-govde:#3a3a3a; --zemin-krem:#fdf9f3; --zemin-yesil:#f4fbf4; --zemin-mor:#f6f0ff; --zemin-pembe:#fff4f7; --zemin-mavi:#f2f7fd; --zemin-kod:#f3efe8; --kenar-yumusak:#eee3d4; --hero-zemin:linear-gradient(120deg,#fff2e6,#ffe0cc); --hero-mavi:linear-gradient(120deg,#eef6ff,#e0ecff); --hero-yesil:linear-gradient(120deg,#e7f7ee,#d3f0e0); --hero-mor:linear-gradient(120deg,#f3ecff,#e7dbff); --hero-vet:linear-gradient(120deg,#e8f7f4,#d5efe9); --oto-yazi:#7b2ff7; --uyari-yazi:#a35c00; color-scheme:light; } /* ---- Gece modu (8 Eyl 2026) ---- Tek doğruluk kaynağı: . Öznitelik yoksa işletim sistemi tercihi geçerlidir. Marka renkleri (turuncu/teal/mor/altın) iki modda da aynı; yalnız zemin, kart, yazı ve gri tonları değişir. Kontrast: yazı #ece7df üzerinde zemin #16191d ≈ 13:1. */ :root[data-tema="gece"]{ --arka:#16191d; --kart:#1f242a; --metin:#ece7df; --gri:#a7a39b; --acik-gri:#343a42; --lacivert:#1a2e3a; --koyu:#0e1114; --golge:0 4px 16px rgba(0,0,0,.45); --girdi:#14181c; --satir-uyari:#3a2222; --satir-dikkat:#3a3120; --yesil-zemin:#173323; --yesil-yazi:#8fe0ae; --yesil-kenar:#245c39; --kirmizi-zemin:#3a1f1f; --kirmizi-yazi:#f0a2a2; --kirmizi-kenar:#6b2e2e; --ipucu-zemin:#3a2f1a; --ipucu-kenar:#6b5220; --ipucu-yazi:#f0cf8a; --vurgu-metin:#f3ede4; --yazi-yumusak:#cfc7bb; --yazi-govde:#ddd6cb; --zemin-krem:#27231e; --zemin-yesil:#1b2a21; --zemin-mor:#261f33; --zemin-pembe:#33222a; --zemin-mavi:#1c2633; --zemin-kod:#2c2923; --kenar-yumusak:#3a3530; --hero-zemin:linear-gradient(120deg,#2a2119,#33241a); --hero-mavi:linear-gradient(120deg,#1a2433,#1d2a3d); --hero-yesil:linear-gradient(120deg,#17281f,#1b3226); --hero-mor:linear-gradient(120deg,#231d33,#2a2240); --hero-vet:linear-gradient(120deg,#16292a,#1a3230); --oto-yazi:#c3a6ff; --uyari-yazi:#f0b35a; color-scheme:dark; } @media (prefers-color-scheme: dark){ :root:not([data-tema="gunduz"]){ --arka:#16191d; --kart:#1f242a; --metin:#ece7df; --gri:#a7a39b; --acik-gri:#343a42; --lacivert:#1a2e3a; --koyu:#0e1114; --golge:0 4px 16px rgba(0,0,0,.45); --girdi:#14181c; --satir-uyari:#3a2222; --satir-dikkat:#3a3120; --yesil-zemin:#173323; --yesil-yazi:#8fe0ae; --yesil-kenar:#245c39; --kirmizi-zemin:#3a1f1f; --kirmizi-yazi:#f0a2a2; --kirmizi-kenar:#6b2e2e; --ipucu-zemin:#3a2f1a; --ipucu-kenar:#6b5220; --ipucu-yazi:#f0cf8a; --vurgu-metin:#f3ede4; --yazi-yumusak:#cfc7bb; --yazi-govde:#ddd6cb; --zemin-krem:#27231e; --zemin-yesil:#1b2a21; --zemin-mor:#261f33; --zemin-pembe:#33222a; --zemin-mavi:#1c2633; --zemin-kod:#2c2923; --kenar-yumusak:#3a3530; --hero-zemin:linear-gradient(120deg,#2a2119,#33241a); --hero-mavi:linear-gradient(120deg,#1a2433,#1d2a3d); --hero-yesil:linear-gradient(120deg,#17281f,#1b3226); --hero-mor:linear-gradient(120deg,#231d33,#2a2240); --hero-vet:linear-gradient(120deg,#16292a,#1a3230); --oto-yazi:#c3a6ff; --uyari-yazi:#f0b35a; color-scheme:dark; } } /* Sabit renk taşıyan kurallar iki modda da değişkenden okusun */ .flash-basari{background:var(--yesil-zemin);color:var(--yesil-yazi);border-color:var(--yesil-kenar)} .flash-uyari{background:var(--kirmizi-zemin);color:var(--kirmizi-yazi);border-color:var(--kirmizi-kenar)} .panel-ipucu{background:var(--ipucu-zemin);border-color:var(--ipucu-kenar);color:var(--ipucu-yazi)} .satir-uyari td{background:var(--satir-uyari)} .satir-dikkat td{background:var(--satir-dikkat)} .kutu input,.kutu textarea,.kutu select,.form-kutu input, .panel-filtre input[type=search],.panel-filtre select,.stok-kutu{background:var(--girdi);color:var(--metin)} input,select,textarea{color:var(--metin)} .logo-yazi{color:var(--vurgu-metin)} :root[data-tema="gece"] .logo-yazi{color:#8fd3c7} @media (prefers-color-scheme: dark){ :root:not([data-tema="gunduz"]) .logo-yazi{color:#8fd3c7} } .tema-dugme{background:transparent;border:1px solid var(--acik-gri);color:var(--metin); border-radius:20px;padding:6px 10px;cursor:pointer;font:inherit;font-size:.9rem;line-height:1} .tema-dugme:hover{border-color:var(--ana);color:var(--ana)} .panel-menu-alt .tema-dugme{text-align:left;font-size:.86rem;border:0;padding:8px 12px;color:var(--gri)} .panel-menu-alt .tema-dugme:hover{background:var(--arka);color:var(--metin)} /* Sistem / yayına hazırlık kartı */ .sistem-kutu{margin:18px 0} .sistem-liste{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px} .sistem-liste li{display:flex;gap:8px;align-items:flex-start;font-size:.9rem;line-height:1.45} .sistem-liste .sistem-isaret{flex:0 0 auto} .sistem-liste li.sistem-kotu{color:var(--kirmizi-yazi)} .yonetici-liste{list-style:none;margin:0;padding:0;display:grid;gap:6px} .yonetici-liste li{display:flex;align-items:center;gap:10px} *{box-sizing:border-box;margin:0;padding:0} body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--arka);color:var(--metin);line-height:1.5} a{color:inherit;text-decoration:none} img{max-width:100%} /* ---- Üst bar ---- */ .ust-serit{background:var(--lacivert);color:#fff;text-align:center;font-size:.85rem;padding:7px 10px} .ana-nav{display:flex;align-items:center;gap:24px;padding:14px 28px;background:var(--kart);box-shadow:var(--golge);position:sticky;top:0;z-index:50;flex-wrap:wrap} .logo{font-size:1.5rem;font-weight:800;color:var(--ana);display:flex;align-items:center;gap:10px;flex:0 0 auto} .logo-gorsel{height:60px;width:auto;display:block} .logo-yazi{font-family:Georgia,'Times New Roman',serif;font-size:1.55rem;font-weight:700; color:#14504a;letter-spacing:.5px;line-height:1;white-space:nowrap} .logo-yazi em{font-style:normal;color:var(--altin)} .menu{display:flex;gap:20px;font-weight:600} .menu a:hover{color:var(--ana)} .menu a{display:inline-flex;align-items:center;gap:5px} .nav-ikon{border-radius:50%;vertical-align:middle} .nav-sag{margin-left:auto;display:flex;align-items:center;gap:16px} .nav-sag a{font-weight:600} .sepet-link{position:relative} .rozet{position:absolute;top:-10px;right:-12px;background:var(--ana);color:#fff;border-radius:50%;font-size:.72rem;padding:1px 6px;font-weight:700} .btn-kucuk{background:var(--ana);color:#fff;padding:7px 14px;border-radius:20px} /* ---- Genel ---- */ /* Geniş ekranda yan boşluk bırakmadan kullan (ürünler yanlara yayılsın) */ .icerik{max-width:min(1680px,95vw);margin:0 auto;padding:26px 20px 60px} /* Okunabilirlik gerektiren metin sayfaları dar kalır */ .icerik.dar{max-width:1080px} .bolum-baslik{margin:34px 0 16px;font-size:1.4rem;display:flex;align-items:center;gap:12px} .sayfa-baslik{margin-bottom:18px;display:flex;align-items:center;gap:12px} .baslik-ikon{border-radius:50%;vertical-align:middle} .kucuk{font-size:.85rem;color:var(--gri)} .merkez{text-align:center} .devam{display:inline-block;margin-top:10px;color:var(--ana);font-weight:600} .btn{display:inline-flex;align-items:center;gap:7px;background:var(--ana);color:#fff;border:none;padding:11px 22px;border-radius:24px;font-weight:700;cursor:pointer;font-size:.95rem;transition:.15s} .btn:hover{background:var(--ana-koyu)} .btn-ikincil{background:var(--ikincil)} .btn-ikon{border-radius:50%;vertical-align:middle} .btn-ikincil:hover{background:#21867a} .btn-tam{width:100%;text-align:center} .btn-oto{background:var(--oto)} .btn-oto:hover{background:#6821d6} /* ---- Flash ---- */ .flash{padding:12px 18px;border-radius:10px;margin-bottom:14px;font-weight:600} .flash-basari{background:var(--yesil-zemin);color:var(--yesil-yazi);border:1px solid var(--yesil-kenar)} .flash-uyari{background:var(--kirmizi-zemin);color:var(--kirmizi-yazi);border:1px solid var(--kirmizi-kenar)} /* ---- Hero ---- */ .hero{display:flex;align-items:center;gap:30px;flex-wrap:wrap;background:var(--hero-zemin);border-radius:20px;padding:40px;margin-bottom:8px} /* Orta blok (rozet + başlık + metin + butonlar) logo ile fırsat kutusu arasında ORTALANIR */ .hero-yazi{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center} .premium-rozet{display:inline-block;background:linear-gradient(90deg,#c9a227,#e6c65a);color:#3a2e05;font-weight:800;letter-spacing:2px;font-size:.72rem;padding:5px 15px;border-radius:20px;margin-bottom:14px;box-shadow:0 2px 8px rgba(201,162,39,.35)} .hero-yazi h1{font-size:2.2rem;line-height:1.2;margin-bottom:12px} .hero-yazi h1 span{color:var(--ana)} .hero-yazi p{color:var(--yazi-yumusak);margin:0 auto 20px;max-width:640px} .hero-butonlar{display:flex;gap:12px;flex-wrap:wrap;justify-content:center} .hero-gorsel{font-size:6rem;filter:drop-shadow(0 8px 12px rgba(0,0,0,.12))} /* Hero'nun sağındaki fırsat/vet kutusu — boş kalan alanı satışa çevirir */ .hero-firsat{flex:0 0 300px;max-width:300px;background:var(--kart);border-radius:16px; box-shadow:0 6px 20px rgba(0,0,0,.10);overflow:hidden;display:flex;flex-direction:column} .firsat-serit{background:var(--koyu);color:#fff;font-weight:800;font-size:.82rem; letter-spacing:.4px;padding:9px 14px;display:flex;justify-content:space-between;align-items:center;gap:8px} .firsat-serit span{background:var(--ana);border-radius:20px;padding:2px 10px;font-size:.78rem;white-space:nowrap} .hero-vet .firsat-serit{background:var(--ikincil)} .hero-vet .firsat-serit span{background:#fff;color:var(--ikincil)} .firsat-gorsel{position:relative;display:flex;align-items:center;justify-content:center; height:130px;background:var(--hero-zemin);overflow:hidden} .firsat-gorsel .emoji{font-size:3rem} .firsat-gorsel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .firsat-govde{padding:12px 14px 14px;display:flex;flex-direction:column;gap:7px;flex:1} .firsat-ad{font-weight:700;font-size:.95rem;line-height:1.3} .firsat-ad:hover{color:var(--ana)} .firsat-not{font-size:.75rem;color:var(--gri);text-align:center} .vet-metin{font-size:.88rem;color:var(--yazi-yumusak);flex:1} .hero-logo{width:290px;height:auto;max-width:100%;border-radius:var(--radius);box-shadow:var(--golge);background:#fff} /* ---- Özellik şerit ---- */ .ozellik-serit{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:22px 0} .ozellik-serit div{background:var(--kart);border-radius:var(--radius);padding:16px;text-align:center;box-shadow:var(--golge);font-weight:700} .ozellik-serit span{font-size:1.6rem;display:block;margin-bottom:4px} .ozellik-serit small{color:var(--gri);font-weight:500} /* ---- Ürün grid ---- */ .urun-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px} .ikili-bolum{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:10px} .urun-kart{background:var(--kart);border-radius:var(--radius);overflow:hidden;box-shadow:var(--golge);display:flex;flex-direction:column;transition:.15s} .urun-kart:hover{transform:translateY(-4px)} .kart-gorsel{position:relative;height:170px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#fff6ee,#ffe9d6);overflow:hidden} .kart-gorsel .emoji{font-size:4rem} .urun-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .urun-kart:hover .urun-foto{transform:scale(1.05);transition:.3s} .indirim-etiket{position:absolute;top:10px;left:10px;background:var(--koyu);color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.5px;padding:3px 9px;border-radius:6px;opacity:.92} .oto-etiket{position:absolute;top:10px;right:10px;background:var(--oto);color:#fff;font-size:.7rem;font-weight:700;padding:3px 8px;border-radius:6px} .kart-govde{padding:14px;display:flex;flex-direction:column;gap:8px;flex:1} .marka{font-size:.75rem;color:var(--gri);text-transform:uppercase;letter-spacing:.5px;font-weight:700} .kart-ad{font-weight:600;font-size:.95rem;flex:1;min-height:40px} .kart-ad:hover{color:var(--ana)} .fiyat-satir{display:flex;align-items:baseline;gap:8px} .fiyat{font-size:1.25rem;font-weight:800;color:var(--vurgu-metin)} .fiyat-satir.buyuk .fiyat{font-size:1.7rem} .eski-fiyat{color:var(--gri);text-decoration:line-through;font-size:.9rem} /* ---- Filtre ---- */ .filtre-cubuk{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px} .cip{background:var(--kart);border:1px solid var(--acik-gri);padding:7px 16px;border-radius:20px;font-weight:600;font-size:.9rem} .cip.aktif,.cip:hover{background:var(--ana);color:#fff;border-color:var(--ana)} /* ---- Detay ---- */ .detay{display:grid;grid-template-columns:1fr 1.2fr;gap:36px;background:var(--kart);border-radius:20px;padding:30px;box-shadow:var(--golge)} .detay-gorsel{position:relative;background:linear-gradient(135deg,#fff6ee,#ffe9d6);border-radius:16px;display:flex;align-items:center;justify-content:center;min-height:320px;overflow:hidden} .emoji-buyuk{font-size:10rem} .detay-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .detay-bilgi h1{margin:6px 0 12px;font-size:1.6rem} .detay-aciklama{margin:16px 0;color:var(--yazi-yumusak)} .detay-form{display:flex;gap:12px;align-items:flex-end;margin:18px 0} .detay-form label{display:flex;flex-direction:column;font-weight:600;font-size:.85rem;gap:4px} .detay-form input{width:80px;padding:9px;border:1px solid var(--acik-gri);border-radius:8px} /* ---- Autoship kutu ---- */ .autoship-kutu{border:2px dashed var(--oto);background:var(--zemin-mor);border-radius:14px;padding:18px;margin-top:12px} .autoship-baslik{font-weight:800;color:var(--oto-yazi);font-size:1.05rem;margin-bottom:4px} .autoship-baslik span{background:var(--oto);color:#fff;padding:1px 8px;border-radius:10px;font-size:.8rem} .autoship-form{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;align-items:center} .autoship-form select,.autoship-form input{padding:9px;border:1px solid #d5c4f0;border-radius:8px} .autoship-form input{width:70px} /* ---- Sepet ---- */ .sepet-duzen{display:grid;grid-template-columns:1fr 320px;gap:26px;align-items:start} .sepet-liste{display:flex;flex-direction:column;gap:12px} .sepet-satir{display:grid;grid-template-columns:50px 1fr auto auto auto;align-items:center;gap:14px;background:var(--kart);padding:14px;border-radius:12px;box-shadow:var(--golge)} .sepet-satir .emoji{font-size:2rem} .thumb{width:46px;height:46px;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#fff6ee,#ffe9d6);font-size:1.7rem} .thumb img{width:100%;height:100%;object-fit:cover} .sepet-ad a{font-weight:600} .adet-form{display:flex;flex-direction:column;gap:2px} .adet-form input{width:64px;padding:6px;border:1px solid var(--acik-gri);border-radius:6px} .ara-toplam{font-weight:800;color:var(--vurgu-metin)} .link-buton{background:none;border:none;color:var(--ana);cursor:pointer;font-size:.78rem;font-weight:600} .sil-buton{background:none;border:none;color:var(--kirmizi);font-size:1.1rem;cursor:pointer} .ozet-kutu{background:var(--kart);border-radius:14px;padding:22px;box-shadow:var(--golge)} .ozet-kutu h3{margin-bottom:14px} .ozet-satir{display:flex;justify-content:space-between;padding:7px 0;color:var(--yazi-yumusak)} .ozet-satir.toplam{border-top:2px solid var(--acik-gri);margin-top:8px;padding-top:12px;font-weight:800;font-size:1.15rem;color:var(--metin)} .ozet-kutu .btn{margin-top:14px} /* ---- Ödeme ---- */ .odeme-duzen{display:grid;grid-template-columns:1fr 320px;gap:26px;align-items:start} .odeme-sol{display:flex;flex-direction:column;gap:18px} .kutu{background:var(--kart);border-radius:14px;padding:20px;box-shadow:var(--golge)} .kutu h3{margin-bottom:12px} .kutu label{display:block;font-weight:600;font-size:.85rem;margin-bottom:12px} .kutu input,.kutu textarea,.kutu select{width:100%;padding:10px;border:1px solid var(--acik-gri);border-radius:8px;margin-top:4px;font-family:inherit} .odeme-kalem{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--acik-gri)} .odeme-kalem .emoji{font-size:1.6rem} .oto-secim{display:flex;align-items:center;gap:8px;margin:0} .oto-secim select{width:auto;margin:0} /* ---- Form kutu ---- */ .form-kutu{max-width:400px;margin:20px auto;background:var(--kart);padding:30px;border-radius:16px;box-shadow:var(--golge)} .form-kutu h1{margin-bottom:10px} .form-kutu label{display:block;font-weight:600;font-size:.88rem;margin:14px 0 4px} .form-kutu input{width:100%;padding:11px;border:1px solid var(--acik-gri);border-radius:8px} .form-kutu .btn{margin-top:20px} /* ---- Hesap ---- */ .hesap-bolum{background:var(--kart);border-radius:16px;padding:24px;box-shadow:var(--golge);margin-bottom:22px} .hesap-bolum h2{margin-bottom:6px} .abonelik-liste{display:flex;flex-direction:column;gap:12px;margin-top:14px} .abonelik-kart{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:14px;border:1px solid var(--acik-gri);border-radius:12px;padding:14px} .abonelik-kart.pasif{opacity:.6} .abonelik-kart .emoji{font-size:2rem} .durum{font-size:.8rem;font-weight:700;margin-top:3px} .durum.aktif{color:var(--yesil)} .durum.duraklatildi{color:var(--gri)} .abonelik-aksiyon{display:flex;align-items:center;gap:10px} .abonelik-aksiyon select{padding:7px;border:1px solid var(--acik-gri);border-radius:8px} .siparis-kart{border:1px solid var(--acik-gri);border-radius:12px;padding:16px;margin-top:12px} .siparis-kalemler{margin:8px 0;padding-left:20px;color:var(--yazi-yumusak);font-size:.9rem} .siparis-toplam{font-weight:800;color:var(--vurgu-metin)} /* ---- Boş / footer ---- */ .bos-durum{text-align:center;padding:50px 20px;background:var(--kart);border-radius:16px;box-shadow:var(--golge)} .bos-durum .btn{margin-top:16px} .kucuk-bos{padding:24px} .alt-bilgi{background:var(--lacivert);color:#fff;text-align:center;padding:26px;margin-top:40px} .alt-bilgi .kucuk{color:#cdd8dd;margin-top:6px} .alt-bilgi .kucuk a{color:#fff;text-decoration:underline} .alt-bilgi .telif{color:#9fb0b7;font-size:.8rem;margin-top:14px;border-top:1px solid rgba(255,255,255,.12);padding-top:12px} /* ---- Logo ---- */ .logo{display:flex;align-items:center;gap:8px} .logo-pati{fill:var(--ana);flex-shrink:0} .logo span{line-height:1} /* ---- Ödeme yöntemi ---- */ .yontem-secim{display:flex;flex-direction:column;gap:8px;margin-bottom:14px} .yontem{display:flex;align-items:center;gap:10px;border:1px solid var(--acik-gri);border-radius:10px;padding:11px 14px;cursor:pointer;font-weight:600;margin:0} .yontem:hover{border-color:var(--ana)} .yontem input{width:auto;margin:0} /* ---- Yönetim paneli ---- */ .panel-ust{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px;margin-bottom:10px} .panel-ust-butonlar{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .btn-buyuk{font-size:1.05rem;padding:13px 26px} .panel-tablo{background:var(--kart);border-radius:14px;box-shadow:var(--golge);overflow-x:auto} .panel-tablo table{width:100%;border-collapse:collapse;min-width:640px} .panel-tablo th,.panel-tablo td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--acik-gri);vertical-align:middle} .panel-tablo th{background:var(--zemin-krem);font-size:.82rem;text-transform:uppercase;letter-spacing:.4px;color:var(--gri)} .panel-tablo tr:last-child td{border-bottom:none} .td-gorsel{width:60px} .td-islem{white-space:nowrap} .mini-btn{display:inline-block;background:var(--acik-gri);color:var(--metin);padding:6px 12px;border-radius:8px;font-size:.82rem;font-weight:600;border:none;cursor:pointer;margin:2px 0} .mini-btn:hover{background:#ddd0c4} .mini-btn.sil{background:#fbe3e3;color:var(--kirmizi)} .mini-btn.sil:hover{background:#f7cccc} .td-islem form{display:inline-block} /* ---- Ürün formu ---- */ .urun-form{background:var(--kart);border-radius:16px;padding:26px;box-shadow:var(--golge);max-width:820px} .form-satir{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:16px} .form-satir label{flex:1;min-width:170px;display:flex;flex-direction:column;font-weight:600;font-size:.88rem;gap:5px} .form-satir label.genis{flex-basis:100%} .form-satir label small{font-weight:400;color:var(--gri)} .urun-form input,.urun-form select,.urun-form textarea{padding:11px;border:1px solid var(--acik-gri);border-radius:9px;font-family:inherit;font-size:.95rem} .zorunlu{color:var(--kirmizi)} .onay-satir{background:var(--zemin-krem);border-radius:10px;padding:14px;flex-direction:column;gap:12px} .onay{flex-direction:row!important;align-items:center;gap:10px;min-width:auto;cursor:pointer} .onay input{width:auto} /* Ödeme sayfası yasal onay kutuları (10 Eyl 2026) */ .sozlesme-onay{display:flex;flex-direction:column;gap:8px;margin:14px 0 10px;font-size:.86rem;line-height:1.45} .sozlesme-onay .onay{display:flex;align-items:flex-start} .sozlesme-onay .onay input{margin-top:3px;flex-shrink:0} .sozlesme-onay p{margin:0} .sozlesme-onay a{color:var(--ana);font-weight:600;text-decoration:underline} /* ---- Çerez onay bandı (10 Eyl 2026) — KVKK: "Reddet" ile "Kabul Et" eşit görünür ---- */ .cerez-bant{position:fixed;left:16px;right:16px;bottom:16px;z-index:1000;max-width:780px;margin:0 auto; background:var(--kart);color:var(--metin);border-radius:var(--radius);box-shadow:0 8px 32px rgba(0,0,0,.28); padding:16px 18px;display:flex;flex-wrap:wrap;gap:12px 18px;align-items:flex-end;font-size:.9rem;line-height:1.45} .cerez-icerik{flex:1 1 360px} .cerez-icerik p{margin:4px 0 0} .cerez-icerik a{color:var(--ana);text-decoration:underline} .cerez-kategoriler{display:flex;flex-direction:column;gap:6px;margin-top:10px} .cerez-kategoriler label{display:flex;gap:8px;align-items:flex-start;font-size:.86rem} .cerez-kategoriler input{width:auto;margin-top:3px;flex-shrink:0} .cerez-dugmeler{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .cerez-dugme{min-width:112px} .cerez-tercih-ac{background:none;border:0;padding:4px 6px;color:inherit;text-decoration:underline;cursor:pointer;font:inherit} .sosyal-linkler{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:6px 0;font-weight:600} @media print{.cerez-bant{display:none!important}} /* ---- Panel: Entegrasyonlar ekranı ---- */ .entegrasyon-ozet{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 16px} .entegrasyon-grup{margin-bottom:16px} .entegrasyon-alan{padding:12px 0;border-top:1px solid var(--acik-gri)} .entegrasyon-grup h3 + .kucuk + .entegrasyon-alan{border-top:0} .entegrasyon-alan label{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-weight:700;font-size:.92rem;margin-bottom:6px} .entegrasyon-alan input{width:100%;font-family:ui-monospace,Consolas,monospace;font-size:.86rem} .entegrasyon-alan .kucuk{margin:6px 0 0} .baglanti-rozet{font-size:.74rem;font-weight:700;border-radius:10px;padding:1px 9px;background:var(--arka);color:var(--gri)} .baglanti-rozet.bagli{background:#e3f6ea;color:#17703a} .entegrasyon-grup code{overflow-wrap:anywhere} /* ---- Birim fiyat + indirim notu (10 Eyl 2026 — yasal zorunluluk) ---- */ .birim-fiyat{color:var(--gri);margin-top:2px} .indirim-notu{color:var(--gri);font-size:.78rem;margin-top:2px} .ust-serit a{color:inherit;text-decoration:underline} .satis-kapali-serit{background:var(--ikincil)} .satis-yakinda{cursor:default;opacity:.85} /* ---- Yüzen WhatsApp düğmesi (panel → Ayarlar) ---- */ .whatsapp-yuzen{position:fixed;right:18px;bottom:18px;z-index:900;display:flex;align-items:center;gap:6px; background:#0f7a52;color:#fff;font-weight:700;border-radius:999px;padding:10px 16px; box-shadow:0 6px 20px rgba(0,0,0,.25);text-decoration:none} .whatsapp-yuzen:hover{filter:brightness(1.08);color:#fff} @media(max-width:860px){.whatsapp-yuzen{bottom:84px;padding:12px}.whatsapp-yuzen span{display:none}} @media print{.whatsapp-yuzen{display:none!important}} /* ---- Fotoğraflı yorum (11 Eyl 2026) ---- */ .yorum-foto{display:block;margin-top:8px;max-width:240px} .yorum-foto img{display:block;width:100%;height:auto;border-radius:10px} .yorum-foto-panel{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px} .yorum-foto-panel img{width:72px;height:72px;object-fit:cover;border-radius:8px} /* ---- Otomatik kampanya (11 Eyl 2026) ---- */ .kampanya-satir{color:var(--yesil-yazi);font-weight:700} .kampanya-oneri{margin:6px 0 0} .kampanya-rozet{display:inline-block;margin-top:8px;background:#fff3e6;color:#8a4a12;border:1px dashed var(--ana); border-radius:10px;padding:5px 10px;font-size:.88rem} :root[data-tema="gece"] .kampanya-rozet{background:#3a2a1c;color:#ffd7ad} .onizleme{width:60px;height:60px;object-fit:cover;border-radius:8px;vertical-align:middle;margin-left:6px} .urun-form .btn-buyuk{margin-top:6px} /* ---- Topluluk / Forum ---- */ .topluluk-hero{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap; background:var(--hero-mavi);border-radius:20px;padding:30px 34px;margin-bottom:10px} .topluluk-hero h1{font-size:1.8rem;margin-bottom:6px} .topluluk-hero p{color:var(--yazi-yumusak);max-width:560px} .yesil-hero{background:var(--hero-yesil)} .kat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px} .kat-kart{display:flex;align-items:center;gap:14px;background:var(--kart);border-radius:14px;padding:18px;box-shadow:var(--golge);transition:.15s} .kat-kart:hover{transform:translateY(-3px)} .kat-emoji{font-size:2.2rem} .konu-liste{display:flex;flex-direction:column;gap:10px} .konu-satir{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:14px;background:var(--kart);border-radius:12px;padding:14px 16px;box-shadow:var(--golge);transition:.12s} .konu-satir:hover{transform:translateX(3px)} .kat-rozet{font-size:1.5rem;text-align:center} .konu-orta strong{display:block} .cevap-say{color:var(--gri);font-weight:700;white-space:nowrap;font-size:.9rem} .konu-ana{background:var(--kart);border-radius:16px;padding:26px;box-shadow:var(--golge)} .konu-ana h1{font-size:1.5rem;margin-bottom:8px} .konu-meta{margin-bottom:14px} .konu-icerik{white-space:pre-wrap;line-height:1.6} .cevap-liste{display:flex;flex-direction:column;gap:12px} .cevap-kart{background:var(--kart);border-radius:12px;padding:16px;box-shadow:var(--golge);border-left:4px solid var(--ana)} .cevap-basi{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px} .cevap-icerik,.cevap-kart p{white-space:pre-wrap;line-height:1.55} .cevap-form{margin-top:18px;background:var(--kart);border-radius:14px;padding:18px;box-shadow:var(--golge)} .cevap-form textarea{width:100%;padding:12px;border:1px solid var(--acik-gri);border-radius:10px;font-family:inherit;margin-bottom:10px;font-size:.95rem} .yesil-etiket{background:var(--yesil)!important} .detay-ozellikler{display:flex;flex-wrap:wrap;gap:8px 24px;margin:12px 0;color:var(--yazi-yumusak)} .iletisim-kutu{background:var(--zemin-yesil);border:1px solid var(--yesil-kenar);border-radius:12px;padding:14px;margin:16px 0} /* ---- Blog / Vet / Bağış / Profil ---- */ .mor-hero{background:var(--hero-mor)} .vet-hero{background:var(--hero-vet)} .mor-etiket{background:var(--oto)!important} .hesap-kisayol{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px} .blog-yazi{background:var(--kart);border-radius:16px;padding:28px;box-shadow:var(--golge);max-width:820px} .blog-yazi h1{font-size:1.7rem;margin:8px 0} .blog-kapak{width:100%;max-height:360px;object-fit:cover;border-radius:12px;margin:14px 0} .blog-ozet{font-size:1.05rem;color:var(--yazi-yumusak);font-style:italic;margin-bottom:14px} .blog-icerik{line-height:1.75;font-size:1.02rem} .blog-icerik p{margin:0 0 14px} .blog-icerik h2{margin:26px 0 10px;font-size:1.35rem;line-height:1.3} .blog-icerik h3{margin:20px 0 8px;font-size:1.12rem;line-height:1.35} .blog-icerik ul,.blog-icerik ol{margin:0 0 14px;padding-left:22px} .blog-icerik li{margin:0 0 6px} .blog-icerik .yasal-uyari{margin:16px 0} /* Gece görevi sağlık kutusu (yönetim gösterge ekranı) */ .gece-durum{margin:18px 0} .gece-durum.gece-iyi{border-left:4px solid #2e9e5b} .gece-durum.gece-kotu{border-left:4px solid #c33;background:var(--zemin-pembe)} .gece-liste{margin:8px 0 0;padding-left:20px;line-height:1.7} .gece-liste li{margin:0 0 4px} .durum-etiket.kirmizi{background:#c33;color:#fff} .ilgili-yazilar{list-style:none;padding:0;margin:0 0 18px} .ilgili-yazilar li{padding:10px 0;border-bottom:1px solid #eee} .ilgili-yazilar li:last-child{border-bottom:0} .ilgili-yazilar a{font-weight:600;display:block} .ilgili-yazilar .kucuk{display:block;margin-top:2px} .vet-rozet{background:var(--yesil);color:#fff;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:10px;white-space:nowrap} .cevap-kart.vet-cevap{border-left-color:var(--yesil);background:var(--zemin-yesil)} .bagis-kutu{border:2px dashed #e0708f;background:var(--zemin-pembe)} .bagis-secim{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px} .bagis-op{display:flex;align-items:center;gap:6px;border:1px solid var(--acik-gri);border-radius:20px;padding:8px 16px;cursor:pointer;font-weight:700;margin:0} .bagis-op:hover{border-color:#e0708f} .bagis-op input{width:auto;margin:0} /* ---- Yasal sayfalar ---- */ .yasal-sayfa{background:var(--kart);border-radius:16px;padding:30px 34px;box-shadow:var(--golge);max-width:820px;margin:0 auto;line-height:1.65} .yasal-sayfa h1{font-size:1.6rem;margin-bottom:16px} .yasal-sayfa h2{font-size:1.1rem;margin:20px 0 8px;color:var(--vurgu-metin)} .yasal-sayfa p,.yasal-sayfa li{color:var(--yazi-govde)} .yasal-sayfa ul{margin:8px 0 8px 20px} .yasal-uyari{background:var(--ipucu-zemin);border:1px solid var(--ipucu-kenar);color:var(--ipucu-yazi);border-radius:10px;padding:12px 16px;margin-bottom:20px;font-size:.9rem;font-weight:600} .yasal-linkler{display:flex;gap:8px 18px;flex-wrap:wrap;justify-content:center;margin:12px 0} .yasal-linkler a{color:#cdd8dd;font-size:.85rem;text-decoration:underline} .yasal-linkler a:hover{color:#fff} /* ---- Arama kutusu (üst bar) ---- */ .arama-form{display:flex;align-items:center;flex:1 1 240px;max-width:380px; background:var(--arka);border:1px solid var(--acik-gri);border-radius:24px;overflow:hidden} .arama-form input{flex:1;border:none;background:transparent;padding:9px 16px; font-family:inherit;font-size:.9rem;color:var(--metin);min-width:0} .arama-form input:focus{outline:none} .arama-form button{border:none;background:var(--ana);color:#fff;cursor:pointer; padding:9px 15px;font-size:1rem;line-height:1} .arama-form button:hover{background:var(--ana-koyu)} /* ---- Ürün listesi araç çubuğu (filtre + sıralama) ---- */ .liste-arac{display:flex;justify-content:space-between;align-items:flex-start; gap:14px;flex-wrap:wrap;margin-bottom:8px} .liste-arac .filtre-cubuk{margin-bottom:8px} .sirala-form{display:flex;align-items:center;gap:8px} .sirala-form select{padding:8px 10px;border:1px solid var(--acik-gri); border-radius:8px;font-family:inherit;background:var(--kart)} .sonuc-sayisi{margin-bottom:14px} /* ---- Ödeme: yan yana form alanları ---- */ .form-ikili{display:grid;grid-template-columns:1fr 1fr;gap:0 14px} /* ---- Sipariş durumu etiketleri ---- */ .durum-etiket{display:inline-block;padding:4px 11px;border-radius:20px; font-size:.78rem;font-weight:700;white-space:nowrap;background:var(--acik-gri);color:var(--metin)} .durum-etiket.d-Yeni{background:#e6f0ff;color:#1a56b8} .durum-etiket.d-Hazırlanıyor{background:#fff1dc;color:#a35c00} .durum-etiket.d-Kargoda{background:#e8e0ff;color:#5b21b6} .durum-etiket.d-TeslimEdildi{background:#e2f6e9;color:#1c7a42} .durum-etiket.d-İptal{background:#fbe3e3;color:var(--kirmizi)} .rozet-satir{display:inline-block;background:#fff;color:var(--ana);border-radius:12px; padding:0 8px;font-size:.8rem;font-weight:800;margin-left:4px} /* Yönetim sipariş listesinde "üye değil" işareti — misafir siparişinde iletişim yalnızca e-posta/telefon üzerinden kurulabilir. */ .rozet-misafir{display:inline-block;background:#f3e8d0;color:#7a5b12;border-radius:10px; padding:1px 7px;font-size:.72rem;font-weight:700;margin-left:6px;vertical-align:middle} .siparis-ust{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap} /* ---- Yönetim: sipariş detayı ---- */ .siparis-detay-duzen{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start} .mini-tablo{width:100%;border-collapse:collapse} .mini-tablo td{padding:7px 4px;border-bottom:1px solid var(--acik-gri);font-size:.9rem} .mini-tablo .sag{text-align:right;white-space:nowrap} .mini-tablo .toplam-satir td{border-bottom:none;border-top:2px solid var(--acik-gri)} /* ================= YÖNETİM PANELİ ================= */ /* Sol menü + içerik düzeni */ .panel-duzen{display:grid;grid-template-columns:230px 1fr;gap:24px;align-items:start} /* Sol menü ekranın en üstüne yapışır (10 Eyl 2026). Eskiden top:88px idi ama site menüsü (.ana-nav) da yapışıktı ve iki satıra bölünüp ~150-250px oluyordu → menünün üstü onun altında kalıyor, ekrandan uzun menünün altına hiç inilemiyordu. Artık panelde vitrinin menüsü/altbilgisi HİÇ çizilmez (yonetim_base.html → site_ust/site_alt boş); sol menü ekran boyuyla sınırlı ve gerekirse kendi içinde kayar. */ .panel-menu{background:var(--kart);border-radius:var(--radius);box-shadow:var(--golge); padding:14px 10px;position:sticky;top:16px;max-height:calc(100vh - 32px); overflow-y:auto;overscroll-behavior:contain} .panel-menu-baslik{font-weight:800;color:var(--ana);padding:6px 12px 12px;font-size:1.05rem} .panel-menu nav{display:flex;flex-direction:column;gap:2px} .panel-menu nav a{display:flex;align-items:center;gap:6px;padding:10px 12px;border-radius:10px; font-weight:600;font-size:.92rem;color:var(--metin)} .panel-menu nav a:hover{background:var(--arka)} .panel-menu nav a.aktif{background:var(--ana);color:#fff} .menu-rozet{margin-left:auto;background:var(--lacivert);color:#fff;border-radius:11px; padding:1px 8px;font-size:.75rem;font-weight:800} .panel-menu nav a.aktif .menu-rozet{background:#fff;color:var(--ana)} .menu-rozet.kirmizi{background:var(--kirmizi)} .panel-menu-alt{margin-top:14px;padding-top:12px;border-top:1px solid var(--acik-gri); display:flex;flex-direction:column;gap:4px} .panel-menu-alt a{padding:8px 12px;font-size:.86rem;color:var(--gri);border-radius:8px} .panel-menu-alt a:hover{background:var(--arka);color:var(--metin)} .panel-govde{min-width:0} .panel-basliksatir{display:flex;justify-content:space-between;align-items:center; gap:14px;flex-wrap:wrap;margin-bottom:18px} .panel-basliksatir h1{font-size:1.5rem} .panel-aksiyon{display:flex;gap:8px;flex-wrap:wrap} .panel-ipucu{margin-top:24px;background:var(--ipucu-zemin);border:1px solid var(--ipucu-kenar);color:var(--ipucu-yazi); border-radius:10px;padding:12px 16px} /* Ölçü kutuları (dashboard) */ .olcu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px} .olcu-grid.dort{grid-template-columns:repeat(3,1fr)} .olcu-kart{background:var(--kart);border-radius:var(--radius);box-shadow:var(--golge); padding:16px 18px;display:block;border-left:4px solid var(--acik-gri)} .olcu-kart.vurgu{border-left-color:var(--ana)} .olcu-kart.dikkat{border-left-color:var(--altin)} .olcu-kart.tehlike{border-left-color:var(--kirmizi)} a.olcu-kart:hover{transform:translateY(-2px);transition:.15s} .olcu-etiket{font-size:.8rem;color:var(--gri);font-weight:700;text-transform:uppercase;letter-spacing:.4px} .olcu-deger{font-size:1.9rem;font-weight:800;margin:4px 0;color:var(--vurgu-metin)} .olcu-kart.kucuk-kart .olcu-deger{font-size:1.5rem} .olcu-alt{font-size:.8rem;color:var(--gri)} /* Ciro grafiği — saf CSS, dış kütüphane yok */ .grafik-kutu{background:var(--kart);border-radius:var(--radius);box-shadow:var(--golge);padding:18px} .grafik{display:flex;align-items:flex-end;gap:6px;height:190px;padding-bottom:4px} .grafik-sutun{flex:1;display:flex;flex-direction:column;justify-content:flex-end; align-items:center;height:100%;min-width:0} .grafik-tutar{font-size:.68rem;color:var(--gri);white-space:nowrap;margin-bottom:2px} .grafik-cubuk{width:100%;background:linear-gradient(180deg,var(--ana),var(--ana-koyu)); border-radius:5px 5px 0 0;min-height:3px} .grafik-sutun:hover .grafik-cubuk{background:var(--ikincil)} .grafik-etiket{font-size:.68rem;color:var(--gri);margin-top:5px;white-space:nowrap} .ikili-panel{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start} /* Panel filtre çubuğu */ .panel-filtre{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px; background:var(--kart);padding:12px 14px;border-radius:12px;box-shadow:var(--golge)} .panel-filtre input[type=search],.panel-filtre select{padding:9px 12px;border:1px solid var(--acik-gri); border-radius:8px;font-family:inherit;font-size:.9rem;background:var(--girdi);color:var(--metin)} .panel-filtre input[type=search]{flex:1;min-width:180px} /* Tablo satır vurguları */ .satir-uyari td{background:var(--satir-uyari)} .satir-dikkat td{background:var(--satir-dikkat)} .satir-pasif td{opacity:.55} .stok-bitti{color:var(--kirmizi)} .stok-az{color:var(--uyari-yazi)} .stok-kutu{width:88px;padding:7px 9px;border:1px solid var(--acik-gri);border-radius:8px; font-family:inherit;font-weight:700;text-align:center} .stok-kaydet{position:sticky;bottom:0;background:var(--arka);padding:14px 0; display:flex;align-items:center;gap:14px;flex-wrap:wrap} .kucuk-thumb{margin-right:6px} .yorum-hucre{max-width:340px;white-space:pre-line;word-break:break-word} .toplu-form{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px} .gecikme{color:var(--kirmizi);font-weight:700} .sayfalama{display:flex;align-items:center;gap:12px;justify-content:center; flex-wrap:wrap;margin:18px 0} .mini-btn.pasif{opacity:.4;cursor:default} .ayar-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start} .kod-kutu{background:var(--koyu);color:#e8f0e8;padding:12px 14px;border-radius:10px; font-size:.78rem;overflow-x:auto;white-space:pre;margin:8px 0} /* ---- Ürün yorumları / yıldız ---- */ .yildizlar{color:var(--altin);letter-spacing:1px;font-size:1rem} .yildizlar.buyuk{font-size:1.5rem} .puan-satir{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap} .kart-puan{display:flex;align-items:center;gap:5px} .kart-puan .yildizlar{font-size:.85rem} .yorum-duzen{display:grid;grid-template-columns:250px 1fr;gap:24px;align-items:start} .yorum-ozet{background:var(--kart);border-radius:var(--radius);box-shadow:var(--golge); padding:20px;text-align:center} .ozet-puan{font-size:2.6rem;font-weight:800;color:var(--vurgu-metin);line-height:1} .dagilim{margin-top:14px;display:flex;flex-direction:column;gap:5px} .dagilim-satir{display:flex;align-items:center;gap:7px} .dagilim-satir .cubuk{flex:1;height:8px;background:var(--acik-gri);border-radius:5px;overflow:hidden} .dagilim-satir .dolu{display:block;height:100%;background:var(--altin)} .yorum-form{background:var(--kart);border-radius:var(--radius);box-shadow:var(--golge); padding:20px;margin-bottom:18px} .yorum-form h3{margin-bottom:12px} .yorum-form label{display:block;font-weight:600;font-size:.85rem;margin-bottom:12px} .yorum-form select,.yorum-form textarea{width:100%;padding:10px;border:1px solid var(--acik-gri); border-radius:8px;margin-top:4px;font-family:inherit} .yorum-liste{display:flex;flex-direction:column;gap:12px} .yorum-kart{background:var(--kart);border-radius:12px;box-shadow:var(--golge);padding:16px} .yorum-ust{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px} /* white-space:pre-line → satır başları korunur ama HTML çalışmaz (XSS güvenli) */ .yorum-icerik{white-space:pre-line;word-break:break-word} /* ---- Responsive ---- */ @media(max-width:1200px){ /* Dar ekranda fırsat kutusu metni sıkıştırmasın — alt satıra tam genişlik iner */ .hero-firsat{flex-basis:100%;max-width:none} .firsat-gorsel{height:150px} } @media(max-width:1000px){ .panel-duzen{grid-template-columns:1fr} .panel-menu{position:static;max-height:none;overflow:visible} .panel-menu nav{flex-direction:row;flex-wrap:wrap} .panel-menu nav a{flex:1 1 auto} .panel-menu-alt{flex-direction:row} .ikili-panel,.ayar-grid,.yorum-duzen{grid-template-columns:1fr} .olcu-grid,.olcu-grid.dort{grid-template-columns:repeat(2,1fr)} } @media(max-width:860px){ .hero{flex-direction:column;text-align:center} .hero-firsat{flex:1 1 auto;max-width:none;width:100%;text-align:left} .logo-gorsel{height:48px} .logo-yazi{font-size:1.2rem} .ozellik-serit{grid-template-columns:1fr 1fr} .ikili-bolum,.detay,.sepet-duzen,.odeme-duzen{grid-template-columns:1fr} .nav-sag{width:100%;margin-left:0} .menu{flex-wrap:wrap} .arama-form{order:5;max-width:none;width:100%;flex-basis:100%} .form-ikili,.siparis-detay-duzen{grid-template-columns:1fr} .liste-arac{flex-direction:column} .olcu-grid,.olcu-grid.dort{grid-template-columns:1fr} .grafik{height:150px} .grafik-tutar{display:none} .panel-basliksatir h1{font-size:1.25rem} } /* ---- Kırıntı yolu (breadcrumb) — SEO + kullanıcıya konum bilgisi ---- */ .kirinti{margin:0 0 14px;font-size:.85rem;color:var(--gri)} .kirinti ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0} .kirinti li{display:flex;align-items:center;gap:6px} .kirinti li+li::before{content:"›";color:var(--acik-gri)} .kirinti a{color:var(--gri);text-decoration:none} .kirinti a:hover{text-decoration:underline} .kirinti [aria-current="page"]{color:var(--metin);font-weight:600} /* ---- Hakkımızda / İletişim firma tablosu ---- */ .firma-tablo{width:100%;border-collapse:collapse;margin:12px 0 20px} .firma-tablo th,.firma-tablo td{border-bottom:1px solid var(--acik-gri);padding:8px 10px;text-align:left;vertical-align:top} .firma-tablo th{width:34%;font-weight:600;color:var(--gri)} @media(max-width:600px){.firma-tablo th{width:44%}} /* ================================================================== FATURA / SİPARİŞ BELGESİ ================================================================== */ /* JS ile açılıp kapanan bloklar (fatura tipi, ayrı fatura adresi): [hidden] bazı display kurallarıyla ezilebildiği için garantiye alınır. */ [hidden]{display:none !important} .belge-arac{display:flex;gap:10px;justify-content:flex-end;margin-bottom:12px} .belge{background:#fff;color:#2b2b2b;border:1px solid #e6dccd;border-radius:12px;padding:26px; max-width:900px;margin:0 auto} .belge-ust{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap; border-bottom:2px solid #2f2a24;padding-bottom:14px;margin-bottom:16px} .belge-magaza{max-width:52%} .belge-logo{font-size:1.3rem;font-weight:700;margin-bottom:6px} .belge-kimlik h1{font-size:1.35rem;margin:0} .belge-altbaslik{margin:2px 0 8px} .belge-mini{border-collapse:collapse;font-size:.85rem} .belge-mini.genis{width:100%} .belge-mini th,.belge-mini td{border-bottom:1px solid #eee3d4;padding:5px 8px; text-align:left;vertical-align:top} .belge-mini th{color:#6b6357;font-weight:600;white-space:nowrap} .belge-uyari{background:#fdf6e6;border:1px solid #ecd9a8;border-radius:8px; padding:10px 12px;font-size:.85rem;margin:12px 0} .belge-uyari-kirmizi{background:#fdeceb;border-color:#f0b6b1} .belge-taraflar{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:16px 0} .belge-taraflar h3{margin:0 0 6px;font-size:1rem} .belge-taraflar p{margin:0;font-size:.9rem;line-height:1.5} .belge-tablo{width:100%;border-collapse:collapse;margin:16px 0;font-size:.85rem} .belge-tablo th,.belge-tablo td{border-bottom:1px solid #eee3d4;padding:7px 8px; text-align:center} .belge-tablo thead th{background:#faf5ec;border-bottom:2px solid #d9cbb4; font-weight:600;color:#4a423a} .belge-tablo .sol{text-align:left} .belge-tablo .sag{text-align:right;white-space:nowrap} .belge-alt{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px} .belge-alt h3{margin:0 0 6px;font-size:1rem} .belge-genel th,.belge-genel td{border-top:2px solid #2f2a24;font-size:1.05rem; padding-top:8px} .belge-dip{border-top:1px solid #eee3d4;margin-top:18px;padding-top:10px;color:#6b6357} .fatura-tip-secim{display:flex;gap:10px;margin:8px 0 12px;flex-wrap:wrap} .fatura-ayni-satir{display:flex;align-items:center;gap:8px;margin:10px 0} @media(max-width:860px){ .belge{padding:16px} .belge-magaza{max-width:100%} .belge-taraflar,.belge-alt{grid-template-columns:1fr} .belge-tablo{font-size:.75rem} .belge-tablo th,.belge-tablo td{padding:5px 4px} } /* ---- YAZDIRMA: menü/footer/düğmeler basılmaz, sadece belge çıkar ---- */ @media print{ .ust-bar,.ana-nav,.alt-bilgi,.kirinti,.flash,.yazdirma-gizle, .panel-menu,.panel-basliksatir,.btn,.mini-btn,.link-buton{display:none !important} body{background:#fff;color:#000;font-size:11pt} .icerik,main.icerik{max-width:none;margin:0;padding:0} .belge{border:0;border-radius:0;padding:0;max-width:none;box-shadow:none} .belge-tablo thead th{background:#f2f2f2 !important;-webkit-print-color-adjust:exact; print-color-adjust:exact} .belge-uyari{background:#fff !important;border:1px solid #999} a[href]{text-decoration:none;color:#000} .belge-tablo,.belge-mini{page-break-inside:auto} tr{page-break-inside:avoid} } /* ---- Ürün seçenekleri (varyant) — 2 Ağu 2026 -------------------------- */ .varyant-secim{margin:.75rem 0 1rem} .varyant-baslik{font-weight:600;font-size:.9rem;margin-bottom:.4rem} .varyant-kutu{display:inline-flex;align-items:center;gap:.4rem;border:2px solid var(--acik-gri); border-radius:10px;padding:.45rem .7rem;margin:0 .5rem .5rem 0;cursor:pointer; background:var(--kart);transition:border-color .15s,background .15s} .varyant-kutu:hover{border-color:var(--gri)} .varyant-kutu:has(input:checked){border-color:var(--ana,#ff8a3d);background:var(--zemin-krem)} .varyant-kutu.tukendi{opacity:.55;cursor:not-allowed} .varyant-kutu input{margin:0} .varyant-ad{font-weight:600} .varyant-fiyat{color:var(--yazi-yumusak);font-size:.9rem} .varyant-not{font-size:.75rem;color:#a00;background:#fdecec;border-radius:6px;padding:0 .35rem} .varyant-not.az{color:#8a5a00;background:#fff3d6} .varyant-etiket{display:inline-block;font-size:.8rem;font-weight:600;color:var(--yazi-yumusak); background:var(--zemin-kod);border-radius:6px;padding:.05rem .4rem;margin:.15rem 0} .tablo-kaydir{overflow-x:auto} .kargo-cubuk{height:8px;border-radius:99px;background:var(--acik-gri);overflow:hidden;margin:.6rem 0 .35rem} .kargo-dolu{height:100%;background:linear-gradient(90deg,#ffb26b,#ff8a3d);border-radius:99px; transition:width .3s} /* ---- Favoriler / stok bildirimi — 2 Ağu 2026 -------------------------- */ .urun-kart{position:relative} .kart-favori{position:absolute;top:.5rem;right:.5rem;z-index:2;margin:0} .favori-kalp{border:0;background:rgba(255,255,255,.85);border-radius:99px; width:2rem;height:2rem;font-size:1rem;line-height:1;cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.15)} .favori-kalp:hover{background:#fff;transform:scale(1.08)} .favori-form{margin:.4rem 0} .favori-buton{font-size:.95rem} .haber-ver{margin-top:1rem;background:var(--zemin-krem)} .haber-form{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.5rem} .fiyat-alarm{margin:.4rem 0} .fiyat-alarm summary{cursor:pointer;font-size:.95rem;color:var(--metin)} .fiyat-alarm .haber-form input[type=email]{min-width:0;flex:1 1 12rem} /* ---- Marka sayfaları + kategori SSS — 11 Eyl 2026 --------------------- */ .detay-bilgi .marka a{color:inherit;text-decoration:underline dotted} .marka-listesi{list-style:none;padding:0;margin:1rem 0;display:grid;gap:.6rem; grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))} .marka-listesi a{display:flex;flex-direction:column;gap:.15rem;padding:.7rem .9rem;border-radius:10px; background:var(--kart);border:1px solid var(--acik-gri,#e5e0da);text-decoration:none;color:inherit} .marka-listesi a:hover{border-color:currentColor} .kategori-sss{margin:1rem 0 1.4rem} .kategori-sss h2{font-size:1.1rem;margin:.2rem 0 .5rem} .kategori-sss details{border-bottom:1px solid var(--acik-gri,#e5e0da);padding:.45rem 0} .kategori-sss summary{cursor:pointer;font-weight:600} .kategori-sss details p{margin:.4rem 0 0} .icerik-satir label{display:block;margin-top:.5rem} .icerik-satir textarea{width:100%;box-sizing:border-box} /* ---- KVKK başvuru — 11 Eyl 2026 ---------------------------------------- */ .kvkk-form label,.kvkk-kayit label{display:block;margin:.6rem 0} .kvkk-form input[type=text],.kvkk-form input[type=email],.kvkk-form textarea, .kvkk-kayit textarea{width:100%;box-sizing:border-box} .kvkk-form fieldset{border:1px solid var(--acik-gri,#e5e0da);border-radius:8px;margin:.6rem 0} .kvkk-form label.secenek,.kvkk-kayit label.secenek{margin:.3rem 0;font-weight:normal} .on-bicimli{white-space:pre-wrap;overflow-wrap:anywhere} .kvkk-acil{border-left:4px solid #c33} /* ---- Vitrin bantları — 11 Eyl 2026 (karusel yok, sabit kartlar) --------- */ .vitrin-bantlari{display:grid;gap:12px;margin:18px 0; grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr))} .vitrin-bant{position:relative;display:block;border-radius:14px;overflow:hidden;aspect-ratio:16/9; max-width:100%;background:var(--zemin-krem);color:inherit;text-decoration:none} .vitrin-bant img{width:100%;height:100%;object-fit:cover;display:block} .vitrin-bant-yazi{position:absolute;left:0;right:0;bottom:0;padding:.7rem .9rem;display:flex; flex-direction:column;gap:.15rem;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.68))} .vitrin-bant strong{font-size:1.1rem;line-height:1.25} .vitrin-bant.yazili{aspect-ratio:auto;min-height:7rem;border:1px solid var(--acik-gri,#e5e0da)} .vitrin-bant.yazili .vitrin-bant-yazi{position:static;background:none;color:inherit;height:100%; justify-content:center;padding:1.2rem} .vitrin-bant:hover strong{text-decoration:underline} .bant-kucuk{object-fit:cover;border-radius:4px} .bant-form label{display:block;margin:.5rem 0} .bant-form input[type=text]{width:100%;box-sizing:border-box} .bant-form-satir{display:flex;flex-wrap:wrap;gap:.8rem} .satir-ici{display:inline-block;margin:0} /* ---- Evcil bakım takvimi / mama tahmini — 2 Ağu 2026 ------------------ */ .mama-ozet{background:var(--zemin-yesil);border-radius:8px;padding:.4rem .55rem;margin:.4rem 0} .mama-tahmin{background:var(--zemin-yesil);margin-top:1rem} .mama-tahmin ul{margin:.4rem 0 .4rem 1rem} .hayvan-duzen{margin:.5rem 0} .hayvan-duzen summary{cursor:pointer} .takvim-alan{display:grid;gap:.35rem;margin:.4rem 0} .takvim-liste{list-style:none;padding:0;margin:.4rem 0} .takvim-liste li{padding:.15rem 0} .takvim-liste li.yaklasti{color:#8a5a00;font-weight:600} .takvim-liste li.gecikti{color:#a00;font-weight:600} .havale-bilgi{background:var(--zemin-mavi);border-left:4px solid #4a90d9} .durum-etiket.d-ÖdemeBekliyor{background:#e8f0fb;color:#274b7a} /* ---- SSS arşivi — 2 Ağu 2026 ----------------------------------------- */ .sss-liste{display:grid;gap:.5rem;margin:1rem 0} .sss-kayit{border:1px solid var(--acik-gri);border-radius:10px;padding:.6rem .8rem;background:var(--kart)} .sss-kayit summary{cursor:pointer} .sss-cevap{margin-top:.5rem;line-height:1.6} .sss-detay{max-width:46rem} .arama-formu{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0} /* ---- Liste filtreleri + beslenme bilgisi + iletişim — 2 Ağu 2026 ------ Filtre paneli
ile açılır: mobilde ekranı kaplamasın, filtre uygulanmışsa (filtre_var) sunucu tarafında `open` gelir. */ .filtre-panel{border:1px solid var(--acik-gri);border-radius:10px;background:var(--kart); padding:.5rem .8rem;margin:0 0 1rem} .filtre-panel>summary{cursor:pointer;font-weight:600} .filtre-form{display:grid;gap:.8rem;margin-top:.8rem; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))} .filtre-form fieldset{border:1px solid #eee;border-radius:8px;padding:.5rem .6rem;margin:0} .filtre-form legend{font-size:.85rem;font-weight:600;padding:0 .3rem} .filtre-form fieldset label{display:block;margin:.15rem 0;font-weight:400} .filtre-form input[type="number"]{width:100%} .filtre-dugmeler{grid-column:1/-1;display:flex;gap:.8rem;align-items:center;flex-wrap:wrap} .urun-etiketler{display:flex;flex-wrap:wrap;gap:.35rem;margin:.5rem 0} .teslimat-vaat{background:var(--zemin-yesil);border-radius:8px;padding:.4rem .55rem;margin:.5rem 0} .beslenme-grid{display:grid;gap:.8rem;margin:1rem 0; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))} .beslenme-liste{list-style:none;padding:0;margin:.4rem 0} .beslenme-liste li{padding:.15rem 0;border-bottom:1px dotted #eee} .alt-iletisim{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center; align-items:center;margin:.4rem 0} /* --- Kategori sayfası açıklaması (SEO + müşteriye gerçek bilgi) --- */ .kategori-aciklama{background:var(--zemin-krem);border:1px solid var(--kenar-yumusak);border-radius:10px; padding:.8rem 1rem;margin:0 0 1rem;line-height:1.6} .kategori-aciklama p{margin:.35rem 0} /* --- Mama hesaplama sayfası --- */ .mama-hesap-form{margin-bottom:1rem} .mama-sonuc{background:var(--zemin-yesil);border:1px solid var(--yesil-kenar);border-radius:10px; padding:.9rem 1.1rem;margin:1rem 0} .mama-sonuc-buyuk{font-size:1.15rem;margin:.3rem 0} .mama-tablo{max-width:38rem} .mama-yontem{margin-top:1.6rem;line-height:1.65} .mama-yontem code{background:var(--zemin-kod);padding:.15rem .4rem;border-radius:5px} /* ---- 8 Eyl 2026: dünya sitelerinden esinlenen parçalar ---- */ /* Arama otomatik tamamlama */ .arama-form{position:relative} .oneri-liste{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--kart); border:1px solid var(--acik-gri);border-radius:12px;box-shadow:var(--golge);list-style:none; margin:0;padding:6px;z-index:80;max-height:70vh;overflow:auto} .oneri-liste li a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--metin)} .oneri-liste li a:hover,.oneri-liste li.secili a{background:var(--arka)} .oneri-liste img{width:36px;height:36px;object-fit:cover;border-radius:6px;flex:0 0 auto} .oneri-ad{flex:1;font-weight:600;font-size:.9rem} .oneri-alt{font-size:.78rem;color:var(--gri);white-space:nowrap} .oneri-tum{font-weight:700;color:var(--ana)!important;justify-content:center} /* Aciliyet etiketleri */ .son-etiket{position:absolute;bottom:10px;left:10px;background:var(--kirmizi);color:#fff;font-size:.7rem; font-weight:700;padding:3px 8px;border-radius:6px} .son-uyari{display:inline-block;margin-left:10px;color:var(--kirmizi);font-weight:700;font-size:.9rem} /* Doğrulanmış alıcı */ .dogrulanmis{font-size:.78rem;color:var(--yesil-yazi);background:var(--yesil-zemin); border:1px solid var(--yesil-kenar);border-radius:12px;padding:2px 8px;font-weight:600} /* Sipariş adımları */ .adimlar{list-style:none;margin:14px 0 18px;padding:0;display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:6px;counter-reset:adim} .adim{position:relative;text-align:center;padding:0 4px} .adim-nokta{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px; border-radius:50%;background:var(--acik-gri);color:var(--gri);font-weight:800;font-size:.9rem;margin-bottom:6px} .adim.tamam .adim-nokta{background:var(--yesil);color:#fff} .adim.simdi .adim-nokta{background:var(--ana);color:#fff;box-shadow:0 0 0 4px rgba(255,140,66,.25)} .adim-ad{display:block;font-size:.82rem;font-weight:700;color:var(--gri)} .adim.tamam .adim-ad,.adim.simdi .adim-ad{color:var(--metin)} .adim-not{display:block;font-size:.78rem;color:var(--gri);margin-top:2px} .adim:not(:last-child)::after{content:"";position:absolute;top:16px;left:calc(50% + 18px);right:calc(-50% + 18px); height:2px;background:var(--acik-gri)} .adim.tamam:not(:last-child)::after{background:var(--yesil)} .adimlar-iptal{grid-template-columns:1fr} .adimlar-iptal .adim-nokta{background:var(--kirmizi);color:#fff} /* Panel arama + segmentler */ .panel-ara{padding:0 6px 10px} .panel-ara input{width:100%;padding:8px 10px;border:1px solid var(--acik-gri);border-radius:8px; font-family:inherit;font-size:.86rem;background:var(--girdi);color:var(--metin)} .segment-serit{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px} .segment-serit .cip{font-size:.82rem;padding:6px 12px} .cip-sayi{display:inline-block;margin-left:6px;background:var(--acik-gri);color:var(--metin); border-radius:10px;padding:0 7px;font-size:.75rem} .cip.aktif .cip-sayi{background:rgba(255,255,255,.25);color:#fff} /* Sadakat puanı */ .puan-kutu{border-left:4px solid var(--altin)} .puan-satir{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .puan-bakiye{font-size:1.1rem;font-weight:700} .puan-sayi{font-size:2rem;font-weight:800;color:var(--altin)} .puan-gecmis{margin:10px 0 0;padding-left:18px} /* Mobil yapışık sepet çubuğu — yalnız dar ekranda */ .yapisik-sepet{display:none} @media(max-width:860px){ .yapisik-sepet{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;align-items:center; justify-content:space-between;gap:12px;padding:10px 14px;background:var(--kart); border-top:1px solid var(--acik-gri);box-shadow:0 -4px 14px rgba(0,0,0,.12)} .yapisik-fiyat{font-size:1.15rem;font-weight:800;color:var(--vurgu-metin)} :root[data-tema="gece"] .yapisik-fiyat{color:var(--metin)} body:has(.yapisik-sepet) .alt-bilgi{padding-bottom:86px} }