/* ==========================================================================
   DRUPE COFFEE & STUFF — SİTE STİLLERİ
   Eskiden functions.php içinde <style> blokları ve Ek CSS'te dağınık duran kuralların tek yeri.

   İÇİNDEKİLER
    0. Renkler ve ortak değerler
    1. Genel iskelet (yatay kayma, footer)
    2. Header
    3. Menü ve sepet panelleri
    4. Sepet ürün kartları
    5. Yükleme ekranı (preloader)
    6. Ana sayfa hero  [drupe_ana_ekran] (3D bardak animasyonu)
    7. Blog vitrini     [drupe_blog_vitrin]
    8. Tekil blog yazısı
    9. Blog arşivi (/blog, kategoriler, arama)
   10. Mağaza arşivleri (shop, ürün kategorileri)
   11. Ürün adı ve fiyat renkleri
   12. Kategori kartları
   12b. Ürün kartlarında buton hizalama + "Stokta yok"
   13. Yatay ürün vitrini (.drupe-yatay-vitrin) + kaydırma göstergesi
   14. Premium Addons ürün linkleri
   15. Formlar  [drupe_kariyer_formu] [drupe_toptan_formu]
   16. Ödeme ekranı perdeleri (iyzico)
   17. Yardımcılar
   18. Formlarda KVKK onay kutusu
   19. Etkinlik formu [drupe_etkinlik_formu]
   20. Çerez bandı
   21. WhatsApp butonu
   22. Ödeme sayfası: sözleşmeler, kurumsal fatura, hatırlatma izni
   23. Kargo bilgisi, reçete sekmesi
   24. Satıcı bilgileri / çalışma saatleri
   25. 404 sayfası
   ========================================================================== */


/* ==========================================================================
   0. RENKLER VE ORTAK DEĞERLER — rengi buradan değiştirin, her yer güncellenir
   ========================================================================== */
:root {
	--drupe-ana: #09444c;          /* Drupe mavisi */
	--drupe-ana-koyu: #062f35;     /* Hover */
	--drupe-ana-ikincil: #1b4b52;  /* Sepetteki gri-mavi butonlar */
	--drupe-ana-acik: #f4f8f8;     /* Açık zemin */
	--drupe-kahve: #8c7355;        /* Kariyer formu */
	--drupe-kahve-koyu: #6b573f;
	--drupe-zemin: #fbf8f3;        /* Sayfa zemini: göz yormayan çok açık krem. Beyaza dönmek için #ffffff yazın. */
	--drupe-font-vurgu: "MS Gothic", sans-serif; /* Ürün adı/fiyat yazı tipi (rapor: bu font sadece Windows'ta var) */
	--drupe-header-h: 85px;
	--drupe-cerez-h: 0px;          /* Çerez bandı açıkken yüksekliği (drupe.js yazar) */
}
@media (max-width: 768px) {
	:root { --drupe-header-h: 65px; }
}


/* ==========================================================================
   1. GENEL İSKELET
   ========================================================================== */

/* Sayfanın sağa kaymasını engelle. "clip", "hidden"ın aksine position:sticky'yi bozmaz;
   desteklemeyen eski tarayıcılar bir önceki satırdaki "hidden"ı kullanır. */
html, body {
	overflow-x: hidden !important;
	overflow-x: clip !important;
}

/* Sayfa zemini (Hello ve Elementor'un beyazını ezer) */
html body { background-color: var(--drupe-zemin) !important; }

/* İçerik kısa olsa da footer ekranın en altında dursun */
body {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	min-height: 100vh !important;
	margin: 0 !important;
}
.turbo-footer-template,          /* Sitedeki footer şablonu (Turbo Addons) */
.elementor-location-footer {     /* Elementor Pro footer'ı kullanılırsa */
	margin-top: auto !important;
	width: 100%;
}


/* ==========================================================================
   2. HEADER (#drupe-master-header) — inc/header.php
   ========================================================================== */
header.site-header { display: none !important; } /* Hello'nun kendi header'ı */

#drupe-master-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999990; /* Menü/sepet perdesinin (999998) altında: panel açılınca header da kararır */
	background: var(--drupe-ana) !important;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
	transition: background 0.4s ease, box-shadow 0.4s ease;
}
/* Yönetici girişliyken WordPress üst çubuğunun altına in */
body.admin-bar #drupe-master-header { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar #drupe-master-header { top: 46px; }
}

/* Ana sayfa en üstteyken şeffaf */
#drupe-master-header.drupe-home-page:not(.is-scrolled) {
	background: transparent !important;
	box-shadow: none !important;
}

.drupe-mh-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1200px;
	height: var(--drupe-header-h);
	margin: 0 auto;
	padding: 15px 30px;
	box-sizing: border-box;
}
.drupe-mh-sol, .drupe-mh-orta, .drupe-mh-sag { flex: 1; display: flex; align-items: center; }
.drupe-mh-sol  { justify-content: flex-start; }
.drupe-mh-orta { justify-content: center; }
.drupe-mh-sag  { justify-content: flex-end; }

/* Logo (çift logo varsa şeffaf/koyu duruma göre geçiş yapar) */
.drupe-cift-logo-kapsayici { position: relative; display: block; width: 140px; height: 50px; }
.drupe-cift-logo-kapsayici img {
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%;
	object-fit: contain;
	transition: opacity 0.4s ease;
}
#drupe-master-header.drupe-home-page:not(.is-scrolled) .drupe-logo-renkli { opacity: 0 !important; }
#drupe-master-header.drupe-home-page:not(.is-scrolled) .drupe-logo-beyaz  { opacity: 1 !important; }
#drupe-master-header.is-scrolled .drupe-logo-beyaz,
#drupe-master-header.drupe-inner-page .drupe-logo-beyaz  { opacity: 0 !important; }
#drupe-master-header.is-scrolled .drupe-logo-renkli,
#drupe-master-header.drupe-inner-page .drupe-logo-renkli { opacity: 1 !important; }

/* İkonlar header'da her durumda beyaz */
#drupe-master-header .ozel-menu-ikon span { background-color: #fff !important; transition: background 0.4s; }
#drupe-master-header .drupe-sepet-ikon-buton svg { stroke: #fff !important; transition: stroke 0.4s; }
#drupe-master-header .drupe-sepet-sayi { background-color: #fff !important; color: var(--drupe-ana) !important; }
#drupe-master-header.drupe-home-page:not(.is-scrolled) .drupe-sepet-sayi { color: #111 !important; }

/* İç sayfalarda içerik sabit header'ın altında kalmasın */
body:not(.home) .site-main,
body:not(.home) #content { padding-top: var(--drupe-header-h) !important; }

@media (max-width: 768px) {
	.drupe-mh-container { padding: 10px 20px; }
	.drupe-cift-logo-kapsayici { width: 110px; height: 40px; }
}


/* ==========================================================================
   3. MENÜ VE SEPET PANELLERİ — inc/header.php + assets/js/drupe.js
   ========================================================================== */

/* Buton sıfırlama: Hello temasının genel <button> stili (pembe kenarlık, hover'da pembe zemin) bulaşmasın */
.ozel-menu-ikon, .drupe-sepet-ikon-buton, .ozel-menu-kapat, .drupe-sepet-kapat,
.drupe-spt-sil, .drp-adet-btn, button.ds-btn-gri, .drupe-iyzico-tekrar {
	-webkit-appearance: none;
	appearance: none;
	border: 0 !important;
	box-shadow: none !important;
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
	white-space: normal;
}
.ozel-menu-ikon, .drupe-sepet-ikon-buton, .ozel-menu-kapat, .drupe-sepet-kapat, .drupe-spt-sil,
.ozel-menu-ikon:hover, .drupe-sepet-ikon-buton:hover, .ozel-menu-kapat:hover, .drupe-sepet-kapat:hover, .drupe-spt-sil:hover,
.ozel-menu-ikon:focus, .drupe-sepet-ikon-buton:focus, .ozel-menu-kapat:focus, .drupe-sepet-kapat:focus, .drupe-spt-sil:focus {
	background: transparent !important;
	border-radius: 0;
}

/* Hamburger ikonu [drupe_menu] */
.ozel-menu-ikon {
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 36px;
	height: 26px;
	margin: 0;
	padding: 0 !important;
	z-index: 99;
}
.ozel-menu-ikon span { display: block; width: 100%; height: 4px; background: #111; border-radius: 4px; transition: 0.3s ease; }
.ozel-menu-ikon:hover span { background: var(--drupe-ana); }

/* Sepet ikonu [drupe_sepet] */
.drupe-sepet-ikon-buton {
	position: relative;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0 !important;
	line-height: 1;
	color: inherit !important;
	z-index: 99;
}
.drupe-sepet-sayi, .drupe-sepet-sayi-baslik {
	position: absolute;
	top: -8px;
	right: -12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--drupe-ana);
	color: #fff;
	font-size: 11px;
	font-weight: bold;
}
.drupe-sepet-sayi-baslik { position: relative; top: 0; right: 0; background: #000; margin-right: 10px; }

/* Karartma perdesi */
.ozel-menu-perde, .drupe-sepet-perde {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.5);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	z-index: 999998;
	opacity: 0;
	visibility: hidden;
	transition: all 0.4s ease;
	cursor: pointer;
}

/* Paneller. 100dvh: mobil tarayıcı çubuğu panelin altını (Ödeme butonunu) kapatmasın */
.ozel-menu-panel, .drupe-sepet-panel {
	position: fixed;
	top: 0;
	height: 100vh;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	background: #f9f9f9;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
	z-index: 999999;
}
.ozel-menu-panel {
	left: -420px;
	width: 350px;
	max-width: 85vw;
	padding: 50px 40px;
	background: #fff;
	overflow-y: auto;
	overscroll-behavior: contain;
	transition: left 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}
.drupe-sepet-panel {
	right: -450px;
	width: 400px;
	max-width: 90vw;
	overflow: hidden;
	transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}

/* Açık durumlar (drupe.js body'ye sınıf ekler) */
body.drupe-menu-acik .ozel-menu-panel   { left: 0 !important; }
body.drupe-sepet-acik .drupe-sepet-panel { right: 0 !important; }
body.drupe-menu-acik .ozel-menu-perde,
body.drupe-sepet-acik .drupe-sepet-perde { opacity: 1 !important; visibility: visible !important; }
body.drupe-scroll-kilitli { overflow: hidden !important; touch-action: none; }

/* Menü paneli içi */
.ozel-menu-kapat {
	position: absolute;
	top: 20px;
	right: 25px;
	padding: 0 !important;
	font-size: 40px;
	line-height: 1;
	color: #111 !important;
	cursor: pointer;
	transition: color 0.3s;
}
.ozel-menu-kapat:hover, .ozel-menu-kapat:focus { color: var(--drupe-ana) !important; }
.ozel-menu-logo-alani { margin-bottom: 40px; }
.ozel-menu-logo-alani h2 { margin: 0; color: var(--drupe-ana); font-weight: 800; }

.drupe-mobil-liste { list-style: none; margin: 0; padding: 0; }
.ozel-mobil-linkler a {
	display: block;
	padding: 15px 0;
	border-bottom: 1px solid #f0f0f0;
	font-size: 18px;
	font-weight: 600;
	color: #333;
	text-decoration: none;
	transition: all 0.3s ease;
}
.ozel-mobil-linkler a:hover { color: var(--drupe-ana); padding-left: 12px; border-bottom-color: var(--drupe-ana); }

/* Menü panelindeki ürün arama */
.drupe-menu-arama { margin-bottom: 20px; }
.drupe-menu-arama form,
.drupe-404-arama form { position: relative; display: flex; }
.drupe-menu-arama input[type="search"],
.drupe-404-arama input[type="search"] {
	flex: 1;
	width: 100%;
	padding: 12px 44px 12px 14px;
	border: 1px solid #ddd;
	border-radius: 30px;
	background: #fafafa;
	font-size: 15px;
}
.drupe-menu-arama input[type="search"]:focus,
.drupe-404-arama input[type="search"]:focus { border-color: var(--drupe-ana); outline: none; background: #fff; }
.drupe-menu-arama button[type="submit"],
.drupe-404-arama button[type="submit"] {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	padding: 6px 12px !important;
	border: 0 !important;
	border-radius: 30px !important;
	background: var(--drupe-ana) !important;
	color: #fff !important;
	font-size: 13px;
	cursor: pointer;
}
.drupe-menu-arama .screen-reader-text,
.drupe-404-arama .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

/* Sepet paneli başlığı */
.drupe-sepet-header {
	flex-shrink: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	background: var(--drupe-ana);
	color: #fff;
	font-size: 22px;
	font-weight: 600;
}
.ds-h-sol { display: flex; align-items: center; }
.drupe-sepet-kapat {
	padding: 0 !important;
	font-size: 32px;
	line-height: 1;
	color: inherit !important;
	cursor: pointer;
	transition: transform 0.3s;
}
.drupe-sepet-kapat:hover { transform: rotate(90deg); }


/* ==========================================================================
   4. SEPET ÜRÜN KARTLARI — inc/sepet.php
   ========================================================================== */
.drupe-sepet-ajax-alani { position: relative; flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; transition: opacity 0.2s; }
.drupe-sepet-ajax-alani.drupe-yukleniyor { opacity: 0.5; pointer-events: none; }
.drupe-sepet-bos { padding: 40px 20px; text-align: center; color: #777; font-size: 16px; }
.drupe-sepet-bos .ds-btn-odeme { display: inline-block; width: auto; margin-top: 10px; padding: 12px 28px; }

/* Kargo bedava çubuğu */
.drupe-kargo-cubugu { margin-bottom: 14px; text-align: left; }
.drupe-kargo-cubugu p { margin: 0 0 6px; font-size: 13px; color: #444; }
.drupe-kargo-cubugu strong { color: var(--drupe-ana); }
.drupe-kargo-iz { height: 6px; overflow: hidden; border-radius: 6px; background: #e8eeee; }
.drupe-kargo-iz span { display: block; height: 100%; border-radius: 6px; background: var(--drupe-ana); transition: width 0.4s ease; }
.drupe-kargo-tamam p { font-weight: 700; color: var(--drupe-ana); }

.drupe-urun-listesi { flex-grow: 1; padding: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateZ(0); }
.drupe-sepet-footer {
	flex-shrink: 0;
	z-index: 10;
	padding: 20px;
	background: #fff;
	border-top: 1px solid #eee;
	box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.03);
	text-align: center;
}

.drupe-spt-urun {
	position: relative;
	display: flex;
	margin-bottom: 15px;
	padding: 15px;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

/* Görsel: üzerine gelince yukarı kayar, arkasındaki varyasyon bilgisi görünür */
.drupe-spt-img-wrap { position: relative; width: 75px; min-width: 75px; height: 105px; margin-right: 15px; overflow: hidden; border-radius: 4px; background: #fff; }
.drupe-spt-img-arka {
	position: absolute; top: 0; left: 0; z-index: 1;
	display: flex; flex-direction: column; justify-content: center;
	width: 100%; height: 100%;
	padding: 8px 5px;
	box-sizing: border-box;
	overflow-y: auto;
	background: #fff;
	text-align: center;
}
.drupe-spt-img-arka dl.variation { margin: 0; padding: 0; font-size: 10px; line-height: 1.2; text-align: left; }
.drupe-spt-img-arka dl.variation dt { margin-top: 4px; margin-bottom: 1px; font-weight: 700; color: var(--drupe-ana); }
.drupe-spt-img-arka dl.variation dd { margin: 0; color: #444; font-size: 9px; }
.drupe-spt-img-arka dl.variation p { margin: 0; }
.drupe-spt-bos-arka { display: flex; height: 100%; align-items: center; justify-content: center; color: #ddd; font-weight: bold; font-size: 16px; }

.drupe-spt-img-on {
	position: absolute; top: 0; left: 0; z-index: 2;
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%;
	background: #fff;
	transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}
.drupe-spt-img-on img { width: 100%; height: 100%; object-fit: contain !important; object-position: center; }
.drupe-spt-urun:hover .drupe-spt-img-on { transform: translateY(-100%); }

.drupe-spt-detay { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; padding-right: 15px; }
.drupe-spt-baslik { margin: 0 0 5px 0; font-size: 15px; font-weight: 700; line-height: 1.2; color: #111; text-decoration: none; }
.drupe-spt-fiyat { margin: 0 0 5px 0; font-size: 14px; font-weight: 600; color: #555; }

.drupe-spt-sil {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 5px !important;
	font-size: 18px;
	line-height: 1;
	color: #999;
	cursor: pointer;
	transition: color 0.2s;
}
.drupe-spt-sil:hover { color: #d00; }

.drupe-spt-adet-alani { display: inline-flex; align-items: center; width: fit-content; margin-top: 5px; border: 1px solid #ddd; border-radius: 4px; background: #fff; }
.drp-adet-btn {
	padding: 2px 10px !important;
	border-radius: 4px !important;
	background: #fdfdfd !important;
	color: #555 !important;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.5;
	cursor: pointer;
	transition: 0.2s;
}
.drp-adet-btn:hover, .drp-adet-btn:focus { background: #eee !important; color: var(--drupe-ana) !important; }
.drp-adet-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.drp-adet-sayi { padding: 0 12px; font-size: 13px; font-weight: 600; color: #111; }

.drupe-spt-marka { margin-bottom: 15px; font-size: 18px; font-weight: 700; color: #333; }

.ds-btn-odeme {
	display: block;
	width: 100%;
	margin-bottom: 10px;
	padding: 15px;
	border-radius: 4px;
	background: var(--drupe-ana);
	color: #fff !important;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background 0.3s;
}
.ds-btn-odeme:hover { background: var(--drupe-ana-koyu); color: #fff; }
.drupe-sepet-footer .ds-btn-odeme * { color: #fff !important; } /* Fiyat rengi (bölüm 11) butonda beyaza dönsün */

.ds-btn-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; margin-bottom: 5px; }
.ds-btn-gri {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 10px !important;
	box-sizing: border-box;
	border-radius: 4px !important;
	background: var(--drupe-ana-ikincil) !important;
	color: #fff !important;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.3s;
}
.ds-btn-gri:hover, .ds-btn-gri:focus { background: var(--drupe-ana) !important; color: #fff !important; }


/* ==========================================================================
   5. YÜKLEME EKRANI (PRELOADER) — inc/anasayfa.php
   ========================================================================== */
#drupe-preloader {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	background: var(--drupe-zemin);
	transition: opacity 0.8s ease, visibility 0.8s ease;
}
#drupe-preloader.gizle { opacity: 0; visibility: hidden; }
.drupe-preloader-logo { width: 110px; height: auto; margin-bottom: 25px; animation: drupeNefes 2s infinite ease-in-out; }
.drupe-preloader-yazi { font-size: 15px; font-weight: 600; color: var(--drupe-ana); letter-spacing: 4px; text-transform: uppercase; opacity: 0.9; }
@keyframes drupeNefes {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.06); }
	100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.drupe-preloader-logo { animation: none; }
}


/* ==========================================================================
   6. ANA SAYFA HERO [drupe_ana_ekran] — inc/anasayfa.php + assets/hero/drupe-hero.js
   3D take-away bardak: sayfa kaydırıldıkça sahne ekrana sabitlenir; sticker'lar ekrana uçar,
   kahve dolar, kapak kapanır. Animasyonun hızı kaydırma mesafesidir: --drupe-hero-uzunluk
   (büyütünce yavaşlar, küçültünce hızlanır).
   ========================================================================== */

/* Ana sayfadaki kısa kod widget'larının Elementor boşluklarını sıfırla */
body.home .elementor-widget-shortcode { padding: 0 !important; margin: 0 !important; }

/* Sabitlenen sahne (position: sticky), üst kutulardan biri "overflow: hidden" ise çalışmaz.
   Elementor'da hero'yu taşıyan kutuların taşmasını açık bırak. */
.e-con:has(.drupe-hero),
.e-con-inner:has(.drupe-hero),
.elementor-section:has(.drupe-hero),
.elementor-container:has(.drupe-hero),
.elementor-column:has(.drupe-hero),
.elementor-widget-wrap:has(.drupe-hero),
.elementor-widget:has(.drupe-hero),
.elementor-widget-container:has(.drupe-hero) { overflow: visible !important; }

.drupe-hero {
	--drupe-hero-uzunluk: 260vh;                                   /* ekran + 1.6 ekran kaydırma */
	--drupe-hero-ust: var(--wp-admin--admin-bar--height, 0px);     /* yönetici çubuğu açıkken altına in */
	--drupe-hero-krem: #f6ead6;
	position: relative;
	/* Kutudan taşıp ekranın tam genişliğine yayıl */
	width: 100vw !important;
	max-width: 100vw !important;
	left: 50% !important;
	right: 50% !important;
	margin: 0 -50vw !important;
	height: var(--drupe-hero-uzunluk);
	background: #052a30;
}
.drupe-hero-sahne {
	position: sticky;
	top: var(--drupe-hero-ust);
	height: calc(100vh - var(--drupe-hero-ust));
	height: calc(100svh - var(--drupe-hero-ust)); /* svh: mobilde adres çubuğu hariç görünen alan */
	overflow: hidden;
	background: radial-gradient(120% 90% at 50% 56%, #13646d 0%, #0b4c55 36%, #083b42 62%, #052a30 100%);
	color: var(--drupe-hero-krem);
	-webkit-user-select: none;
	user-select: none;
}

/* Katmanlar: başlık (bardağın arkasında) → poster → 3D tuval → yazılar/buton */
.drupe-hero .drupe-hero-baslik {
	position: absolute;
	top: 46%;
	left: 0;
	right: 0;
	z-index: 1;
	margin: 0 !important;
	transform: translateY(-50%);
	color: var(--drupe-hero-krem) !important;
	font-family: inherit !important;
	font-size: clamp(56px, 11.2vw, 230px) !important;
	font-weight: 800 !important;
	line-height: 0.84 !important;
	letter-spacing: -0.01em !important;
	text-align: center;
	text-transform: uppercase;
	text-shadow: none !important;
	pointer-events: none;
	will-change: opacity, transform;
}
.drupe-hero .drupe-hero-baslik span { display: block; }

/* Animasyon hazır olana kadar (ve WebGL olmayan cihazlarda) bardağın sabit görüntüsü */
.drupe-hero-poster {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: var(--drupe-hero-poster) center / auto 100% no-repeat;
	pointer-events: none;
	transition: opacity 0.6s ease;
}
.drupe-hero--hazir .drupe-hero-poster { opacity: 0; }

.drupe-hero-tuval {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: block;
	width: 100%;
	height: 100%;
	outline: none;
	touch-action: pan-y; /* dikey kaydırma tarayıcıda kalır, yatay sürükleme bardağı çevirir */
	-webkit-tap-highlight-color: transparent;
}

.drupe-hero-alt {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 5vh;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 0 20px;
	text-align: center;
	pointer-events: none;
}
.drupe-hero .drupe-hero-altbaslik {
	max-width: 520px;
	margin: 0 !important;
	color: rgba(246, 234, 214, 0.82) !important;
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
	text-shadow: none !important;
}
.drupe-hero-ipuclari { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 14px 36px; }
.drupe-hero-ipucu {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: rgba(246, 234, 214, 0.7);
	transition: opacity 0.5s ease;
}
.drupe-hero-ipucu-cevir svg { width: 30px; height: 12px; animation: drupeHeroSalla 2.2s ease-in-out infinite; }
.drupe-hero-ipucu-dokun b { position: relative; width: 12px; height: 12px; border: 1.5px solid currentColor; border-radius: 50%; }
.drupe-hero-ipucu-dokun b::after { content: ""; position: absolute; inset: -1.5px; border: 1.5px solid currentColor; border-radius: 50%; animation: drupeHeroNabiz 1.8s ease-out infinite; }
.drupe-hero-ipucu-kaydir i { width: 1px; height: 36px; background: linear-gradient(rgba(246, 234, 214, 0.85), transparent); transform-origin: top; animation: drupeHeroDamla 1.8s ease-in-out infinite; }
@keyframes drupeHeroSalla { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
@keyframes drupeHeroNabiz { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes drupeHeroDamla { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* Sticker öne geldiğinde altta çıkan yazı */
.drupe-hero-odak-ipucu {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 6vh;
	z-index: 4;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.32em;
	text-align: center;
	text-transform: uppercase;
	color: rgba(246, 234, 214, 0.75);
	opacity: 0;
	pointer-events: none;
}

/* "Koleksiyonu Keşfet": animasyonun sonunda belirir (görünürlüğü drupe-hero.js yönetir) */
.drupe-hero-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 16px 40px !important;
	border-radius: 50px !important;
	background-color: #fff !important;
	color: var(--drupe-ana) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
	transition: all 0.3s ease !important;
}
.drupe-hero-btn:hover {
	background-color: var(--drupe-ana) !important;
	color: #fff !important;
	transform: translateY(-3px) !important;
	box-shadow: 0 15px 40px rgba(9, 68, 76, 0.5) !important;
}
.drupe-hero .drupe-hero-btn {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 7vh;
	z-index: 4;
	width: fit-content;
	margin: 0 auto !important; /* transform kullanmadan ortala: hover'daki yukarı kalkma bozulmasın */
	opacity: 0;
	pointer-events: none;
	/* görünürlük her karede JS'ten gelir; geçiş efekti sadece renk ve hover'a */
	transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease !important;
}
.drupe-hero .drupe-hero-btn:focus-visible { opacity: 1 !important; pointer-events: auto; }

/* Telefon ve dikey tablet: başlık bardağın üstünde, yazılar küçük. Sınır drupe-hero.js ile aynı (en/boy < 0.8) */
@media (max-aspect-ratio: 4/5) {
	.drupe-hero .drupe-hero-baslik { top: calc(var(--drupe-header-h) + 10vh); font-size: clamp(40px, 12.5vw, 110px) !important; }
	.drupe-hero-alt { bottom: 4vh; gap: 12px; }
	.drupe-hero .drupe-hero-altbaslik { max-width: 340px; font-size: 14px !important; }
	.drupe-hero-ipuclari { gap: 10px 22px; }
	.drupe-hero-ipucu { font-size: 10px; letter-spacing: 0.2em; }
}
/* Çok dar ekranlarda (çoğu telefon) kamera geri çekilir; poster de ona uygun dikey görsel */
@media (max-aspect-ratio: 137/250) {
	.drupe-hero-poster { background-image: var(--drupe-hero-poster-dikey); background-size: 100% auto; }
}

/* WebGL yoksa ya da "hareketi azalt" açıksa: sahne sabitlenmez, tek ekranlık hero; buton hep görünür */
.drupe-hero--statik,
.drupe-hero--sakin { height: auto; }
.drupe-hero--statik .drupe-hero-sahne,
.drupe-hero--sakin .drupe-hero-sahne { position: relative; top: 0; }
.drupe-hero--statik .drupe-hero-poster { opacity: 1; }
.drupe-hero--statik .drupe-hero-tuval { display: none; }
.drupe-hero--statik .drupe-hero-btn { opacity: 1; pointer-events: auto; }
/* buton en altta, alt yazı onun üstünde; sürükle/dokun/kaydır ipuçlarına bu modlarda gerek yok */
.drupe-hero--statik .drupe-hero-btn,
.drupe-hero--sakin .drupe-hero-btn { bottom: 4vh; }
.drupe-hero--statik .drupe-hero-alt,
.drupe-hero--sakin .drupe-hero-alt { bottom: calc(4vh + 70px); }
.drupe-hero--statik .drupe-hero-ipuclari,
.drupe-hero--sakin .drupe-hero-ipuclari { display: none; }
@media (prefers-reduced-motion: reduce) {
	.drupe-hero-ipucu svg, .drupe-hero-ipucu b::after, .drupe-hero-ipucu i { animation: none; }
}


/* ==========================================================================
   7. BLOG VİTRİNİ [drupe_blog_vitrin] — inc/anasayfa.php
   ========================================================================== */
.drupe-blog-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	max-width: 900px;
	margin: 40px auto 30px auto;
}
.drupe-blog-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.3s ease;
}
.drupe-blog-card:hover { box-shadow: 0 15px 40px rgba(9, 68, 76, 0.15); }

/* Görseller hep aynı boyutta */
.drupe-blog-img-wrapper {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	height: 260px !important;
	overflow: hidden !important;
	background: var(--drupe-ana-acik);
}
.drupe-blog-img-wrapper.drupe-blog-img-yok { background: var(--drupe-ana); }
.drupe-blog-img {
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	object-fit: cover !important;
	object-position: center !important;
	transition: transform 0.5s ease !important;
}
.drupe-blog-card:hover .drupe-blog-img { transform: scale(1.04) !important; }

.drupe-blog-icerik { flex-grow: 1; display: flex; flex-direction: column; padding: 25px; }
.drupe-blog-tarih { margin-bottom: 10px; font-size: 13px; font-weight: 500; color: #888; text-transform: uppercase; letter-spacing: 1px; }
.drupe-blog-baslik { margin: 0 0 15px 0; font-size: 20px; font-weight: 700; line-height: 1.4; }
.drupe-blog-baslik a { color: #111; text-decoration: none; transition: color 0.2s; }
.drupe-blog-baslik a:hover { color: var(--drupe-ana); }
.drupe-blog-ozet { flex-grow: 1; margin-bottom: 25px; font-size: 15px; line-height: 1.6; color: #666; }
.drupe-blog-btn {
	display: inline-block;
	margin-top: auto;
	padding: 12px 24px;
	border-radius: 6px;
	background-color: var(--drupe-ana);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background 0.3s;
}
.drupe-blog-btn:hover { background-color: var(--drupe-ana-koyu); color: #fff; }
.drupe-blog-bos { grid-column: 1 / -1; text-align: center; }

.drupe-tum-yazilar-alani { margin-bottom: 40px; text-align: center; }
.drupe-tum-yazilar-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 25px;
	border: 2px solid var(--drupe-ana);
	border-radius: 30px;
	background-color: transparent;
	color: var(--drupe-ana);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.3s ease;
}
.drupe-tum-yazilar-btn:hover { background-color: var(--drupe-ana); color: #fff; }
.drupe-tum-yazilar-btn svg { width: 18px; height: 18px; margin-left: 8px; transition: transform 0.3s ease; }
.drupe-tum-yazilar-btn:hover svg { transform: translateX(5px); }

@media (max-width: 768px) {
	.drupe-blog-grid { grid-template-columns: 1fr; gap: 20px; }
	.drupe-blog-img-wrapper { height: 220px !important; }
	.drupe-blog-card:nth-child(n+2) { display: none !important; } /* Mobilde tek kart */
}


/* ==========================================================================
   8. TEKİL BLOG YAZISI
   (Eskiden hem functions.php'de hem Ek CSS'te birbirini ezen iki ayrı kopya vardı;
    burada sitede fiilen görünen değerler tek kopya olarak duruyor.)
   ========================================================================== */
body.single-post main#content {
	max-width: 800px !important;
	margin: 0 auto !important;
	padding: var(--drupe-header-h) 20px 20px !important;
}
body.single-post .page-content {
	max-width: 800px !important;
	margin: 50px auto !important;
	padding: 0 20px !important;
}
body.single-post h1.entry-title,
body.single-post .page-header h1 {
	margin-top: 40px !important;
	margin-bottom: 25px !important;
	color: var(--drupe-ana) !important;
	font-size: clamp(30px, 7vw, 46px) !important; /* Masaüstünde 46px, mobilde küçülür */
	font-weight: 800 !important;
	line-height: 1.2 !important;
	text-align: center !important;
}
body.single-post .page-content p,
body.single-post .page-content li {
	margin-bottom: 25px !important;
	font-size: 20px !important;
	line-height: 1.8 !important;
	color: #2b2b2b !important;
}
body.single-post .page-content h2,
body.single-post .page-content h3 {
	margin-top: 50px !important;
	margin-bottom: 20px !important;
	color: var(--drupe-ana) !important;
	font-weight: 700 !important;
}
body.single-post .page-content a {
	color: var(--drupe-ana) !important;
	font-weight: 600 !important;
	text-decoration: underline !important;
	text-decoration-color: rgba(9, 68, 76, 0.3) !important;
	transition: text-decoration-color 0.3s;
}
body.single-post .page-content a:hover { text-decoration-color: var(--drupe-ana) !important; }
body.single-post .page-content blockquote {
	margin: 40px 0 !important;
	padding: 25px 30px !important;
	border-left: 5px solid var(--drupe-ana) !important;
	border-radius: 0 10px 10px 0 !important;
	background: var(--drupe-ana-acik) !important;
	color: #444 !important;
	font-size: 22px !important;
	font-style: italic !important;
}


/* ==========================================================================
   9. BLOG ARŞİVİ (/blog, yazı kategorileri, arama)
   Eskiden mağaza sayfalarına da sızıyordu; artık WooCommerce sayfaları hariç.
   ========================================================================== */
body:is(.blog, .archive, .search):not(.woocommerce) :is(header.page-header, h1.page-title, .archive-title, .elementor-page-title, .page-description) {
	display: none !important;
}
body:is(.blog, .archive, .search):not(.woocommerce) main.site-main {
	max-width: 850px !important;
	margin: 60px auto !important;
	padding: var(--drupe-header-h) 25px 0 !important;
}
body:is(.blog, .archive, .search):not(.woocommerce) main.site-main article {
	overflow: hidden;
	margin-bottom: 40px !important;
	padding: 35px 40px !important;
	border-left: 5px solid var(--drupe-ana) !important;
	border-radius: 12px !important;
	background: #fff !important;
	box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05) !important;
	transition: transform 0.3s ease !important;
}
body:is(.blog, .archive, .search):not(.woocommerce) main.site-main article:hover { transform: translateX(5px) !important; }

body:is(.blog, .archive, .search):not(.woocommerce) main.site-main article .post-thumbnail {
	display: block;
	overflow: hidden;
	margin: -35px -40px 25px -40px !important;
}
body:is(.blog, .archive, .search):not(.woocommerce) main.site-main article .post-thumbnail img {
	display: block;
	width: 100% !important;
	height: 350px !important;
	border-radius: 12px 12px 0 0 !important;
	object-fit: cover !important;
	object-position: center !important;
	transition: transform 0.5s ease;
}
body:is(.blog, .archive, .search):not(.woocommerce) main.site-main article:hover .post-thumbnail img { transform: scale(1.03); }

body:is(.blog, .archive, .search):not(.woocommerce) main.site-main article h2.entry-title {
	margin-top: 0 !important;
	margin-bottom: 15px !important;
	font-size: 28px !important;
	font-weight: 800 !important;
	line-height: 1.3 !important;
}
body:is(.blog, .archive, .search):not(.woocommerce) main.site-main article h2.entry-title a {
	color: var(--drupe-ana) !important;
	text-decoration: none !important;
	transition: color 0.3s ease !important;
}
body:is(.blog, .archive, .search):not(.woocommerce) main.site-main article h2.entry-title a:hover { color: #111 !important; }
body:is(.blog, .archive, .search):not(.woocommerce) main.site-main article :is(.entry-content, .entry-summary) {
	font-size: 17px !important;
	line-height: 1.8 !important;
	color: #555 !important;
}
body:is(.blog, .archive, .search):not(.woocommerce) main.site-main article .entry-content a.more-link {
	display: inline-block !important;
	margin-top: 20px !important;
	padding: 10px 24px !important;
	border-radius: 6px !important;
	background-color: var(--drupe-ana) !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: background 0.3s ease !important;
}
body:is(.blog, .archive, .search):not(.woocommerce) main.site-main article .entry-content a.more-link:hover { background-color: var(--drupe-ana-koyu) !important; }

@media (max-width: 768px) {
	body:is(.blog, .archive, .search):not(.woocommerce) main.site-main article { padding: 25px !important; border-left-width: 4px !important; }
	body:is(.blog, .archive, .search):not(.woocommerce) main.site-main article h2.entry-title { font-size: 22px !important; }
	body:is(.blog, .archive, .search):not(.woocommerce) main.site-main article .post-thumbnail { margin: -25px -25px 20px -25px !important; }
	body:is(.blog, .archive, .search):not(.woocommerce) main.site-main article .post-thumbnail img { height: 220px !important; }
}


/* ==========================================================================
   10. MAĞAZA ARŞİVLERİ (shop, ürün kategorileri)
   Mevcut görünüm korundu (850px genişlik, gizli başlık); tek fark: breadcrumb artık header'ın altında kalmıyor.
   ========================================================================== */
body.woocommerce.archive :is(h1.page-title, .page-description) { display: none !important; }
body.woocommerce.archive main#main {
	max-width: 850px !important;
	margin: 0 auto 60px !important;
	padding: calc(var(--drupe-header-h) + 25px) 25px 0 !important;
}


/* ==========================================================================
   11. ÜRÜN ADI VE FİYAT RENKLERİ (her yerde)
   ========================================================================== */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3,
.wc-block-grid__product-title,
[class*="product-title"],
[class*="ProductTitle"],
.elementor-widget-woocommerce-products h2 {
	color: #111 !important;
	font-family: var(--drupe-font-vurgu) !important;
	font-weight: 700 !important;
	transition: color 0.3s ease !important;
}
.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title,
.woocommerce ul.products li.product a:hover h2,
.woocommerce ul.products li.product a:hover h3,
.wc-block-grid__product-link:hover .wc-block-grid__product-title,
a:hover [class*="product-title"] {
	color: var(--drupe-ana) !important;
}

/* Tekil ürün sayfası başlığı */
.woocommerce div.product .product_title {
	color: #111 !important;
	font-family: var(--drupe-font-vurgu) !important;
	font-weight: 800 !important;
}

/* Fiyatlar. Eskiden [class*="price"] ile adında "price" geçen HER elemana uygulanıyordu; artık sadece fiyatlara. */
.price,
.woocommerce-Price-amount,
[class*="product-price"],
.wc-block-grid__product-price,
.wc-block-components-product-price,
.elementor-widget-woocommerce-products .price {
	color: var(--drupe-ana) !important;
	font-family: var(--drupe-font-vurgu) !important;
	font-weight: 700 !important;
}
/* İndirimli ürünün eski fiyatı gri */
.price del .amount,
.price del .woocommerce-Price-amount,
del .woocommerce-Price-amount,
.wc-block-grid__product-price del .amount {
	color: #999 !important;
	font-weight: 500 !important;
}


/* ==========================================================================
   12. KATEGORİ KARTLARI (mağaza sayfaları)
   ========================================================================== */
body.woocommerce ul.products li.product-category h2,
body.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
	padding-top: 15px !important;
	background: transparent !important;
	color: #111 !important;
	font-family: var(--drupe-font-vurgu) !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	text-align: center !important;
	transition: color 0.3s ease !important;
}
body.woocommerce ul.products li.product-category a:hover h2,
body.woocommerce ul.products li.product-category a:hover .woocommerce-loop-category__title { color: var(--drupe-ana) !important; }

/* Kategori görselleri kare */
body.woocommerce ul.products li.product-category img {
	width: 100% !important;
	aspect-ratio: 1 / 1 !important;
	margin: 0 auto !important;
	border-radius: 12px !important;
	object-fit: cover !important;
	box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05) !important;
	transition: transform 0.4s ease, box-shadow 0.4s ease !important;
}
body.woocommerce ul.products li.product-category a:hover img {
	transform: translateY(-8px) !important;
	box-shadow: 0 15px 35px rgba(9, 68, 76, 0.15) !important;
}


/* ==========================================================================
   12b. ÜRÜN KARTLARINDA HİZALAMA + "STOKTA YOK"
   Uzun ürün adı iki satıra inince o kartın butonu aşağı kayıyordu. Çözüm iki parça:
   - Ürün adına her zaman 2 satırlık yer ayrılır (kısa adlar da aynı yüksekliği kaplar → fiyatlar hizalı)
   - Kartlar aynı satırda eşit boyda; buton kartın en altına yapışık (3 satırlık ad olsa bile butonlar hizalı)
   ========================================================================== */

/* Mağaza, kategori ve ilgili ürünler (WooCommerce'in kendi listesi) */
.woocommerce ul.products {
	display: flex !important;
	flex-wrap: wrap !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none !important; }
.woocommerce ul.products li.product {
	display: flex !important;
	flex-direction: column !important;
	float: none !important;
}
.woocommerce ul.products li.product > .button { margin-top: auto !important; align-self: flex-start; }
/* "Sepeti görüntüle" linki gereksiz (ürün eklenince sepet paneli açılıyor) ve butonu yukarı itiyordu */
.woocommerce ul.products li.product a.added_to_cart,
.drupe-yatay-vitrin li.product a.added_to_cart { display: none !important; }
@media (max-width: 768px) {
	.woocommerce ul.products { justify-content: space-between !important; }
}

/* Ana sayfadaki yatay vitrin (Premium Addons kartı) */
.drupe-yatay-vitrin li.product > .premium-woo-product-wrapper,
.drupe-yatay-vitrin .premium-woo-products-details-wrap {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
}
.drupe-yatay-vitrin .premium-woo-atc-button { margin-top: auto !important; }

/* Ürün adı: 2 satırlık sabit alan */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.drupe-yatay-vitrin li.product .woocommerce-loop-product__title {
	line-height: 1.2 !important;
	min-height: 2.4em !important;
}

/* Stokta olmayan ürünün butonu (inc/woocommerce.php "Stokta yok" yazar) */
a.button.drupe-stokta-yok,
.woocommerce a.button.drupe-stokta-yok,
.drupe-yatay-vitrin a.button.drupe-stokta-yok {
	background: #ece7df !important;
	color: #7a7a7a !important;
	border-color: #ece7df !important;
	box-shadow: none !important;
}
a.button.drupe-stokta-yok:hover { background: #e3ddd3 !important; color: #555 !important; }


/* ==========================================================================
   13. YATAY ÜRÜN VİTRİNİ — Elementor'da widget'a "drupe-yatay-vitrin" sınıfı verilen yerde
   Masaüstü 4, tablet 3, mobil 2 ürün; yana kaydırılır.
   ========================================================================== */
.drupe-yatay-vitrin .woocommerce ul.products,
.drupe-yatay-vitrin ul.products,
.drupe-yatay-vitrin .wc-block-grid__products,
.drupe-yatay-vitrin .elementor-widget-container > ul {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important; /* Kartlar aynı boyda */
	gap: 20px !important;
	margin: 0 !important;
	padding-bottom: 15px !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	-webkit-overflow-scrolling: touch !important;
	scroll-snap-type: x mandatory !important;
	scrollbar-width: thin !important;
	scrollbar-color: var(--drupe-ana) var(--drupe-ana-acik) !important;
}

.drupe-yatay-vitrin .woocommerce ul.products li.product,
.drupe-yatay-vitrin ul.products li.product,
.drupe-yatay-vitrin .wc-block-grid__products li.wc-block-grid__product,
.drupe-yatay-vitrin .elementor-widget-container > ul > li {
	flex: 0 0 auto !important;
	width: calc(25% - 15px) !important;
	max-width: none !important;
	height: auto !important;
	margin-bottom: 0 !important;
	clear: none !important;
	scroll-snap-align: start !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-start !important;
}

/* Sepete ekle butonu kartın en altında, yazı tam ortada */
.drupe-yatay-vitrin .woocommerce ul.products li.product .button,
.drupe-yatay-vitrin ul.products li.product .button,
.drupe-yatay-vitrin .wc-block-grid__products li.wc-block-grid__product .wp-block-button__link,
.drupe-yatay-vitrin .elementor-widget-container > ul > li .button,
.drupe-yatay-vitrin .woocommerce ul.products li.product .add_to_cart_button {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: 100% !important;
	margin-top: auto !important;
	padding-left: 10px !important;
	padding-right: 10px !important;
	box-sizing: border-box !important;
	text-align: center !important;
}
/* Yazıyı sağa iten WooCommerce ikonu */
.drupe-yatay-vitrin .woocommerce ul.products li.product .button::after,
.drupe-yatay-vitrin .woocommerce ul.products li.product .button::before {
	display: none !important;
	margin: 0 !important;
	content: none !important;
}

.drupe-yatay-vitrin .woocommerce ul.products li.product .price,
.drupe-yatay-vitrin ul.products li.product .price,
.drupe-yatay-vitrin .wc-block-grid__product-price {
	margin-bottom: 15px !important;
	text-align: center !important;
}
.drupe-yatay-vitrin .woocommerce ul.products li.product .woocommerce-loop-product__title,
.drupe-yatay-vitrin ul.products li.product .woocommerce-loop-product__title {
	text-align: center !important;
}

/* Yedek: JavaScript çalışmazsa tarayıcının kendi kaydırma çubuğu (Chrome/Safari) */
.drupe-yatay-vitrin ul.products::-webkit-scrollbar,
.drupe-yatay-vitrin .wc-block-grid__products::-webkit-scrollbar { display: block !important; height: 8px !important; -webkit-appearance: none !important; }
.drupe-yatay-vitrin ul.products::-webkit-scrollbar-track,
.drupe-yatay-vitrin .wc-block-grid__products::-webkit-scrollbar-track { background: var(--drupe-ana-acik) !important; border-radius: 10px !important; }
.drupe-yatay-vitrin ul.products::-webkit-scrollbar-thumb,
.drupe-yatay-vitrin .wc-block-grid__products::-webkit-scrollbar-thumb { background: var(--drupe-ana) !important; border-radius: 10px !important; }

/* Drupe kaydırma göstergesi (drupe.js ekler): her cihazda hep görünür oklar + çubuk.
   iPhone ve Mac kendi kaydırma çubuğunu dokununcaya kadar gizlediği için tarayıcınınki gizlenip bu kullanılıyor. */
.drupe-kaydirilabilir ul.products,
.drupe-kaydirilabilir .wc-block-grid__products,
.drupe-kaydirilabilir .elementor-widget-container > ul {
	scrollbar-width: none !important;
	padding-bottom: 6px !important;
	/* Kenarlar hafifçe silikleşir: "devamı var" hissi */
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 56px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 56px), transparent 100%);
}
.drupe-kaydirilabilir.drupe-kaydir-basta ul.products,
.drupe-kaydirilabilir.drupe-kaydir-basta .wc-block-grid__products {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent 100%);
	mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent 100%);
}
.drupe-kaydirilabilir.drupe-kaydir-sonda ul.products,
.drupe-kaydirilabilir.drupe-kaydir-sonda .wc-block-grid__products {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px);
	mask-image: linear-gradient(to right, transparent 0, #000 28px);
}
.drupe-kaydirilabilir.drupe-kaydir-basta.drupe-kaydir-sonda ul.products { -webkit-mask-image: none; mask-image: none; }
.drupe-kaydirilabilir ul.products::-webkit-scrollbar,
.drupe-kaydirilabilir .wc-block-grid__products::-webkit-scrollbar { display: none !important; }
.drupe-kaydir-serbest ul.products,
.drupe-kaydir-serbest .wc-block-grid__products { scroll-snap-type: none !important; }

.drupe-kaydir {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 18px auto 0;
	padding: 0 8px;
	max-width: 420px;
}
.drupe-kaydir[hidden] { display: none; }
.drupe-kaydir-ok {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0 !important;
	border: 2px solid var(--drupe-ana) !important;
	border-radius: 50% !important;
	background: #fff !important;
	color: var(--drupe-ana) !important;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(9, 68, 76, 0.12) !important;
	transition: background 0.2s, color 0.2s, opacity 0.2s, transform 0.2s;
}
.drupe-kaydir-ok:hover:not(:disabled),
.drupe-kaydir-ok:focus-visible { background: var(--drupe-ana) !important; color: #fff !important; transform: scale(1.06); }
.drupe-kaydir-ok:disabled { opacity: 0.3; cursor: default; box-shadow: none !important; }
.drupe-kaydir-iz {
	position: relative;
	flex: 1 1 auto;
	height: 8px;
	border-radius: 8px;
	background: rgba(9, 68, 76, 0.14);
	cursor: pointer;
	touch-action: none;
}
.drupe-kaydir-iz::before { content: ""; position: absolute; inset: -12px 0; } /* Parmakla tutması kolay olsun */
.drupe-kaydir-tutamac {
	position: absolute;
	top: 0;
	height: 100%;
	border-radius: 8px;
	background: var(--drupe-ana);
	transition: width 0.2s;
}

@media (max-width: 1024px) {
	.drupe-yatay-vitrin .woocommerce ul.products li.product,
	.drupe-yatay-vitrin ul.products li.product,
	.drupe-yatay-vitrin .wc-block-grid__products li.wc-block-grid__product,
	.drupe-yatay-vitrin .elementor-widget-container > ul > li { width: calc(33.333% - 14px) !important; }
}
@media (max-width: 768px) {
	.drupe-yatay-vitrin .woocommerce ul.products li.product,
	.drupe-yatay-vitrin ul.products li.product,
	.drupe-yatay-vitrin .wc-block-grid__products li.wc-block-grid__product,
	.drupe-yatay-vitrin .elementor-widget-container > ul > li { width: 46% !important; }
}


/* ==========================================================================
   14. PREMIUM ADDONS ÜRÜN LİNKLERİ (alt çizgi olmasın)
   ========================================================================== */
.elementor-widget-premium-woo-products a,
.elementor-widget-premium-woo-products a:hover {
	text-decoration: none !important;
	border-bottom: none !important;
	box-shadow: none !important;
}


/* ==========================================================================
   15. FORMLAR — inc/formlar.php
   ========================================================================== */

/* Ortak: mesaj kutuları, alan hataları, bot tuzağı */
.drupe-form-mesaj { max-width: 900px; margin: 0 auto 20px; padding: 20px; border-radius: 8px; font-weight: bold; text-align: center; }
.drupe-form-basari { background: #e8f4e5; color: #2b542c; }
.drupe-form-hata { background: #f9e5e6; color: #a94442; }
.drupe-form-hata a { color: inherit; text-decoration: underline; }
.drupe-form-alan-hata { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; color: #a94442; }
.drupe-kariyer-formu [aria-invalid="true"],
.drp-form-alani [aria-invalid="true"] { border-color: #a94442 !important; }
.drupe-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Kariyer formu (kahverengi) */
.drupe-kariyer-formu { max-width: 800px; margin: 0 auto; padding: 30px; border-radius: 10px; background: #fff; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); }
.drupe-kariyer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.drupe-kariyer-tam { grid-column: 1 / -1; margin-bottom: 20px; }
.drupe-kariyer-formu label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: #333; }
.drupe-kariyer-formu input,
.drupe-kariyer-formu select,
.drupe-kariyer-formu textarea {
	width: 100%;
	padding: 12px 15px;
	border: 1px solid #ddd;
	border-radius: 6px;
	background: #fdfdfd;
	font-size: 15px;
	transition: border-color 0.3s;
}
.drupe-kariyer-formu input:focus,
.drupe-kariyer-formu select:focus,
.drupe-kariyer-formu textarea:focus { border-color: var(--drupe-kahve); outline: none; background: #fff; }
.drupe-kariyer-formu textarea { height: 120px; resize: vertical; }
.drupe-kariyer-btn {
	width: 100%;
	padding: 15px 30px;
	border: none;
	border-radius: 6px;
	background: var(--drupe-kahve);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.3s;
}
.drupe-kariyer-btn:hover, .drupe-kariyer-btn:focus { background: var(--drupe-kahve-koyu); color: #fff; }

/* Toptan (B2B) formu + iletişim kartı */
.drp-b2b-container {
	display: grid;
	grid-template-columns: 1fr 2fr;
	max-width: 950px;
	margin: 0 auto;
	overflow: hidden;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}
.drp-iletisim-kutu { display: flex; flex-direction: column; justify-content: center; padding: 40px 35px; background: var(--drupe-ana); color: #fff; }
.drp-iletisim-kutu h3 { margin-top: 0; margin-bottom: 30px; color: #fff !important; font-size: 26px; font-weight: 700; line-height: 1.3; }
.drp-iletisim-item { margin-bottom: 25px; }
.drp-iletisim-item h4 { margin: 0 0 8px 0; color: rgba(255, 255, 255, 0.6) !important; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.drp-iletisim-item p,
.drp-iletisim-item a { margin: 0; color: #fff; font-size: 16px; font-weight: 500; line-height: 1.6; text-decoration: none; transition: opacity 0.3s; }
.drp-iletisim-item a:hover { opacity: 0.8; }

.drp-form-alani { padding: 40px 35px; }
.drp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.drp-tam { grid-column: 1 / -1; margin-bottom: 20px; }
.drp-form-alani label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: #444; }
.drp-form-alani input,
.drp-form-alani select,
.drp-form-alani textarea {
	width: 100%;
	padding: 12px 15px;
	border: 1px solid #ddd;
	border-radius: 6px;
	background: #fdfdfd;
	font-size: 15px;
	transition: border-color 0.3s;
}
.drp-form-alani input:focus,
.drp-form-alani select:focus,
.drp-form-alani textarea:focus { border-color: var(--drupe-ana); outline: none; background: #fff; }
.drp-form-alani textarea { height: 100px; }
.drp-btn {
	width: 100%;
	padding: 15px;
	border: none;
	border-radius: 6px;
	background: var(--drupe-ana);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.3s;
}
.drp-btn:hover, .drp-btn:focus { background: var(--drupe-ana-koyu); color: #fff; }

@media (max-width: 768px) {
	.drupe-kariyer-grid,
	.drp-grid,
	.drp-b2b-container { grid-template-columns: 1fr; }
	.drp-iletisim-kutu { padding: 40px 25px; text-align: center; }
	.drp-form-alani { padding: 30px 25px; }
}


/* ==========================================================================
   16. ÖDEME EKRANI PERDELERİ (iyzico) — inc/iyzico.php + assets/js/drupe-odeme.js
   ========================================================================== */
.drupe-odeme-perde {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	background: #fdfdfd;
	transition: opacity 0.5s ease;
}
.drupe-odeme-perde--yari { background: rgba(253, 253, 253, 0.9); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.drupe-odeme-loader {
	width: 50px;
	height: 50px;
	margin-bottom: 20px;
	border: 4px solid var(--drupe-ana-acik);
	border-top: 4px solid var(--drupe-ana);
	border-radius: 50%;
	animation: drupeDon 1s linear infinite;
}
.drupe-odeme-yazi {
	padding: 0 20px;
	color: var(--drupe-ana);
	font-family: var(--drupe-font-vurgu), Arial;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 1px;
	text-align: center;
}
.drupe-odeme-alt { display: block; margin-top: 8px; color: #666; font-size: 13px; font-weight: 400; }
.drupe-iyzico-tekrar,
.drupe-iyzico-sepet {
	display: inline-block;
	margin: 12px 6px 0;
	padding: 0 !important;
	background: transparent !important;
	color: var(--drupe-ana) !important;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}
@keyframes drupeDon {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}


/* ==========================================================================
   17. YARDIMCILAR
   ========================================================================== */

/* Sadece ekran okuyucunun duyacağı metin */
.drupe-sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Klavye ile gezinirken odak halkası görünsün */
.ozel-menu-ikon:focus-visible,
.drupe-sepet-ikon-buton:focus-visible,
.ozel-menu-kapat:focus-visible,
.drupe-sepet-kapat:focus-visible,
.drupe-spt-sil:focus-visible,
.drp-adet-btn:focus-visible,
.ds-btn-gri:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 3px;
}
#drupe-master-header :focus-visible { outline-color: #fff !important; }


/* ==========================================================================
   18. FORMLARDA ONAY KUTUSU (KVKK)
   ========================================================================== */
.drupe-onay { display: flex !important; align-items: flex-start; gap: 10px; font-weight: 400 !important; font-size: 13px !important; line-height: 1.5; color: #555 !important; cursor: pointer; }
.drupe-onay input[type="checkbox"] { flex: 0 0 auto; width: 18px !important; height: 18px; margin: 2px 0 0 !important; padding: 0 !important; accent-color: var(--drupe-ana); }
.drupe-onay a { color: var(--drupe-ana); text-decoration: underline; }
.drupe-kariyer-formu .drupe-onay input[type="checkbox"] { accent-color: var(--drupe-kahve); }


/* ==========================================================================
   19. ETKİNLİK FORMU [drupe_etkinlik_formu] — inc/etkinlik.php
   ========================================================================== */
.drupe-etkinlik { max-width: 1040px; margin: 0 auto; }
.drupe-etkinlik-kart {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	overflow: hidden;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 12px 40px rgba(9, 68, 76, 0.10);
}
.drupe-etkinlik-gorsel { position: relative; min-height: 320px; background: var(--drupe-ana); }
.drupe-etkinlik-gorsel img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; }
.drupe-etkinlik-icerik { padding: 40px 38px; }
.drupe-etkinlik-etiket {
	display: inline-block;
	margin-bottom: 12px;
	padding: 5px 12px;
	border-radius: 30px;
	background: var(--drupe-ana-acik);
	color: var(--drupe-ana);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}
.drupe-etkinlik-baslik { margin: 0 0 10px !important; color: var(--drupe-ana) !important; font-size: clamp(28px, 4vw, 38px) !important; font-weight: 800 !important; line-height: 1.15 !important; }
.drupe-etkinlik-alt { margin: 0 0 8px; color: #555; font-size: 16px; line-height: 1.6; }
.drupe-etkinlik-detay { margin: 0 0 22px; color: var(--drupe-ana); font-size: 15px; font-weight: 700; }
.drupe-etkinlik-form { margin-top: 22px; }
.drupe-etkinlik-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.drupe-etkinlik-tam { margin-bottom: 16px; }
.drupe-etkinlik-form label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: #444; }
.drupe-etkinlik-form input:not([type="checkbox"]),
.drupe-etkinlik-form textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid #ddd;
	border-radius: 8px;
	background: #fdfdfd;
	font-size: 15px;
	transition: border-color 0.3s;
}
.drupe-etkinlik-form input:focus,
.drupe-etkinlik-form textarea:focus { border-color: var(--drupe-ana); outline: none; background: #fff; }
.drupe-etkinlik-form textarea { height: 90px; resize: vertical; }
.drupe-etkinlik-form [aria-invalid="true"] { border-color: #a94442 !important; }
.drupe-etkinlik-btn {
	width: 100%;
	padding: 15px;
	border: none !important;
	border-radius: 8px !important;
	background: var(--drupe-ana) !important;
	color: #fff !important;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.3s;
}
.drupe-etkinlik-btn:hover, .drupe-etkinlik-btn:focus { background: var(--drupe-ana-koyu) !important; color: #fff !important; }
@media (max-width: 768px) {
	.drupe-etkinlik-kart { grid-template-columns: 1fr; }
	.drupe-etkinlik-gorsel { min-height: 220px; }
	.drupe-etkinlik-icerik { padding: 28px 22px; }
	.drupe-etkinlik-grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   20. ÇEREZ BANDI — inc/yasal.php
   ========================================================================== */
.drupe-cerez {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 999995;
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 420px;
	padding: 20px 22px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
	color: #333;
	font-size: 14px;
	line-height: 1.55;
}
.drupe-cerez[hidden] { display: none; }
.drupe-cerez-metin { margin: 0; }
.drupe-cerez-metin a { color: var(--drupe-ana); font-weight: 600; text-decoration: underline; }
.drupe-cerez-butonlar { display: flex; gap: 10px; }
.drupe-cerez-btn {
	flex: 1;
	padding: 11px 14px !important;
	border: 2px solid var(--drupe-ana) !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	cursor: pointer;
	white-space: nowrap;
}
.drupe-cerez-reddet, .drupe-cerez-reddet:hover, .drupe-cerez-reddet:focus { background: #fff !important; color: var(--drupe-ana) !important; }
.drupe-cerez-kabul, .drupe-cerez-kabul:hover, .drupe-cerez-kabul:focus { background: var(--drupe-ana) !important; color: #fff !important; }
@media (max-width: 600px) {
	.drupe-cerez { left: 10px; right: 10px; bottom: 10px; max-width: none; }
}


/* ==========================================================================
   21. WHATSAPP BUTONU — inc/genel.php
   ========================================================================== */
.drupe-whatsapp {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 999980;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px 12px 14px;
	border-radius: 40px;
	background: #25d366;
	color: #fff !important;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
	transition: transform 0.2s, bottom 0.3s;
}
.drupe-whatsapp:hover { transform: translateY(-2px); color: #fff !important; }
@media (max-width: 600px) {
	.drupe-whatsapp { right: 14px; bottom: 14px; padding: 13px; }
	.drupe-whatsapp-yazi { display: none; }
	/* Mobilde çerez bandı alttayken onun üstünde dursun */
	body.drupe-cerez-acik .drupe-whatsapp { bottom: calc(var(--drupe-cerez-h) + 22px); }
}
/* Menü/sepet açıkken gizle */
body.drupe-scroll-kilitli .drupe-whatsapp { opacity: 0; pointer-events: none; }


/* ==========================================================================
   22. ÖDEME SAYFASI: SÖZLEŞMELER, KURUMSAL FATURA, HATIRLATMA İZNİ
   ========================================================================== */
.drupe-sozlesmeler { margin: 0 0 14px; }
.drupe-sozlesme { margin-bottom: 8px; border: 1px solid #e5e0d8; border-radius: 8px; background: #fff; }
.drupe-sozlesme summary { padding: 10px 14px; font-weight: 600; color: var(--drupe-ana); cursor: pointer; }
.drupe-sozlesme-metin { max-height: 260px; overflow-y: auto; padding: 0 14px 12px; font-size: 13px; line-height: 1.55; color: #444; }
.drupe-kurumsal-alan .optional { display: none; }
.drupe-kurumsal-alan label::after { content: " *"; color: #a94442; }
.drupe-hatirlat label { font-size: 13px; color: #555; }


/* ==========================================================================
   23. KARGO BİLGİSİ (Hesabım > Sipariş) ve REÇETE SEKMESİ (ürün sayfası)
   ========================================================================== */
.drupe-kargo-bilgisi { margin: 24px 0; padding: 16px 18px; border-left: 4px solid var(--drupe-ana); border-radius: 0 8px 8px 0; background: var(--drupe-ana-acik); }
.drupe-kargo-bilgisi h2 { margin: 0 0 6px; font-size: 18px; color: var(--drupe-ana); }
.drupe-kargo-bilgisi p { margin: 0; }
.drupe-recete { padding: 18px 20px; border-left: 4px solid var(--drupe-ana); border-radius: 0 8px 8px 0; background: var(--drupe-ana-acik); line-height: 1.7; }


/* ==========================================================================
   24. SATICI BİLGİLERİ / ÇALIŞMA SAATLERİ KISA KODLARI
   ========================================================================== */
.drupe-satici { font-size: 13px; line-height: 1.6; }
.drupe-satici p { margin: 0 0 8px; }
.drupe-etbis { display: block; margin-top: 6px; }
.drupe-saatler dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0 0 10px; }
.drupe-saatler dt { font-weight: 700; }
.drupe-saatler dd { margin: 0; }
.drupe-yol-tarifi { font-weight: 700; color: var(--drupe-ana); text-decoration: underline; }


/* ==========================================================================
   25. 404 SAYFASI — template-parts/404.php
   ========================================================================== */
.drupe-404 { display: flex; align-items: center; justify-content: center; min-height: 70vh; padding-left: 20px !important; padding-right: 20px !important; }
.drupe-404-kutu { max-width: 560px; padding: 40px 0; text-align: center; }
.drupe-404-kod { margin: 0; color: var(--drupe-ana); font-size: clamp(72px, 18vw, 120px); font-weight: 800; line-height: 1; opacity: 0.15; }
.drupe-404-kutu h1 { margin: 6px 0 12px; color: var(--drupe-ana); font-size: clamp(26px, 5vw, 36px); font-weight: 800; }
.drupe-404-kutu > p { margin: 0 0 24px; color: #555; font-size: 16px; line-height: 1.6; }
.drupe-404-butonlar { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 26px; }
.drupe-404-btn { padding: 13px 26px; border: 2px solid var(--drupe-ana); border-radius: 40px; background: var(--drupe-ana); color: #fff !important; font-weight: 700; text-decoration: none !important; }
.drupe-404-btn--ikincil { background: transparent; color: var(--drupe-ana) !important; }