/* =====================================================================
* Gümüşpala Hizmet - Ana Stil
* iOS 17 Design Language: SF Pro, spring motion, blur layers,
* light theme only, safe-area aware, native feel.
* ===================================================================== */
/* --- Tasarım tokenleri ----------------------------------------------- */
:root{
/* Renkler - light only */
--c-bg: #f2f2f7;
--c-bg-elev: #ffffff;
--c-bg-grouped: #ffffff;
--c-bg-tab: rgba(255,255,255,.78);
--c-text: #1c1c1e;
--c-text-2: #3c3c43;
--c-text-3: #6e6e73;
--c-text-4: #aeaeb2;
--c-separator: rgba(60,60,67,.18);
--c-separator-op: rgba(60,60,67,.36);
--c-fill-1: rgba(120,120,128,.12);
--c-fill-2: rgba(120,120,128,.16);
--c-fill-3: rgba(120,120,128,.20);
/* Marka - Koyu yeşil İslami palet */
--brand: #299981;
--brand-2: #2fae93;
--brand-dark: #1d6f5e;
--brand-tint: #e6f4f1;
--brand-gold: #c9a961;
/* Sistem renkleri */
--c-blue: #007aff;
--c-green: #34c759;
--c-orange: #ff9500;
--c-red: #ff3b30;
--c-purple: #af52de;
--c-yellow: #ffcc00;
--c-teal: #5ac8fa;
/* Typo */
--font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
"Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-arabic: "Amiri", "Scheherazade New", "Noto Naskh Arabic", serif;
/* Spacing / Radius */
--r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 28px;
/* Shadows */
--sh-1: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);
--sh-2: 0 4px 12px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);
--sh-3: 0 12px 32px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.06);
--sh-brand: 0 8px 24px rgba(41,153,129,.22);
/* Motion - Spring eğrileri */
--ease-spring: cubic-bezier(.34,1.56,.64,1);
--ease-out: cubic-bezier(.16,1,.3,1);
--ease-in-out: cubic-bezier(.65,0,.35,1);
--dur-fast: .18s;
--dur-base: .28s;
--dur-slow: .42s;
/* Layout */
--header-h: 56px;
--tabbar-h: 64px;
--safe-top: env(safe-area-inset-top);
--safe-bot: env(safe-area-inset-bottom);
--max-w: 480px;
}
/* --- Reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; background: #f9f9f6; }
body{
font-family: var(--font-system);
font-size: 16px;
line-height: 1.4;
color: var(--c-text);
background: #f9f9f6;
min-height: 100dvh;
overflow-x: hidden;
overscroll-behavior-y: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "kern", "liga", "calt";
}
button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; padding: 0; }
a { color: var(--brand); text-decoration: none; }
img { max-width: 100%; display: block; }
input, textarea, select { -webkit-appearance: none; appearance: none; }
/* --- App Shell ------------------------------------------------------- */
.app{
max-width: var(--max-w);
margin: 0 auto;
min-height: 100dvh;
background: var(--c-bg);
position: relative;
padding-top: calc(var(--header-h) + var(--safe-top));
padding-bottom: calc(var(--tabbar-h) + var(--safe-bot) + 8px);
}
/* --- Header (sticky, blur) ------------------------------------------ */
.header{
position: fixed;
top: 0; left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: var(--max-w);
z-index: 100;
padding-top: var(--safe-top);
background: rgba(255,255,255,.78);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: .5px solid var(--c-separator);
}
.header-inner{
height: var(--header-h);
padding: 0 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.header-left,
.header-right{
display: flex;
align-items: center;
gap: 4px;
flex: 0 0 auto;
z-index: 3;
position: relative;
}
/* Garanti sıralama - eski cache senaryosuna karşı:
Sol grup butonları sol kenara, sağ grup butonları sağ kenara
Bireysel butonlar (eski HTML) için de order ile sırala */
#btnBack { order: 1; }
#btnMenu { order: 2; }
#btnLocation{ order: 3; }
.header-title{ order: 4; }
.headerWeather, #headerWeather{ order: 5; }
#btnNotify { order: 6; }
.header-title{
font-size: 17px;
font-weight: 600;
letter-spacing: -.2px;
flex: 1;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
}
.header-title img { max-height: 32px; width: auto; }
.header-btn{
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
color: var(--brand);
transition: background var(--dur-fast) var(--ease-out);
}
.header-btn:active { background: var(--c-fill-1); }
.header-btn svg { width: 22px; height: 22px; }
/* --- Tab Bar (alt navigasyon) --------------------------------------- */
.tabbar{
position: fixed;
bottom: 0; left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: var(--max-w);
z-index: 100;
padding-bottom: var(--safe-bot);
background: rgba(255,255,255,.82);
backdrop-filter: saturate(180%) blur(24px);
-webkit-backdrop-filter: saturate(180%) blur(24px);
border-top: .5px solid var(--c-separator);
}
.tabbar-inner{
height: var(--tabbar-h);
display: grid;
grid-template-columns: repeat(5, 1fr);
}
.tab{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
color: var(--c-text-3);
font-size: 10px;
font-weight: 500;
letter-spacing: .1px;
position: relative;
transition: color var(--dur-fast) var(--ease-out);
}
.tab svg{ width: 24px; height: 24px; transition: transform var(--dur-base) var(--ease-spring); }
.tab.is-active{ color: var(--brand); }
.tab.is-active svg{ transform: scale(1.08); }
.tab:active svg{ transform: scale(.92); }
/* --- View geçişleri -------------------------------------------------- */
.view{
display: none;
animation: viewIn var(--dur-base) var(--ease-out);
padding: 12px 0 24px;
}
.view.is-active{ display: block; }
@keyframes viewIn{
from{ opacity: 0; transform: translateY(8px); }
to{ opacity: 1; transform: translateY(0); }
}
/* --- Section / Card ------------------------------------------------- */
.section{ margin: 0 0 24px; }
.section-title{
font-size: 13px;
font-weight: 600;
letter-spacing: -.05px;
color: var(--c-text-3);
text-transform: uppercase;
padding: 0 20px 8px;
}
.card{
background: var(--c-bg-elev);
border-radius: var(--r-lg);
margin: 0 16px;
box-shadow: var(--sh-1);
overflow: hidden;
}
.card + .card { margin-top: 12px; }
.row{
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
min-height: 52px;
border-bottom: .5px solid var(--c-separator);
}
.row:last-child{ border-bottom: 0; }
.row-icon{
width: 30px; height: 30px;
border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--brand);
color: #fff;
flex-shrink: 0;
}
.row-icon svg{ width: 18px; height: 18px; }
.row-icon.is-blue{ background: var(--c-blue); }
.row-icon.is-green{ background: var(--c-green); }
.row-icon.is-orange{ background: var(--c-orange); }
.row-icon.is-purple{ background: var(--c-purple); }
.row-icon.is-teal{ background: var(--c-teal); }
.row-text{ flex: 1; min-width: 0; }
.row-title{ font-size: 16px; font-weight: 500; color: var(--c-text); }
.row-sub{ font-size: 13px; color: var(--c-text-3); margin-top: 2px; }
.row-value{ font-size: 16px; color: var(--c-text-3); font-variant-numeric: tabular-nums; }
.row-chev{ color: var(--c-text-4); }
.row-chev svg{ width: 14px; height: 14px; }
.row.is-tappable{ cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }
.row.is-tappable:active{ background: var(--c-fill-1); }
/* --- Hero (Aktif vakit + geri sayım) -------------------------------- */
.hero{
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
border-radius: var(--r-2xl);
margin: 4px 16px 20px;
padding: 24px 22px 22px;
color: #fff;
box-shadow: var(--sh-brand);
position: relative;
overflow: hidden;
}
/* Foto layer - Mahmud Efendi Hazretleri (k.s.) hero arka planı */
.hero::after{
content:'';
position: absolute; inset: 0;
background-image:
linear-gradient(180deg,
rgba(6, 77, 40, 0.65) 0%,
rgba(41, 153, 129, 0.30) 40%,
rgba(6, 77, 40, 0.75) 100%),
url('/assets/img/hero-bg.jpg');
background-size: cover, cover;
background-position: center, center 20%;
pointer-events: none;
z-index: 1;
}
.hero > *{ position: relative; z-index: 2; }
/* Mevcut radial parıltı katmanı (foto üstünde kalsın) */
.hero::before{
content:'';
position: absolute; top: -40%; right: -20%;
width: 240px; height: 240px;
background: radial-gradient(circle, rgba(255,255,255,.20) 0%, transparent 70%);
pointer-events: none;
z-index: 1;
}
.hero > *{ position: relative; z-index: 2; }
.hero-loc{
font-size: 13px;
font-weight: 500;
opacity: .95;
display: flex; align-items: center; gap: 6px;
margin-bottom: 4px;
text-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.hero-loc svg{ width: 12px; height: 12px; }
.hero-next-label{
font-size: 14px;
opacity: .9;
font-weight: 500;
margin-bottom: 8px;
text-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.hero-time{
font-size: 56px;
font-weight: 700;
letter-spacing: -2px;
line-height: 1;
font-variant-numeric: tabular-nums;
margin-bottom: 4px;
text-shadow: 0 2px 8px rgba(0,0,0,.20);
}
.hero-countdown{
font-size: 15px;
opacity: .95;
font-weight: 500;
font-variant-numeric: tabular-nums;
text-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.hero-hijri{
position: absolute;
top: 22px; right: 22px;
font-size: 12px;
opacity: .9;
text-align: right;
text-shadow: 0 1px 2px rgba(0,0,0,.20);
z-index: 2;
}
/* --- Vakit listesi (yatay pill) ------------------------------------- */
.times-grid{
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 6px;
margin: 0 16px;
}
.time-pill{
background: var(--c-bg-elev);
border-radius: var(--r-md);
padding: 12px 4px;
text-align: center;
box-shadow: var(--sh-1);
position: relative;
transition: transform var(--dur-base) var(--ease-spring);
}
.time-pill.is-active{
background: var(--brand-tint);
outline: 2px solid var(--brand);
outline-offset: -2px;
transform: translateY(-2px);
}
.time-pill-name{
font-size: 10px;
font-weight: 600;
color: var(--c-text-3);
text-transform: uppercase;
letter-spacing: .3px;
margin-bottom: 4px;
}
.time-pill.is-active .time-pill-name{ color: var(--brand); }
.time-pill-time{
font-size: 13px;
font-weight: 600;
color: var(--c-text);
font-variant-numeric: tabular-nums;
}
.time-pill.is-active .time-pill-time{ color: var(--brand); }
/* --- Modüller grid (kıble, zikir, kütüphane vs) --------------------- */
.modules-grid{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
padding: 0 16px;
}
.module{
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 14px 4px;
background: var(--c-bg-elev);
border-radius: var(--r-lg);
box-shadow: var(--sh-1);
text-align: center;
transition: transform var(--dur-fast) var(--ease-spring);
color: var(--c-text);
cursor: pointer;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
user-select: none;
-webkit-user-select: none;
border: 0;
font-family: inherit;
font-size: inherit;
width: 100%;
}
a.module, button.module { color: var(--c-text); text-decoration: none; }
.module:active{ transform: scale(.94); }
.module-icon{
width: 44px; height: 44px;
border-radius: 12px;
background: linear-gradient(135deg, var(--brand), var(--brand-dark));
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 4px 10px rgba(41,153,129,.25);
}
.module-icon.is-green{ background: linear-gradient(135deg, #34c759, #28a745); box-shadow: 0 4px 10px rgba(52,199,89,.25); }
.module-icon.is-blue{ background: linear-gradient(135deg, #007aff, #0051d5); box-shadow: 0 4px 10px rgba(0,122,255,.25); }
.module-icon.is-orange{ background: linear-gradient(135deg, #ff9500, #d97c00); box-shadow: 0 4px 10px rgba(255,149,0,.25); }
.module-icon.is-purple{ background: linear-gradient(135deg, #af52de, #8c3cb8); box-shadow: 0 4px 10px rgba(175,82,222,.25); }
.module-icon.is-teal{ background: linear-gradient(135deg, #5ac8fa, #32a4d4); box-shadow: 0 4px 10px rgba(90,200,250,.25); }
.module-icon.is-indigo{ background: linear-gradient(135deg, #5856d6, #3e3cb8); box-shadow: 0 4px 10px rgba(88,86,214,.25); }
.module-icon.is-pink{ background: linear-gradient(135deg, #ff2d55, #d81b41); box-shadow: 0 4px 10px rgba(255,45,85,.25); }
.module-icon svg{ width: 22px; height: 22px; }
.module-label{
font-size: 11px;
font-weight: 500;
color: var(--c-text-2);
line-height: 1.2;
}
/* --- Buttons --------------------------------------------------------- */
.btn{
display: inline-flex; align-items: center; justify-content: center;
gap: 8px;
padding: 14px 20px;
border-radius: var(--r-md);
font-size: 16px;
font-weight: 600;
background: var(--brand);
color: #fff;
transition: transform var(--dur-fast) var(--ease-out),
opacity var(--dur-fast) var(--ease-out);
min-height: 48px;
}
.btn:active{ transform: scale(.97); opacity: .9; }
.btn.is-block{ width: 100%; }
.btn.is-secondary{ background: var(--c-fill-1); color: var(--brand); }
.btn.is-ghost{ background: transparent; color: var(--brand); }
.btn.is-danger{ background: var(--c-red); }
.btn.is-sm{ padding: 8px 14px; font-size: 14px; min-height: 36px; border-radius: 10px; }
/* --- Form ------------------------------------------------------------ */
.field{
display: flex; flex-direction: column; gap: 6px;
padding: 0 16px 16px;
}
.field-label{
font-size: 13px;
font-weight: 500;
color: var(--c-text-3);
padding-left: 4px;
}
.input, .select{
padding: 14px 16px;
background: var(--c-bg-elev);
border-radius: var(--r-md);
border: 1px solid var(--c-separator);
font-size: 16px;
color: var(--c-text);
transition: border-color var(--dur-fast) var(--ease-out);
}
.input:focus, .select:focus{
outline: none;
border-color: var(--brand);
}
/* --- Switch (iOS toggle) -------------------------------------------- */
.switch{
position: relative;
width: 51px; height: 31px;
background: var(--c-fill-2);
border-radius: 32px;
transition: background var(--dur-base) var(--ease-out);
flex-shrink: 0;
}
.switch::after{
content: '';
position: absolute;
top: 2px; left: 2px;
width: 27px; height: 27px;
background: #fff;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0,0,0,.2);
transition: transform var(--dur-base) var(--ease-spring);
}
.switch.is-on{ background: var(--c-green); }
.switch.is-on::after{ transform: translateX(20px); }
/* --- Loader / Skeleton ---------------------------------------------- */
.loader{
width: 24px; height: 24px;
border: 3px solid var(--c-fill-2);
border-top-color: var(--brand);
border-radius: 50%;
animation: spin .8s linear infinite;
margin: 32px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton{
background: linear-gradient(90deg, var(--c-fill-1) 25%, var(--c-fill-2) 50%, var(--c-fill-1) 75%);
background-size: 200% 100%;
animation: skel 1.4s ease-in-out infinite;
border-radius: 8px;
}
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* --- Toast ----------------------------------------------------------- */
.toast{
position: fixed;
bottom: calc(var(--tabbar-h) + var(--safe-bot) + 16px);
left: 50%;
transform: translateX(-50%) translateY(20px);
background: rgba(28,28,30,.92);
backdrop-filter: blur(20px);
color: #fff;
padding: 12px 20px;
border-radius: 14px;
font-size: 14px;
font-weight: 500;
z-index: 200;
opacity: 0;
transition: opacity var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-spring);
max-width: 90%;
text-align: center;
pointer-events: none;
}
.toast.is-show{
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* --- Sheet (alttan açılan modal) ------------------------------------ */
.sheet-bg{
position: fixed;
inset: 0;
background: rgba(0,0,0,.4);
backdrop-filter: blur(4px);
z-index: 300;
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-base) var(--ease-out);
}
.sheet-bg.is-show{ opacity: 1; pointer-events: auto; }
.sheet{
position: fixed;
bottom: 0; left: 50%;
transform: translateX(-50%) translateY(100%);
width: 100%;
max-width: var(--max-w);
max-height: 85dvh;
background: var(--c-bg);
border-radius: 24px 24px 0 0;
z-index: 301;
transition: transform var(--dur-slow) var(--ease-spring);
padding-bottom: var(--safe-bot);
display: flex; flex-direction: column;
overflow: hidden;
}
.sheet.is-show{ transform: translateX(-50%) translateY(0); }
.sheet-handle{
width: 36px; height: 5px;
background: var(--c-fill-2);
border-radius: 4px;
margin: 8px auto 4px;
}
.sheet-header{
display: flex; align-items: center; justify-content: space-between;
padding: 8px 16px 12px;
border-bottom: .5px solid var(--c-separator);
}
.sheet-title{ font-size: 17px; font-weight: 600; }
.sheet-body{ flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 0; }
/* --- Empty state ---------------------------------------------------- */
.empty{
text-align: center;
padding: 48px 24px;
color: var(--c-text-3);
}
.empty-icon{
width: 64px; height: 64px;
margin: 0 auto 12px;
color: var(--c-text-4);
}
.empty-title{ font-size: 16px; font-weight: 600; color: var(--c-text-2); margin-bottom: 4px; }
.empty-sub{ font-size: 14px; }
/* --- Splash overlay ------------------------------------------------- */
.splash{
position: fixed;
inset: 0;
background: #1a1a1a url('/assets/img/splash-bg.jpg') center center / contain no-repeat;
z-index: 9999;
transition: opacity .5s var(--ease-out);
}
/* Mobil dikey ekran: tam kapla */
@media (max-aspect-ratio: 3/4) {
.splash{ background-size: cover; }
}
.splash.is-hide{ opacity: 0; pointer-events: none; }
.splash-logo, .splash-name, .splash-sub{ display: none; }
/* --- Utilities ------------------------------------------------------ */
.hidden{ display: none !important; }
.text-center{ text-align: center; }
.mt-2{ margin-top: 8px; } .mt-4{ margin-top: 16px; } .mt-6{ margin-top: 24px; }
/* --- Notch / Safe-area iOS 17 -------------------------------------- */
@supports (padding: max(0px)) {
.header{ padding-top: max(var(--safe-top), 0px); }
.tabbar{ padding-bottom: max(var(--safe-bot), 0px); }
}
/* --- Reduced motion ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
}
/* --- Onboarding Wizard --------------------------------------------- */
/* PDF talebi: "Verdiğim logo ve tema rengi kullanılacak, fon sade olacak"
→ gradient kaldırıldı, tek renk tema yeşili */
.onb-bg{
position: fixed; inset: 0; z-index: 9000;
background: #299981;
display: flex; align-items: center; justify-content: center;
padding: 24px 20px;
padding-top: max(24px, env(safe-area-inset-top));
padding-bottom: max(24px, env(safe-area-inset-bottom));
animation: onbIn .3s ease;
}
.onb-bg.is-out{ animation: onbOut .3s ease forwards; }
@keyframes onbIn { from{opacity:0} to{opacity:1} }
@keyframes onbOut { from{opacity:1} to{opacity:0} }
.onb-card{
background: #fff;
border-radius: 24px;
width: 100%; max-width: 420px;
padding: 28px 24px 24px;
box-shadow: 0 24px 60px rgba(0,0,0,.30);
max-height: 90vh; overflow-y: auto;
}
.onb-progress{
display: flex; gap: 6px; justify-content: center;
margin-bottom: 24px;
}
.onb-dot{
width: 28px; height: 4px; border-radius: 2px;
background: var(--c-fill-2);
transition: background .25s;
}
.onb-dot.is-on{ background: var(--brand); }
.onb-icon{
width: 80px; height: 80px;
border-radius: 24px;
margin: 0 auto 18px;
display: flex; align-items: center; justify-content: center;
}
.onb-title{
font-size: 22px; font-weight: 700;
text-align: center;
margin: 0 0 10px;
color: var(--c-text-1);
}
.onb-text{
font-size: 14px;
color: var(--c-text-2);
text-align: center;
margin: 0 0 22px;
line-height: 1.55;
}
.onb-features{
list-style: none; padding: 0; margin: 0 0 22px;
text-align: left;
}
.onb-features li{
display: flex; align-items: center; gap: 10px;
padding: 9px 0;
font-size: 14px; color: var(--c-text-2);
}
.onb-check{
width: 22px; height: 22px;
background: rgba(52,199,89,.15);
color: #1f8b3d;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700;
flex-shrink: 0;
}
.onb-divider{
display: flex; align-items: center; gap: 10px;
margin: 16px 0; color: var(--c-text-3); font-size: 12px;
}
.onb-divider::before, .onb-divider::after{
content: ''; flex: 1; height: 1px; background: var(--c-fill-2);
}
.onb-skip{
display: block; width: 100%;
background: none; border: 0;
font-size: 13px; color: var(--c-text-3);
padding: 14px 0 4px;
cursor: pointer; text-align: center;
font-family: inherit;
}
.onb-skip:active{ color: var(--c-text-2); }
.onb-card .form-input,
.onb-card select.form-input{
width: 100%;
padding: 12px 14px;
font-size: 14px;
border: 1px solid var(--c-fill-2);
border-radius: 10px;
background: #fff;
color: var(--c-text-1);
font-family: inherit;
-webkit-appearance: none;
appearance: none;
}
.onb-card .form-input:focus{
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(41,153,129,.12);
}
.onb-card .form-input:disabled{ background: var(--c-fill-1); color: var(--c-text-3); }
/* =====================================================================
* Sprint 2 - Hadis + Hutbe + Mukabele
* ===================================================================== */
/* Hadis */
.hadis-gunun{
margin:8px 16px 0;
padding:18px 20px;
background:linear-gradient(135deg,#1c4532 0%,#2f7a52 100%);
color:#fff;
border-radius:var(--r-2xl);
cursor:pointer;
box-shadow:0 8px 20px rgba(28,69,50,.18);
transition:transform .15s;
}
.hadis-gunun:active{ transform:scale(.99); }
.hadis-gunun-label{
font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:.6px;
opacity:.8;margin-bottom:6px;
}
.hadis-gunun-text{ font-size:15px;line-height:1.55;font-weight:500; }
.hadis-gunun-source{
font-size:12px;margin-top:10px;
opacity:.85;font-style:italic;
}
.hadis-kitap-list{ padding:0 16px 80px; }
.hadis-kitap-item{
width:100%;display:flex;align-items:center;gap:14px;
padding:14px;margin-bottom:8px;
background:var(--c-bg-elev);
border:1px solid var(--c-fill-1);
border-radius:14px;cursor:pointer;
font-family:inherit;text-align:left;
transition:background .12s,transform .1s;
}
.hadis-kitap-item:active{ transform:scale(.99);background:var(--c-fill-1); }
.hadis-kitap-icon{
width:42px;height:42px;flex-shrink:0;
background:var(--brand-tint);color:var(--brand);
border-radius:50%;
display:flex;align-items:center;justify-content:center;
}
.hadis-kitap-info{ flex:1;min-width:0; }
.hadis-kitap-name{ font-size:15px;font-weight:600;color:var(--c-text-1); }
.hadis-kitap-meta{ font-size:12px;color:var(--c-text-3);margin-top:2px; }
.hadis-kitap-count{
background:var(--c-fill-1);
padding:4px 10px;border-radius:10px;
font-size:12px;font-weight:600;color:var(--c-text-3);
font-variant-numeric:tabular-nums;
}
.hadis-konu-bar{
display:flex;gap:6px;
padding:6px 16px 14px;
overflow-x:auto;scrollbar-width:none;
border-bottom:1px solid var(--c-fill-1);
}
.hadis-konu-bar::-webkit-scrollbar{ display:none; }
.hadis-konu-pill{
flex-shrink:0;
padding:6px 14px;border:1px solid var(--c-fill-2);
background:var(--c-bg-elev);color:var(--c-text-2);
border-radius:18px;font-size:13px;font-weight:500;
white-space:nowrap;cursor:pointer;font-family:inherit;
transition:background .12s,color .12s;
}
.hadis-konu-pill.is-active{
background:var(--brand-tint);color:var(--brand);
border-color:transparent;font-weight:600;
}
.hadis-list{ padding:0 16px 90px; }
.hadis-row{
display:block;width:100%;
padding:12px 14px;margin-bottom:8px;
background:var(--c-bg-elev);
border:1px solid var(--c-fill-1);
border-radius:12px;cursor:pointer;
font-family:inherit;text-align:left;
transition:background .12s,transform .1s;
}
.hadis-row:active{ transform:scale(.99); background:var(--c-fill-1); }
.hadis-row-source{
font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:.5px;
color:var(--c-text-3);margin-bottom:4px;
}
.hadis-row-text{
font-size:14px;color:var(--c-text-1);line-height:1.55;
}
.hadis-pager{
display:flex;justify-content:space-between;align-items:center;
padding:14px 16px 100px;
}
.hadis-pager .btn-secondary{
padding:8px 16px;
border:1px solid var(--c-fill-2);
background:var(--c-bg-elev);color:var(--c-text-2);
border-radius:8px;font-size:13px;cursor:pointer;
font-family:inherit;
}
.hadis-pager .btn-secondary:disabled{ opacity:.45;cursor:not-allowed; }
.hadis-pager-info{
font-size:13px;color:var(--c-text-3);
font-variant-numeric:tabular-nums;
}
.hadis-detail{ padding:16px 18px 100px; }
.hadis-arapca{
font-family:'Amiri','Scheherazade','Noto Naskh Arabic',serif;
font-size:24px;line-height:2.1;color:var(--c-text-1);
text-align:right;direction:rtl;
margin-bottom:18px;
padding-bottom:16px;
border-bottom:1px solid var(--c-fill-1);
}
.hadis-turkce{
font-size:16px;line-height:1.75;color:var(--c-text-1);
margin-bottom:14px;
}
.hadis-aciklama{
background:var(--c-fill-1);
padding:12px 14px;border-radius:10px;
font-size:14px;line-height:1.6;color:var(--c-text-2);
margin-bottom:12px;
}
.hadis-aciklama strong{ color:var(--c-text-1); }
.hadis-kaynak{
font-size:12px;color:var(--c-text-3);
font-style:italic;text-align:right;
margin-top:14px;
padding-top:10px;
border-top:1px solid var(--c-fill-1);
}
/* Hutbe */
.hutbe-buhafta{
margin:8px 16px 0;
padding:18px 20px;
background:linear-gradient(135deg,#5a3a1a 0%,#8b5a2b 100%);
color:#fff;
border-radius:var(--r-2xl);
cursor:pointer;
box-shadow:0 8px 20px rgba(90,58,26,.2);
transition:transform .15s;
}
.hutbe-buhafta:active{ transform:scale(.99); }
.hutbe-buhafta-label{
font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:.6px;
opacity:.85;margin-bottom:6px;
}
.hutbe-buhafta-title{ font-size:18px;font-weight:700;line-height:1.35; }
.hutbe-buhafta-date{ font-size:12px;margin-top:8px;opacity:.85; }
.hutbe-detail{ padding:16px 18px 100px; }
.hutbe-detail p{
font-size:15px;line-height:1.75;color:var(--c-text-1);
margin:0 0 14px;
}
/* Mukabele */
.mukabele-progress{
display:flex;align-items:center;gap:18px;
padding:18px 16px;margin:0 16px 14px;
background:var(--c-bg-elev);
border:1px solid var(--c-fill-1);
border-radius:var(--r-2xl);
}
.mukabele-progress-circle{
width:96px;height:96px;flex-shrink:0;
border-radius:50%;
background:conic-gradient(var(--brand) calc(var(--p,0) * 1%), var(--c-fill-1) 0);
display:flex;align-items:center;justify-content:center;
}
.mukabele-progress-inner{
width:78px;height:78px;
background:var(--c-bg-elev);
border-radius:50%;
display:flex;flex-direction:column;
align-items:center;justify-content:center;
}
.mukabele-progress-percent{
font-size:22px;font-weight:700;color:var(--brand);
font-variant-numeric:tabular-nums;
}
.mukabele-progress-label{
font-size:11px;color:var(--c-text-3);margin-top:-2px;
}
.mukabele-info{ flex:1;min-width:0; }
.mukabele-title{ font-size:17px;font-weight:700;color:var(--c-text-1); }
.mukabele-sub{ font-size:12px;color:var(--c-text-3);margin-top:4px; }
.mukabele-help{ font-size:12px;color:var(--c-text-3);margin-top:8px;line-height:1.5; }
.mukabele-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(64px,1fr));
gap:8px;
padding:0 16px 100px;
}
.mukabele-cuz{
position:relative;
aspect-ratio:1;
background:var(--c-bg-elev);
border:1px solid var(--c-fill-1);
border-radius:12px;
display:flex;flex-direction:column;
align-items:center;justify-content:center;
cursor:pointer;font-family:inherit;
transition:transform .1s,background .12s;
}
.mukabele-cuz:active{ transform:scale(.95); }
.mukabele-cuz-no{
font-size:18px;font-weight:700;color:var(--c-text-1);
font-variant-numeric:tabular-nums;
}
.mukabele-cuz-day{
font-size:10px;color:var(--c-text-3);
margin-top:1px;font-weight:500;
}
.mukabele-cuz.is-today{
border-color:var(--brand);
border-width:2px;
}
.mukabele-cuz.is-past:not(.is-done){
opacity:.5;
}
.mukabele-cuz.is-done{
background:linear-gradient(135deg, #1c4532 0%, #2f7a52 100%);
border-color:transparent;
}
.mukabele-cuz.is-done .mukabele-cuz-no,
.mukabele-cuz.is-done .mukabele-cuz-day{ color:#fff; }
.mukabele-tick{
position:absolute;
top:6px;right:6px;
width:14px;height:14px;
color:#fff;
}
/* =====================================================================
* Sprint 3 - Cami + Canlı Yayın
* ===================================================================== */
/* Cami head: tabs + radius selector */
.cami-head{
display:flex;gap:10px;align-items:center;
padding:10px 16px 14px;
border-bottom:1px solid var(--c-fill-1);
}
.cami-tabs{
display:flex;gap:4px;
background:var(--c-fill-1);border-radius:10px;
padding:3px;flex:1;
}
.cami-tab{
flex:1;display:flex;align-items:center;justify-content:center;gap:5px;
padding:8px 10px;border:0;background:transparent;
font-size:12px;font-weight:600;color:var(--c-text-3);
border-radius:8px;cursor:pointer;font-family:inherit;
white-space:nowrap;
}
.cami-tab.is-active{
background:#fff;color:var(--brand);
box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.cami-radius{
display:flex;align-items:center;gap:6px;
font-size:12px;color:var(--c-text-3);
}
.cami-radius select{
padding:6px 10px;border:1px solid var(--c-fill-2);
border-radius:8px;background:var(--c-bg-elev);
font-size:12px;color:var(--c-text-1);font-family:inherit;
}
.cami-info{
padding:10px 16px;font-size:13px;color:var(--c-text-3);
}
.cami-info strong{ color:var(--c-text-1); }
.cami-list{ padding:0 16px 100px; }
.cami-row{
display:flex;gap:12px;align-items:flex-start;
padding:12px;margin-bottom:8px;
background:var(--c-bg-elev);
border:1px solid var(--c-fill-1);
border-radius:14px;cursor:pointer;
transition:background .12s;
}
.cami-row:active{ background:var(--c-fill-1); }
.cami-icon{
width:38px;height:38px;flex-shrink:0;
background:var(--brand-tint);color:var(--brand);
border-radius:50%;
display:flex;align-items:center;justify-content:center;
}
.cami-info-block{ flex:1;min-width:0; }
.cami-adi{
font-size:15px;font-weight:600;color:var(--c-text-1);
margin-bottom:2px;
}
.cami-adres{
font-size:12px;color:var(--c-text-3);
margin-bottom:6px;
overflow:hidden;text-overflow:ellipsis;
display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
}
.cami-meta{
display:flex;gap:10px;align-items:center;
font-size:12px;color:var(--c-text-3);
}
.cami-mesafe{
background:var(--c-fill-1);
padding:2px 8px;border-radius:6px;
font-weight:600;color:var(--c-text-2);
font-variant-numeric:tabular-nums;
}
.cami-link{
color:var(--brand);text-decoration:none;font-weight:500;
}
.cami-actions{
display:flex;gap:4px;flex-shrink:0;
}
.cami-action-btn{
width:34px;height:34px;
background:var(--c-fill-1);border:0;
border-radius:50%;cursor:pointer;
color:var(--c-text-2);
display:flex;align-items:center;justify-content:center;
transition:background .12s,color .12s;
}
.cami-action-btn:active{ background:var(--c-fill-2); }
.cami-action-btn.is-active{ color:var(--brand);background:var(--brand-tint); }
.cami-chip{
background:var(--c-fill-1);
padding:6px 12px;border-radius:18px;
font-size:12px;font-weight:600;color:var(--c-text-2);
text-decoration:none;display:inline-block;
}
.cami-map{
height:calc(100vh - 220px);
min-height:380px;
border-radius:0;
margin:0;
}
.cami-map .leaflet-control-zoom{ border:0;border-radius:8px;overflow:hidden; }
.cami-user-dot{
width:18px;height:18px;border-radius:50%;
background:#0a84ff;border:3px solid #fff;
box-shadow:0 0 0 3px rgba(10,132,255,.3),0 1px 4px rgba(0,0,0,.3);
animation:camiPulse 2s infinite;
}
@keyframes camiPulse{
0% { box-shadow:0 0 0 3px rgba(10,132,255,.3),0 1px 4px rgba(0,0,0,.3); }
50% { box-shadow:0 0 0 10px rgba(10,132,255,.05),0 1px 4px rgba(0,0,0,.3); }
100% { box-shadow:0 0 0 3px rgba(10,132,255,.3),0 1px 4px rgba(0,0,0,.3); }
}
.cami-marker{ background:transparent;border:0; }
/* Canlı Yayın */
.canli-tabs{
display:flex;gap:6px;padding:8px 16px;
overflow-x:auto;scrollbar-width:none;
border-bottom:1px solid var(--c-fill-1);
}
.canli-tabs::-webkit-scrollbar{ display:none; }
.canli-tab{
flex-shrink:0;
padding:8px 16px;
background:var(--c-fill-1);
border:0;border-radius:18px;
font-size:13px;font-weight:600;color:var(--c-text-2);
white-space:nowrap;cursor:pointer;font-family:inherit;
}
.canli-tab.is-active{
background:var(--brand);color:#fff;
}
.canli-player{ padding:0; }
.canli-player-frame{
position:relative;
width:100%;
aspect-ratio:16/9;
background:#000;
}
.canli-player-frame iframe{
position:absolute;inset:0;
width:100%;height:100%;border:0;
}
.canli-info{
padding:14px 18px 100px;
}
.canli-live-badge{
display:inline-flex;align-items:center;gap:6px;
background:#dc2626;color:#fff;
padding:3px 10px;border-radius:6px;
font-size:11px;font-weight:700;
letter-spacing:.6px;text-transform:uppercase;
margin-bottom:10px;
}
.canli-live-dot{
width:6px;height:6px;border-radius:50%;
background:#fff;
animation:canliLiveBlink 1.2s infinite;
}
@keyframes canliLiveBlink{
0%,100% { opacity: 1; }
50% { opacity: .3; }
}
.canli-title{ font-size:18px;font-weight:700;color:var(--c-text-1); }
.canli-desc{ font-size:13px;color:var(--c-text-3);margin-top:4px; }
/* =====================================================================
* Sprint 4 - Paylaşım Stüdyosu
* ===================================================================== */
.paylasim-intro{
padding:14px 16px 6px;
}
.paylasim-intro-title{
font-size:18px;font-weight:700;color:var(--c-text-1);
}
.paylasim-intro-sub{
font-size:13px;color:var(--c-text-3);
margin-top:4px;line-height:1.5;
}
.paylasim-cats{
display:flex;gap:6px;
padding:10px 16px;
overflow-x:auto;scrollbar-width:none;
border-bottom:1px solid var(--c-fill-1);
}
.paylasim-cats::-webkit-scrollbar{ display:none; }
.paylasim-cat{
flex-shrink:0;
display:inline-flex;align-items:center;gap:6px;
padding:7px 14px;
background:var(--c-bg-elev);
border:1px solid var(--c-fill-2);
border-radius:18px;
font-size:13px;font-weight:500;color:var(--c-text-2);
white-space:nowrap;cursor:pointer;font-family:inherit;
transition:background .12s,color .12s,border-color .12s;
}
.paylasim-cat.is-active{
background:var(--brand);color:#fff;
border-color:var(--brand);font-weight:600;
}
.paylasim-cat-count{
background:rgba(0,0,0,.1);
padding:1px 7px;border-radius:10px;
font-size:11px;font-weight:700;
font-variant-numeric:tabular-nums;
}
.paylasim-cat.is-active .paylasim-cat-count{
background:rgba(255,255,255,.25);
}
.paylasim-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
gap:10px;
padding:14px 16px 100px;
}
.paylasim-thumb{
position:relative;
aspect-ratio:1;
border:0;border-radius:14px;
cursor:pointer;font-family:inherit;
overflow:hidden;
box-shadow:0 4px 12px rgba(0,0,0,.10);
transition:transform .12s;
}
.paylasim-thumb:active{ transform:scale(.97); }
.paylasim-thumb-corner{
position:absolute;
top:14px;left:0;right:0;
text-align:center;
font-size:13px;font-weight:600;
text-shadow:0 1px 4px rgba(0,0,0,.3);
}
.paylasim-thumb-deco{
position:absolute;inset:0;
pointer-events:none;
}
.paylasim-thumb-deco[data-deco="mosque"]::after,
.paylasim-thumb-deco[data-deco="crescent"]::after,
.paylasim-thumb-deco[data-deco="star"]::after,
.paylasim-thumb-deco[data-deco="arabesque"]::after,
.paylasim-thumb-deco[data-deco="geometric"]::after{
content:'';position:absolute;
bottom:0;left:0;right:0;height:50%;
opacity:.20;
background-repeat:no-repeat;
background-position:center bottom;
background-size:60% auto;
}
.paylasim-thumb-deco[data-deco="mosque"]::after{
background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 4l1 1.5v3.5h-2V5.5L12 4zm-7 18V12a7 7 0 0 1 14 0v10h-2v-4a3 3 0 0 0-6 0v4H5zm-2 0h18v1H3v-1z'/%3E%3C/svg%3E");
}
.paylasim-thumb-deco[data-deco="crescent"]::after{
background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
}
.paylasim-thumb-deco[data-deco="star"]::after{
background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2l3 6 6 1-4.5 4 1 7L12 17l-5.5 3 1-7L3 9l6-1z'/%3E%3C/svg%3E");
}
/* Editör */
.paylasim-editor{
padding-bottom:120px;
}
.paylasim-editor-head{
position:sticky;top:0;z-index:5;
background:var(--c-bg-elev);
border-bottom:1px solid var(--c-fill-1);
padding:12px 14px;
display:flex;align-items:center;gap:10px;
padding-top:max(12px,env(safe-area-inset-top));
margin:-4px -16px 0;
}
.paylasim-canvas-wrap{
background:var(--c-fill-1);
padding:14px;
display:flex;align-items:center;justify-content:center;
}
.paylasim-canvas{
max-width:100%;
max-height:60vh;
border-radius:8px;
box-shadow:0 6px 20px rgba(0,0,0,.18);
height:auto;
}
.paylasim-controls{
padding:14px 16px 8px;
}
.paylasim-control{
margin-bottom:12px;
}
.paylasim-control label{
display:block;
font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:.5px;
color:var(--c-text-3);
margin-bottom:6px;
}
.paylasim-control textarea,
.paylasim-control input[type=text]{
width:100%;
padding:11px 14px;
border:1px solid var(--c-fill-2);
border-radius:10px;
font-size:14px;background:var(--c-bg-elev);
color:var(--c-text-1);font-family:inherit;
-webkit-appearance:none;appearance:none;
resize:vertical;
}
.paylasim-control textarea:focus,
.paylasim-control input[type=text]:focus{
outline:none;border-color:var(--brand);
box-shadow:0 0 0 3px rgba(41,153,129,.10);
}
.paylasim-helpers{
display:flex;gap:8px;
overflow-x:auto;scrollbar-width:none;
margin:6px 0;
}
.paylasim-helpers::-webkit-scrollbar{ display:none; }
.paylasim-helper-btn{
flex-shrink:0;
display:inline-flex;align-items:center;gap:6px;
padding:8px 14px;
background:var(--c-fill-1);
border:0;border-radius:10px;
font-size:13px;font-weight:500;color:var(--c-text-1);
cursor:pointer;font-family:inherit;
}
.paylasim-helper-btn:active{ background:var(--c-fill-2); }
.paylasim-actions{
position:fixed;
bottom:calc(60px + env(safe-area-inset-bottom));
left:0;right:0;
background:var(--c-bg-elev);
border-top:1px solid var(--c-fill-1);
padding:14px 16px;
display:grid;grid-template-columns:1fr 2fr;gap:10px;
z-index:30;
}
.paylasim-actions .btn-secondary{
padding:13px;
border:1px solid var(--c-fill-2);
background:var(--c-bg-elev);color:var(--c-text-1);
border-radius:12px;cursor:pointer;
font-size:14px;font-weight:600;font-family:inherit;
}
.paylasim-actions .btn{
padding:13px;
border:0;
background:var(--brand);color:#fff;
border-radius:12px;cursor:pointer;
font-size:14px;font-weight:700;font-family:inherit;
box-shadow:var(--sh-brand);
}
/* =====================================================================
* Sprint 5 - Liquid Glass Tema (iOS 26 stili) + Çocuk Modu
* Aktif olunca set edilir
* ===================================================================== */
html[data-tema="glass"]{
--c-bg-base: #f5f0e8;
--c-bg-elev: rgba(255, 255, 255, 0.65);
--c-fill-1: rgba(255, 255, 255, 0.45);
--c-fill-2: rgba(255, 255, 255, 0.35);
}
html[data-tema="glass"] body{
background:
radial-gradient(ellipse 80% 60% at 20% 0%, rgba(41,153,129,.08), transparent 60%),
radial-gradient(ellipse 70% 60% at 80% 100%, rgba(28,124,90,.10), transparent 60%),
linear-gradient(180deg, #faf6ee 0%, #f0e8d8 100%);
}
html[data-tema="glass"] .card,
html[data-tema="glass"] .module-icon,
html[data-tema="glass"] .kuran-resume,
html[data-tema="glass"] .hadis-gunun,
html[data-tema="glass"] .hutbe-buhafta,
html[data-tema="glass"] .kuran-sure-item,
html[data-tema="glass"] .hadis-kitap-item,
html[data-tema="glass"] .hadis-row,
html[data-tema="glass"] .cami-row,
html[data-tema="glass"] .mukabele-progress,
html[data-tema="glass"] .canli-tab.is-active,
html[data-tema="glass"] .header,
html[data-tema="glass"] .tabbar{
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-color: rgba(255, 255, 255, 0.6);
}
html[data-tema="glass"] .header{
background: rgba(255,255,255,0.55);
border-bottom: 1px solid rgba(255,255,255,0.7);
}
html[data-tema="glass"] .tabbar{
background: rgba(255,255,255,0.7);
border-top: 1px solid rgba(255,255,255,0.8);
}
html[data-tema="glass"] .module{
background: rgba(255,255,255,0.55);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border: 1px solid rgba(255,255,255,0.5);
box-shadow:
0 1px 0 rgba(255,255,255,0.8) inset,
0 8px 24px rgba(180,150,100,0.10);
}
html[data-tema="glass"] .module:active{
transform: scale(.96);
}
html[data-tema="glass"] .splash{
background: linear-gradient(180deg, #f5e8d0 0%, #d4b896 100%);
}
/* Çocuk modu - büyük tipografi, sadeleştirilmiş UI */
html[data-cocuk-modu="1"]{
--r-2xl: 24px;
}
html[data-cocuk-modu="1"] body{
font-size: 18px;
}
html[data-cocuk-modu="1"] .module{
padding: 18px 12px;
border-radius: 22px;
}
html[data-cocuk-modu="1"] .module-icon{
width: 58px;height: 58px;
border-radius: 18px;
}
html[data-cocuk-modu="1"] .module-label{
font-size: 14px;font-weight: 700;
}
html[data-cocuk-modu="1"] .modules-grid{
grid-template-columns: repeat(2, 1fr) !important;
gap: 14px;
}
html[data-cocuk-modu="1"] [data-cocuk-hidden]{
display: none !important;
}
html[data-cocuk-modu="1"] .vakit-aktif{
font-size: 38px;
}
/* PWA install banner */
.pwa-install-banner{
position: fixed;
bottom: calc(72px + env(safe-area-inset-bottom));
left: 12px;right: 12px;
background: var(--c-bg-elev);
border: 1px solid var(--c-fill-2);
border-radius: 14px;
padding: 12px 14px;
display: flex;align-items: center;gap: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,.12);
z-index: 80;
transform: translateY(120%);
transition: transform .3s ease;
}
.pwa-install-banner.is-show{ transform: translateY(0); }
.pwa-install-banner-icon{
width: 38px;height: 38px;flex-shrink: 0;
background: var(--brand-tint); color: var(--brand);
border-radius: 10px;
display: flex;align-items: center;justify-content: center;
}
.pwa-install-banner-text{ flex: 1;min-width: 0; }
.pwa-install-banner-title{ font-size: 14px;font-weight: 600;color: var(--c-text-1); }
.pwa-install-banner-sub{ font-size: 12px;color: var(--c-text-3);margin-top: 1px; }
.pwa-install-banner-btn{
background: var(--brand); color: #fff;
border: 0;border-radius: 8px;
padding: 8px 14px;
font-size: 13px;font-weight: 600;
cursor: pointer;font-family: inherit;
flex-shrink: 0;
}
.pwa-install-banner-close{
width: 28px;height: 28px;flex-shrink: 0;
background: transparent;border: 0;
font-size: 18px;color: var(--c-text-4);
cursor: pointer;border-radius: 50%;
display: flex;align-items: center;justify-content: center;
}
.pwa-install-banner-close:active{ background: var(--c-fill-1); }
/* =====================================================================
* Adhan Player - Mini Player (vakit gelince fixed alt çubuk)
* ===================================================================== */
.adhan-mini-player{
position:fixed;
bottom:calc(72px + env(safe-area-inset-bottom));
left:12px;right:12px;
background:linear-gradient(135deg, #0a4f3a 0%, #1c7c5a 100%);
color:#fff;
border-radius:14px;
padding:14px 16px;
display:flex;align-items:center;gap:14px;
box-shadow:0 12px 36px rgba(10,79,58,.45);
z-index:90;
transform:translateY(140%);
transition:transform .35s cubic-bezier(.4,.0,.2,1);
}
.adhan-mini-player.is-show{ transform:translateY(0); }
.adhan-mini-icon{
position:relative;
width:46px;height:46px;flex-shrink:0;
background:rgba(255,255,255,.18);
border-radius:50%;
display:flex;align-items:center;justify-content:center;
color:#fff;
}
.adhan-mini-pulse{
position:absolute;inset:-6px;
border:2px solid rgba(255,255,255,.5);
border-radius:50%;
animation:adhanMiniPulse 1.6s ease-out infinite;
}
@keyframes adhanMiniPulse{
0% { transform:scale(.8);opacity:1; }
100% { transform:scale(1.4);opacity:0; }
}
.adhan-mini-text{ flex:1;min-width:0; }
.adhan-mini-vakit{
font-size:15px;font-weight:700;
color:#fff;
}
.adhan-mini-ses{
font-size:12px;
color:rgba(255,255,255,.85);
margin-top:2px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.adhan-mini-stop{
width:40px;height:40px;flex-shrink:0;
background:rgba(255,255,255,.20);
border:0;border-radius:50%;
color:#fff;cursor:pointer;
display:flex;align-items:center;justify-content:center;
font-family:inherit;
}
.adhan-mini-stop:active{ background:rgba(255,255,255,.30); }
/* Canlı yayın - kaynak switch + noembed */
.canli-sources{
padding:10px 16px;
background:var(--c-fill-1);
border-bottom:1px solid var(--c-fill-2);
}
.canli-sources-label{
font-size:12px;color:var(--c-text-3);
margin-bottom:8px;
}
.canli-sources-buttons{
display:flex;gap:6px;flex-wrap:wrap;
}
.canli-source-btn{
padding:6px 12px;
background:#fff;border:1px solid var(--c-fill-2);
border-radius:8px;cursor:pointer;
font-size:12px;font-weight:600;color:var(--c-text-2);
font-family:inherit;
}
.canli-source-btn.is-active{
background:var(--brand);color:#fff;border-color:var(--brand);
}
.canli-noembed{
display:flex;flex-direction:column;align-items:center;justify-content:center;
height:100%;color:rgba(255,255,255,.7);
text-align:center;padding:40px 20px;
}
/* Ezan seçim sheet */
.ezan-secim-wrap{ padding:0; }
.ezan-kategori{ margin-bottom:18px; }
.ezan-kategori-baslik{
font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:.5px;
color:var(--c-text-3);
margin:0 4px 8px;
}
.ezan-liste{ display:flex;flex-direction:column;gap:6px; }
.ezan-row{
display:flex;align-items:center;gap:12px;
padding:12px 14px;
background:var(--c-fill-1);
border:2px solid transparent;
border-radius:12px;cursor:pointer;
transition:background .12s, border-color .12s;
user-select:none;
-webkit-tap-highlight-color:transparent;
}
.ezan-row:active{ background:var(--c-fill-2); }
.ezan-row.is-active{
background:var(--brand-tint);
border-color:var(--brand);
}
.ezan-row input[type=radio]{
margin:0;flex-shrink:0;
accent-color:var(--brand);
width:20px;height:20px;
pointer-events:none;
}
.ezan-ad{ font-weight:600;font-size:14px;color:var(--c-text-1);line-height:1.3; }
.ezan-meta{ font-size:12px;color:var(--c-text-3);margin-top:2px;line-height:1.3; }
.ezan-onizle-btn{
width:38px;height:38px;
background:#fff;border:1px solid var(--c-fill-2);
border-radius:50%;cursor:pointer;
color:var(--brand);
display:flex;align-items:center;justify-content:center;
flex-shrink:0;
font-family:inherit;
}
.ezan-onizle-btn:active{ background:var(--c-fill-1); }
.ezan-row.is-active .ezan-onizle-btn{
background:var(--brand);color:#fff;border-color:var(--brand);
}
/* Ezan seçim - radio dot ve sticky footer */
.ezan-radio-dot{
width:22px;height:22px;flex-shrink:0;
border:2px solid var(--c-fill-2);
border-radius:50%;
background:#fff;
position:relative;
transition:border-color .15s, background .15s;
}
.ezan-radio-dot.is-on{
border-color:var(--brand);
background:var(--brand);
}
.ezan-radio-dot.is-on::after{
content:'';
position:absolute;
inset:4px;
background:#fff;
border-radius:50%;
}
.ezan-secim-footer{
position:sticky;
bottom:0;
left:0;right:0;
background:#fff;
border-top:1px solid var(--c-fill-1);
padding:14px 16px;
display:grid;
grid-template-columns:1fr 2fr;
gap:10px;
z-index:10;
margin:0 -16px -16px;
padding-bottom:calc(14px + env(safe-area-inset-bottom));
}
.ezan-secim-iptal{
padding:13px;
background:var(--c-fill-1);
border:0;border-radius:12px;
font-size:14px;font-weight:600;color:var(--c-text-1);
cursor:pointer;font-family:inherit;
}
.ezan-secim-kaydet{
padding:13px;
background:var(--c-fill-2);
color:var(--c-text-3);
border:0;border-radius:12px;
font-size:14px;font-weight:700;
cursor:not-allowed;font-family:inherit;
transition:all .15s;
}
.ezan-secim-kaydet.is-ready{
background:var(--brand);
color:#fff;
cursor:pointer;
box-shadow:var(--sh-brand);
}
.ezan-secim-kaydet.is-success{
background:#10b981;
color:#fff;
}
/* =====================================================================
* İletişim kartı (Settings ekranı altında)
* ===================================================================== */
.iletisim-card{
background: var(--c-bg-elev);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
border: 1px solid var(--c-fill-1);
}
.iletisim-header{
display: flex;
align-items: center;
gap: 14px;
padding: 18px 18px 16px;
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
color: #fff;
position: relative;
overflow: hidden;
}
.iletisim-header::after{
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 100% 0%, rgba(201,169,97,.18) 0%, transparent 50%);
pointer-events: none;
}
.iletisim-logo{
width: 46px; height: 46px;
background: rgba(255,255,255,.18);
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
position: relative;
z-index: 1;
}
.iletisim-baslik{ position: relative; z-index: 1; }
.iletisim-marka{
font-size: 16px; font-weight: 700;
letter-spacing: -.2px;
}
.iletisim-altbaslik{
font-size: 12px; opacity: .85;
margin-top: 2px;
}
.iletisim-row{
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
border-top: 1px solid var(--c-fill-1);
text-decoration: none;
color: var(--c-text-1);
cursor: pointer;
transition: background .12s;
-webkit-tap-highlight-color: transparent;
}
.iletisim-row:active{ background: var(--c-fill-1); }
.iletisim-row-icon{
width: 38px; height: 38px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.iletisim-row-text{ flex: 1; min-width: 0; }
.iletisim-row-baslik{
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: .5px;
color: var(--c-text-3);
margin-bottom: 2px;
}
.iletisim-row-deger{
font-size: 14px; color: var(--c-text-1);
line-height: 1.4;
font-weight: 500;
}
.iletisim-row-action{
color: var(--c-text-4);
flex-shrink: 0;
}
.iletisim-footer{
padding: 14px 18px;
background: var(--c-fill-1);
border-top: 1px solid var(--c-fill-2);
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
text-align: center;
}
.iletisim-copyright{
font-size: 12px; color: var(--c-text-2);
font-weight: 600;
}
.iletisim-version{
font-size: 11px; color: var(--c-text-4);
font-variant-numeric: tabular-nums;
}
/* =====================================================================
* Motivasyon (Yolculuğum) Modülü
* ===================================================================== */
.motivation-wrap{ padding:14px 16px 100px; }
/* Profil seçimi */
.profil-secim{ padding:30px 20px 100px;text-align:center; }
.profil-secim-header{ margin-bottom:30px;color:var(--brand); }
.profil-secim-header h2{ font-size:24px;font-weight:700;margin:14px 0 6px;color:var(--c-text-1); }
.profil-secim-header p{ font-size:14px;color:var(--c-text-3);line-height:1.5; }
.profil-card{
display:block;width:100%;
padding:18px;margin-bottom:12px;
background:var(--c-bg-elev);
border:2px solid var(--c-fill-1);
border-radius:16px;cursor:pointer;
font-family:inherit;text-align:center;
transition:all .15s;
}
.profil-card:active{ transform:scale(.98);border-color:var(--brand); }
.profil-card.is-loading{ opacity:.5;pointer-events:none; }
.profil-card-emoji{ font-size:32px;margin-bottom:6px; }
.profil-card-baslik{ font-size:17px;font-weight:700;color:var(--c-text-1);margin-bottom:4px; }
.profil-card-aciklama{ font-size:13px;color:var(--c-text-3);line-height:1.5;margin-bottom:8px; }
.profil-card-ozellik{
font-size:12px;color:var(--brand);font-weight:600;
padding:6px 12px;background:var(--brand-tint);
border-radius:10px;display:inline-block;
}
.profil-secim-footer{ font-size:12px;color:var(--c-text-4);margin-top:20px; }
/* Streak kartı */
.motiv-streak-card{
background:linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
color:#fff;border-radius:18px;
padding:24px 20px 18px;
text-align:center;margin-bottom:14px;
position:relative;overflow:hidden;
box-shadow:var(--sh-brand);
}
.motiv-streak-card.is-flame{
background:linear-gradient(135deg, #ff6b35 0%, #c1440e 100%);
box-shadow:0 8px 24px rgba(193,68,14,.35);
}
.streak-emoji{ font-size:42px;line-height:1;margin-bottom:6px; }
.streak-sayi{ font-size:56px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums; }
.streak-label{ font-size:14px;opacity:.9;margin-top:2px; }
.streak-rekor{ font-size:12px;opacity:.7;margin-top:8px; }
.streak-mola{ font-size:11px;opacity:.65;margin-top:4px; }
.streak-seviye{ margin-top:18px;border-top:1px solid rgba(255,255,255,.2);padding-top:14px; }
.seviye-baslik{ font-size:13px;font-weight:600;margin-bottom:6px; }
.seviye-bar{ height:6px;background:rgba(255,255,255,.2);border-radius:3px;overflow:hidden; }
.seviye-fill{ height:100%;background:#fff;border-radius:3px;transition:width .5s; }
.seviye-xp{ font-size:11px;opacity:.7;margin-top:4px; }
/* Genel motivasyon kartları */
.motiv-card{
background:var(--c-bg-elev);
border:1px solid var(--c-fill-1);
border-radius:14px;
padding:16px;margin-bottom:12px;
}
.motiv-card-baslik{
display:flex;align-items:center;gap:6px;
font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:.5px;
color:var(--c-text-3);margin-bottom:10px;
}
/* Akıllı mesaj */
.motiv-akilli{
background:linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border-color:#fbbf24;
}
.motiv-akilli .motiv-card-baslik{ color:#92400e; }
.motiv-akilli-metin{ font-size:15px;line-height:1.6;color:#451a03;font-weight:500; }
.motiv-akilli-kaynak{ font-size:12px;color:#92400e;margin-top:6px;font-style:italic; }
/* Heatmap */
.motiv-heatmap{
display:grid;grid-template-columns:repeat(7,1fr);gap:6px;
}
.heatmap-cell{ text-align:center; }
.heatmap-cell-box{
aspect-ratio:1;
background:var(--c-fill-1);
border-radius:6px;
margin-bottom:4px;
}
.heatmap-cell[data-level="1"] .heatmap-cell-box{ background:#a7f3d0; }
.heatmap-cell[data-level="2"] .heatmap-cell-box{ background:#6ee7b7; }
.heatmap-cell[data-level="3"] .heatmap-cell-box{ background:#34d399; }
.heatmap-cell[data-level="4"] .heatmap-cell-box{ background:var(--brand); }
.heatmap-cell-day{ font-size:10px;color:var(--c-text-3);font-weight:600; }
/* Mikro alışkanlık */
.motiv-mikro .mikro-arapca{
font-size:24px;line-height:1.6;text-align:center;
font-family:'Amiri','Scheherazade New',serif;
color:var(--c-text-1);
margin:8px 0;
padding:14px;background:var(--c-fill-1);border-radius:10px;
}
.motiv-mikro .mikro-meal{
font-size:14px;color:var(--c-text-2);line-height:1.6;
margin-bottom:6px;
}
.motiv-mikro .mikro-kaynak{ font-size:11px;color:var(--c-text-3); }
.motiv-mikro-btn{
width:100%;padding:12px;
background:var(--brand);color:#fff;
border:0;border-radius:12px;
font-size:14px;font-weight:700;
cursor:pointer;font-family:inherit;
margin-top:12px;
}
.motiv-mikro-bitti{
display:flex;align-items:center;gap:14px;
background:#dcfce7;border-color:#86efac;
}
.motiv-mikro-bitti-tik{
width:38px;height:38px;
background:#16a34a;color:#fff;
border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:20px;font-weight:bold;
flex-shrink:0;
}
/* Şükür */
.motiv-sukur-form .motiv-sukur-aciklama{
font-size:12px;color:var(--c-text-3);line-height:1.5;
margin-bottom:12px;
}
.sukur-input{
width:100%;
padding:11px 14px;
border:1px solid var(--c-fill-2);
border-radius:10px;
font-size:14px;
background:var(--c-bg-elev);
color:var(--c-text-1);
font-family:inherit;
margin-bottom:8px;
-webkit-appearance:none;appearance:none;
}
.sukur-input:focus{ outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint); }
.sukur-mood-label{
font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:.5px;
color:var(--c-text-3);margin:14px 0 8px;
}
.sukur-mood{ display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px; }
.mood-btn{
flex:1;min-width:80px;
padding:8px 10px;
background:var(--c-fill-1);
border:1px solid transparent;
border-radius:10px;
font-size:12px;font-weight:600;color:var(--c-text-2);
cursor:pointer;font-family:inherit;
transition:all .12s;
}
.mood-btn.is-active{
background:var(--brand);color:#fff;
border-color:var(--brand);
}
.motiv-sukur-btn{
width:100%;padding:13px;
background:var(--brand);color:#fff;
border:0;border-radius:12px;
font-size:14px;font-weight:700;
cursor:pointer;font-family:inherit;
}
.motiv-sukur-bitti .sukur-liste{
margin:0;padding-left:20px;
color:var(--c-text-1);font-size:14px;line-height:1.8;
}
/* Sosyal sayaç */
.motiv-sosyal{
display:flex;align-items:center;gap:14px;
background:linear-gradient(135deg,#dbeafe 0%, #bfdbfe 100%);
border-color:#93c5fd;
}
.motiv-sosyal-icon{
width:46px;height:46px;
background:#1e40af;color:#fff;
border-radius:12px;
display:flex;align-items:center;justify-content:center;
flex-shrink:0;
}
.motiv-sosyal-sayi{ font-size:18px;font-weight:700;color:#1e3a8a; }
.motiv-sosyal-aciklama{ font-size:12px;color:#1e40af;margin-top:2px; }
/* İpucu (zayıf vakit) */
.motiv-ipucu{
background:#fffbeb;
border-color:#fcd34d;
}
.motiv-ipucu-metin{ font-size:13px;color:#78350f;line-height:1.5; }
/* Müjde modal */
.mujde-modal-content{ text-align:center;padding:8px 4px 4px; }
.mujde-streak-badge{
display:inline-block;
padding:14px 24px;
background:linear-gradient(135deg,#ff6b35,#c1440e);
color:#fff;border-radius:20px;
margin-bottom:18px;
}
.mujde-streak-emoji{ font-size:32px; }
.mujde-streak-sayi{ font-size:36px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums; }
.mujde-streak-label{ font-size:11px;opacity:.85;text-transform:uppercase;letter-spacing:.5px; }
.mujde-metin{
font-size:17px;line-height:1.6;
color:var(--c-text-1);font-weight:500;
margin-bottom:8px;
}
.mujde-kaynak{
font-size:13px;color:var(--c-text-3);
font-style:italic;margin-bottom:14px;
}
.mujde-xp{
display:inline-block;
padding:6px 14px;
background:var(--brand-tint);
color:var(--brand);
border-radius:20px;
font-size:13px;font-weight:700;
}
/* =====================================================================
* Kıble Pusulası v2.0 (2026 - Profesyonel)
* ===================================================================== */
.qibla-wrap{ padding:14px 16px 100px; }
.qibla-header{
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
color: #fff;
padding: 18px 16px;
border-radius: 16px;
margin-bottom: 16px;
box-shadow: var(--sh-brand);
}
.qibla-info-row{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.qibla-info-row:has(#qiblaAccuracyBox[style*="display: none"]){
grid-template-columns: 1fr 1fr;
}
.qibla-info-row:has(#qiblaAccuracyBox:not([style*="display: none"])){
grid-template-columns: 1fr 1fr 1fr;
}
.qibla-info-item{ text-align: center; }
.qibla-info-label{
font-size: 11px;
text-transform: uppercase;
letter-spacing: .5px;
opacity: .8;
margin-bottom: 4px;
}
.qibla-info-value{
font-size: 22px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.qibla-info-value.is-good{ color: #86efac; }
.qibla-info-value.is-warn{ color: #fde68a; }
.qibla-info-value.is-bad{ color: #fca5a5; }
/* Pusula alanı */
.qibla-compass-area{
display: flex;
align-items: center;
justify-content: center;
padding: 30px 20px;
background: var(--c-bg-elev);
border: 1px solid var(--c-fill-1);
border-radius: 18px;
margin-bottom: 16px;
}
.qibla-compass{
position: relative;
width: 280px;
height: 280px;
max-width: 100%;
}
/* Pusula gül çiçeği - dönen kısım */
.compass-rose{
position: absolute;
inset: 0;
border: 3px solid var(--brand);
border-radius: 50%;
background:
radial-gradient(circle at 50% 50%, transparent 60%, var(--brand-tint) 60%, transparent 65%),
radial-gradient(circle at 50% 50%, var(--c-bg-elev) 70%, transparent 71%);
transition: transform .3s cubic-bezier(.4,.0,.2,1);
will-change: transform;
}
.compass-marker{
position: absolute;
font-size: 18px;
font-weight: 800;
color: var(--c-text-1);
font-family: 'Inter', sans-serif;
}
.compass-n{ top: 6px; left: 50%; transform: translateX(-50%); color: #dc2626; }
.compass-e{ right: 10px; top: 50%; transform: translateY(-50%); }
.compass-s{ bottom: 6px; left: 50%; transform: translateX(-50%); }
.compass-w{ left: 10px; top: 50%; transform: translateY(-50%); }
.compass-tick{
position: absolute;
top: 0; left: 50%;
width: 2px; height: 8px;
background: var(--c-fill-2);
transform-origin: 50% 140px;
margin-left: -1px;
}
.compass-tick.is-major{
background: var(--c-text-2);
height: 14px;
}
/* Cihazın baktığı yön - sabit yukarı (ok şeklinde) */
.compass-device-arrow{
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 14px solid #1a1a1a;
transform: translateX(-50%) translateY(-18px);
z-index: 5;
}
/* Kabe oku - rotasyonla döner */
.compass-qibla-arrow{
position: absolute;
inset: 0;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 20px;
pointer-events: none;
transition: transform .25s cubic-bezier(.4,.0,.2,1);
will-change: transform;
}
.compass-qibla-icon{
width: 50px; height: 50px;
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
box-shadow: 0 4px 14px rgba(41,153,129,.4);
border: 3px solid #fff;
}
.compass-center{
position: absolute;
top: 50%; left: 50%;
width: 16px; height: 16px;
background: var(--c-text-1);
border: 3px solid #fff;
border-radius: 50%;
transform: translate(-50%, -50%);
z-index: 10;
box-shadow: 0 0 0 1px var(--c-fill-2);
}
.compass-aligned{
position: absolute;
bottom: -45px;
left: 50%;
transform: translateX(-50%) scale(.5);
background: var(--brand);
color: #fff;
padding: 8px 18px;
border-radius: 20px;
font-size: 13px;
font-weight: 700;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: all .3s cubic-bezier(.4,.0,.2,1);
box-shadow: var(--sh-brand);
}
.compass-aligned.is-show{
opacity: 1;
transform: translateX(-50%) scale(1);
}
.qibla-actions{ margin-bottom: 16px; }
.btn-block{
width: 100%;
padding: 14px;
background: var(--brand);
color: #fff;
border: 0;
border-radius: 12px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
box-shadow: var(--sh-brand);
}
.btn-block.btn-secondary{
background: var(--c-bg-elev);
color: var(--c-text-1);
border: 1px solid var(--c-fill-2);
box-shadow: none;
}
.qibla-status{
padding: 12px 14px;
border-radius: 10px;
font-size: 13px;
margin-bottom: 16px;
display: none;
line-height: 1.5;
}
.qibla-status:not(:empty){ display: block; }
.qibla-status.is-info{ background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.qibla-status.is-warn{ background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.qibla-status.is-error{ background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
/* Harita */
.qibla-map-section{ margin-bottom: 16px; }
.qibla-section-title{
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--c-text-3);
margin-bottom: 8px;
padding-left: 4px;
}
.qibla-map{
height: 200px;
border-radius: 14px;
overflow: hidden;
background: var(--c-fill-1);
border: 1px solid var(--c-fill-1);
}
.qibla-user-marker{ background: transparent; border: 0; }
.qibla-user-pin{
width: 18px; height: 18px;
background: #0a84ff;
border: 3px solid #fff;
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(10,132,255,.3);
animation: qiblaUserPulse 2s infinite;
}
@keyframes qiblaUserPulse{
0%, 100%{ box-shadow: 0 0 0 3px rgba(10,132,255,.3); }
50%{ box-shadow: 0 0 0 10px rgba(10,132,255,.05); }
}
.qibla-kaaba-marker{ background: transparent; border: 0; }
.qibla-kaaba-pin{
width: 32px; height: 32px;
background: #1a1a1a;
border: 3px solid #fff;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.qibla-info-card{
background: var(--c-fill-1);
padding: 14px 16px;
border-radius: 12px;
font-size: 13px;
line-height: 1.55;
color: var(--c-text-2);
}
.qibla-info-card-title{
font-size: 13px;
font-weight: 700;
color: var(--c-text-1);
margin-bottom: 4px;
}
/* =====================================================================
* Sosyal Medya Modülü
* ===================================================================== */
.sosyal-wrap{ padding: 14px 16px 100px; }
.sosyal-kanallar{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
margin-bottom: 16px;
}
.sosyal-kanal{
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px;
border-radius: 14px;
text-decoration: none;
font-weight: 700;
font-size: 14px;
color: #fff;
transition: transform .12s;
-webkit-tap-highlight-color: transparent;
}
.sosyal-kanal:active{ transform: scale(.97); }
.sosyal-kanal-ig{
background: linear-gradient(135deg, #833ab4 0%, #e1306c 50%, #f77737 100%);
box-shadow: 0 4px 12px rgba(225,48,108,.30);
}
.sosyal-kanal-fb{
background: #1877f2;
box-shadow: 0 4px 12px rgba(24,119,242,.30);
}
.sosyal-kanal-yt{
background: #ff0000;
box-shadow: 0 4px 12px rgba(255,0,0,.30);
}
.sosyal-kanal-tw{
background: #000;
box-shadow: 0 4px 12px rgba(0,0,0,.30);
}
.sosyal-filtreler{
display: flex;
gap: 6px;
overflow-x: auto;
scrollbar-width: none;
margin-bottom: 14px;
padding-bottom: 4px;
}
.sosyal-filtreler::-webkit-scrollbar{ display: none; }
.sosyal-filtre{
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
background: var(--c-bg-elev);
border: 1px solid var(--c-fill-2);
border-radius: 18px;
font-size: 13px;
font-weight: 600;
color: var(--c-text-2);
cursor: pointer;
font-family: inherit;
white-space: nowrap;
}
.sosyal-filtre.is-active{
background: var(--brand);
color: #fff;
border-color: var(--brand);
}
.sosyal-filtre-count{
background: rgba(0,0,0,.1);
padding: 1px 7px;
border-radius: 10px;
font-size: 11px;
font-weight: 700;
}
.sosyal-filtre.is-active .sosyal-filtre-count{ background: rgba(255,255,255,.25); }
.sosyal-feed{
display: flex;
flex-direction: column;
gap: 16px;
}
.sosyal-post{
background: var(--c-bg-elev);
border: 1px solid var(--c-fill-1);
border-radius: 16px;
overflow: hidden;
}
/* Instagram embed iframe */
.sosyal-post-ig iframe{
width: 100%;
min-height: 600px;
max-height: 800px;
border: 0;
background: #fff;
display: block;
}
/* YouTube embed - 16:9 aspect ratio */
.sosyal-yt-frame{
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
}
.sosyal-yt-frame iframe{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* Facebook embed */
.sosyal-post-fb iframe{
width: 100%;
border: 0;
background: #fff;
display: block;
}
.sosyal-post-meta{ padding: 12px 14px; }
.sosyal-post-baslik{
font-size: 14px;
font-weight: 700;
color: var(--c-text-1);
line-height: 1.4;
}
.sosyal-post-aciklama{
font-size: 13px;
color: var(--c-text-3);
line-height: 1.55;
margin-top: 4px;
}
.sosyal-post-link{
display: block;
padding: 11px 14px;
border-top: 1px solid var(--c-fill-1);
font-size: 13px;
font-weight: 600;
color: var(--brand);
text-decoration: none;
text-align: center;
background: var(--c-fill-1);
}
.sosyal-post-link:active{ background: var(--c-fill-2); }
.sosyal-post-link-only{
display: block;
padding: 16px;
text-decoration: none;
color: var(--c-text-1);
}
.sosyal-post-platform{
display: inline-block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--brand);
margin-bottom: 6px;
}
.sosyal-empty-link{ color: var(--brand); font-weight: 700; text-decoration: none; }
/* =====================================================================
* 3D-look İslami SVG ikonları için module-icon override
* ===================================================================== */
.module-icon.m3d{
background: linear-gradient(145deg, #fefcf3 0%, #f1eadc 100%) !important;
box-shadow:
0 6px 14px rgba(124, 90, 46, .12),
0 1px 0 rgba(255,255,255, .9) inset,
0 -2px 4px rgba(124, 90, 46, .08) inset !important;
padding: 6px;
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
}
.module-icon.m3d .m3d-svg{
width: 100%;
height: 100%;
filter: drop-shadow(0 2px 4px rgba(0,0,0,.18));
transition: transform .25s cubic-bezier(.4,.0,.2,1);
}
.module:active .module-icon.m3d .m3d-svg{
transform: scale(.92);
}
.module:hover .module-icon.m3d{
transform: translateY(-2px);
box-shadow:
0 10px 20px rgba(124, 90, 46, .16),
0 1px 0 rgba(255,255,255, .9) inset,
0 -2px 4px rgba(124, 90, 46, .08) inset !important;
}
.module-icon.m3d::before,
.module-icon.m3d::after{ display: none; }
/* =====================================================================
* Yolculuğum (Journey) Modülü - İslami tasarım
* ===================================================================== */
.ji-wrap{ padding: 14px 16px 100px; }
/* Profil seçimi */
.ji-profil-secim{ padding: 30px 20px 100px; }
.ji-profil-header{ text-align: center; margin-bottom: 30px; }
.ji-profil-header h2{
font-size: 22px; font-weight: 700;
color: var(--c-text-1);
margin: 14px 0 6px;
}
.ji-profil-header p{
font-size: 14px; color: var(--c-text-3);
line-height: 1.5; max-width: 320px; margin: 0 auto;
}
.ji-profil-card{
display: flex; align-items: center; gap: 16px;
width: 100%; padding: 16px;
margin-bottom: 12px;
background: linear-gradient(145deg, #fefcf3 0%, #f1eadc 100%);
border: 1px solid var(--c-fill-1);
border-radius: 16px;
cursor: pointer; font-family: inherit; text-align: left;
transition: all .15s;
box-shadow:
0 4px 12px rgba(124,90,46,.08),
0 1px 0 rgba(255,255,255,.9) inset;
}
.ji-profil-card:active{ transform: scale(.98); }
.ji-profil-card.is-loading{ opacity: .5; pointer-events: none; }
.ji-profil-icon{
flex-shrink: 0;
width: 64px; height: 64px;
display: flex; align-items: center; justify-content: center;
}
.ji-profil-text{ flex: 1; }
.ji-profil-baslik{
font-size: 17px; font-weight: 700;
color: var(--c-text-1); margin-bottom: 4px;
}
.ji-profil-aciklama{
font-size: 13px; color: var(--c-text-3);
line-height: 1.45; margin-bottom: 8px;
}
.ji-profil-ozellik{
display: inline-block;
font-size: 11px; font-weight: 700;
color: var(--brand);
padding: 4px 10px;
background: var(--brand-tint);
border-radius: 8px;
}
.ji-profil-footer{
text-align: center;
font-size: 12px; color: var(--c-text-4);
margin-top: 20px;
}
/* Süreklilik / Streak kartı - altın gradient (Allah ekber çağrı rengi) */
.ji-streak-card{
background: linear-gradient(160deg, #fbe79e 0%, #c9a961 50%, #9c7a2e 100%);
color: #fff;
border-radius: 18px;
padding: 22px 20px 18px;
text-align: center;
margin-bottom: 14px;
position: relative;
overflow: hidden;
box-shadow:
0 8px 24px rgba(156, 122, 46, .35),
0 1px 0 rgba(255,255,255, .6) inset;
}
.ji-streak-card.is-glow{
background: linear-gradient(160deg, #fffaed 0%, #fbe79e 30%, #c9a961 70%, #7c4a1c 100%);
box-shadow:
0 8px 28px rgba(193,68,14,.30),
0 1px 0 rgba(255,255,255, .7) inset,
0 0 40px rgba(251,231,158,.4);
}
.ji-streak-ikon{
display: flex; justify-content: center;
margin-bottom: 4px;
filter: drop-shadow(0 4px 8px rgba(0,0,0,.2));
}
.ji-streak-sayi{
font-size: 56px; font-weight: 800;
line-height: 1; font-variant-numeric: tabular-nums;
color: #fffaed;
text-shadow: 0 2px 4px rgba(124,74,28,.3);
}
.ji-streak-label{
font-size: 14px;
color: rgba(255,250,237,.95);
margin-top: 2px;
font-weight: 600;
}
.ji-streak-rekor{
font-size: 12px;
color: rgba(255,250,237,.8);
margin-top: 8px;
}
.ji-streak-mola{
font-size: 11px;
color: rgba(255,250,237,.7);
margin-top: 4px;
}
.ji-streak-seviye{
margin-top: 16px;
border-top: 1px solid rgba(255,255,255,.25);
padding-top: 12px;
}
.ji-seviye-baslik{
font-size: 13px; font-weight: 600;
color: rgba(255,250,237,.95);
margin-bottom: 6px;
}
.ji-seviye-bar{
height: 6px;
background: rgba(255,250,237,.25);
border-radius: 3px; overflow: hidden;
}
.ji-seviye-fill{
height: 100%;
background: rgba(255,250,237,1);
border-radius: 3px;
transition: width .5s;
box-shadow: 0 0 8px rgba(255,250,237,.6);
}
/* Genel kartlar */
.ji-card{
background: var(--c-bg-elev);
border: 1px solid var(--c-fill-1);
border-radius: 14px;
padding: 16px;
margin-bottom: 12px;
}
.ji-card-baslik{
display: flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: .5px;
color: var(--c-text-3);
margin-bottom: 10px;
}
/* Akıllı mesaj (hadis-i şerif) */
.ji-akilli{
background: linear-gradient(145deg, #fefcf3 0%, #f5edd3 100%);
border-color: #e6dec1;
}
.ji-akilli .ji-card-baslik{ color: #7c4a1c; }
.ji-akilli-metin{
font-size: 15px; line-height: 1.65;
color: #1f1305; font-weight: 500;
font-style: italic;
}
.ji-akilli-kaynak{
font-size: 12px; color: #7c4a1c;
margin-top: 8px;
text-align: right;
}
/* Heatmap */
.ji-heatmap{ display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; }
.ji-heatmap-cell{ text-align: center; }
.ji-heatmap-box{
aspect-ratio: 1;
background: var(--c-fill-1);
border-radius: 6px;
margin-bottom: 4px;
}
.ji-heatmap-cell[data-level="1"] .ji-heatmap-box{ background: #d6e9d2; }
.ji-heatmap-cell[data-level="2"] .ji-heatmap-box{ background: #86efac; }
.ji-heatmap-cell[data-level="3"] .ji-heatmap-box{ background: #34d399; }
.ji-heatmap-cell[data-level="4"] .ji-heatmap-box{
background: linear-gradient(145deg, #2fae93 0%, #1d6f5e 100%);
box-shadow: 0 2px 4px rgba(41,153,129,.3);
}
.ji-heatmap-day{
font-size: 10px; color: var(--c-text-3);
font-weight: 600;
}
/* Mikro amel */
.ji-mikro-arapca{
font-size: 24px; line-height: 1.7; text-align: center;
font-family: 'Amiri','Scheherazade New',serif;
color: var(--c-text-1);
margin: 8px 0;
padding: 16px;
background: linear-gradient(145deg, #fefcf3 0%, #f5edd3 100%);
border-radius: 10px;
border: 1px solid #e6dec1;
}
.ji-mikro-meal{
font-size: 14px; color: var(--c-text-2);
line-height: 1.6; margin-bottom: 6px;
}
.ji-mikro-kaynak{
font-size: 11px; color: var(--c-text-3);
text-align: right;
}
.ji-btn-primary{
width: 100%;
padding: 13px;
background: linear-gradient(145deg, var(--brand-2) 0%, var(--brand-dark) 100%);
color: #fff;
border: 0; border-radius: 12px;
font-size: 14px; font-weight: 700;
cursor: pointer; font-family: inherit;
margin-top: 12px;
box-shadow: 0 4px 12px rgba(41,153,129,.25);
}
.ji-btn-primary:active{ transform: scale(.98); }
.ji-btn-primary:disabled{ opacity: .6; }
.ji-mikro-bitti{
display: flex; align-items: center; gap: 14px;
background: linear-gradient(145deg, #d1fae5 0%, #a7f3d0 100%);
border-color: #86efac;
}
.ji-mikro-bitti-tik{ flex-shrink: 0; }
.ji-mikro-bitti-baslik{
font-weight: 700; font-size: 14px;
color: #064e3b;
}
.ji-mikro-bitti-alt{
font-size: 12px; color: #166534;
margin-top: 2px;
}
/* Şükür defteri */
.ji-sukur-aciklama{
font-size: 12px; color: var(--c-text-3);
line-height: 1.5; margin-bottom: 12px;
}
.ji-input{
width: 100%;
padding: 11px 14px;
border: 1px solid var(--c-fill-2);
border-radius: 10px;
font-size: 14px;
background: var(--c-bg-elev);
color: var(--c-text-1);
font-family: inherit;
margin-bottom: 8px;
-webkit-appearance: none; appearance: none;
}
.ji-input:focus{
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px var(--brand-tint);
}
.ji-mood-label{
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: .5px;
color: var(--c-text-3);
margin: 14px 0 8px;
}
.ji-mood-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
gap: 6px;
margin-bottom: 14px;
}
.ji-mood-btn{
display: flex; flex-direction: column;
align-items: center; gap: 4px;
padding: 10px 6px;
background: var(--c-fill-1);
border: 2px solid transparent;
border-radius: 12px;
font-size: 11px; font-weight: 600;
color: var(--c-text-2);
cursor: pointer; font-family: inherit;
transition: all .12s;
}
.ji-mood-btn.is-active{
background: linear-gradient(145deg, #fefcf3 0%, #f1eadc 100%);
border-color: var(--brand);
color: var(--c-text-1);
box-shadow: 0 2px 6px rgba(41,153,129,.15);
}
.ji-mood-btn .ji-svg{ filter: drop-shadow(0 2px 3px rgba(0,0,0,.15)); }
.ji-sukur-bitti .ji-sukur-liste{
margin: 0; padding-left: 20px;
color: var(--c-text-1); font-size: 14px;
line-height: 1.85;
}
.ji-sukur-bitti .ji-sukur-liste li::marker{ color: var(--brand); font-weight: 700; }
/* Sosyal */
.ji-sosyal{
display: flex; align-items: center; gap: 14px;
background: linear-gradient(145deg, #f5edd3 0%, #e6dec1 100%);
border-color: #d6c79a;
}
.ji-sosyal-icon{ flex-shrink: 0; }
.ji-sosyal-sayi{
font-size: 17px; font-weight: 700;
color: #7c4a1c;
}
.ji-sosyal-aciklama{
font-size: 12px; color: #9c7a2e;
margin-top: 2px;
}
/* İpucu */
.ji-ipucu{
background: linear-gradient(145deg, #fefcf3 0%, #fef3c7 100%);
border-color: #fde68a;
}
.ji-ipucu-metin{
font-size: 13px; color: #78350f;
line-height: 1.55;
}
/* Müjde modal */
.ji-mujde-modal{ text-align: center; padding: 8px 4px 4px; }
.ji-mujde-streak-badge{
display: inline-flex; flex-direction: column; align-items: center;
padding: 16px 30px;
background: linear-gradient(160deg, #fbe79e 0%, #c9a961 50%, #9c7a2e 100%);
color: #fff;
border-radius: 20px;
margin-bottom: 18px;
box-shadow: 0 8px 24px rgba(156, 122, 46, .3);
}
.ji-mujde-streak-icon{ filter: drop-shadow(0 4px 8px rgba(0,0,0,.2)); }
.ji-mujde-streak-sayi{
font-size: 38px; font-weight: 800;
line-height: 1; font-variant-numeric: tabular-nums;
color: #fffaed;
margin-top: 4px;
text-shadow: 0 2px 4px rgba(124,74,28,.3);
}
.ji-mujde-streak-label{
font-size: 11px;
color: rgba(255,250,237,.95);
text-transform: uppercase;
letter-spacing: .5px;
margin-top: 4px;
}
.ji-mujde-metin{
font-size: 17px; line-height: 1.65;
color: var(--c-text-1); font-weight: 500;
margin-bottom: 8px; font-style: italic;
}
.ji-mujde-kaynak{
font-size: 13px; color: var(--c-text-3);
margin-bottom: 14px;
}
.ji-mujde-xp{
display: inline-block;
padding: 6px 14px;
background: var(--brand-tint);
color: var(--brand);
border-radius: 20px;
font-size: 13px; font-weight: 700;
}
/* =====================================================================
* Bağış Modülü v2.0 - Kategorili
* ===================================================================== */
.bagis-wrap{ padding: 14px 16px 100px; }
.bagis-hero{
background: linear-gradient(160deg, #fbe79e 0%, #c9a961 50%, #9c7a2e 100%);
border-radius: 18px;
padding: 24px 20px;
text-align: center;
margin-bottom: 18px;
color: #fff;
box-shadow: 0 8px 24px rgba(156,122,46,.30);
position: relative; overflow: hidden;
}
.bagis-hero-icon{
display: flex; justify-content: center;
margin-bottom: 8px;
filter: drop-shadow(0 4px 8px rgba(0,0,0,.15));
}
.bagis-hero-baslik{
font-size: 20px; font-weight: 700;
color: #fffaed;
text-shadow: 0 2px 4px rgba(124,74,28,.3);
}
.bagis-hero-aciklama{
font-size: 13px;
color: rgba(255,250,237,.9);
margin-top: 6px;
line-height: 1.5;
}
.bagis-bolum{ margin-bottom: 18px; }
.bagis-bolum-baslik{
font-size: 12px; font-weight: 700;
text-transform: uppercase; letter-spacing: .5px;
color: var(--c-text-3);
padding: 0 4px 8px;
}
/* Öncelikli grid - 2 sütun büyük kartlar */
.bagis-grid-oncelikli{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.bagis-kart-oncelikli{
display: flex;
flex-direction: column;
background: var(--c-bg-elev);
border: 1px solid var(--c-fill-1);
border-radius: 16px;
padding: 16px 14px 14px;
text-align: left;
font-family: inherit;
cursor: pointer;
position: relative;
transition: transform .15s, box-shadow .15s;
box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.bagis-kart-oncelikli:active{
transform: scale(.98);
box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.bagis-kart-rozet{
position: absolute; top: 10px; right: 10px;
background: linear-gradient(135deg, #ef4444, #b91c1c);
color: #fff;
padding: 3px 8px;
border-radius: 8px;
font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: .5px;
z-index: 1;
}
.bagis-kart-ikon{
width: 72px; height: 72px;
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,.12);
filter: drop-shadow(0 2px 4px rgba(0,0,0,.08));
}
.bagis-kart-ikon .ji-svg{
filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
}
.bagis-kart-baslik{
font-size: 15px; font-weight: 700;
color: var(--c-text-1);
margin-bottom: 4px;
line-height: 1.3;
}
.bagis-kart-aciklama{
font-size: 12px; color: var(--c-text-3);
line-height: 1.45;
flex: 1;
margin-bottom: 10px;
}
.bagis-kart-cta{
display: inline-flex;
align-items: center; gap: 4px;
font-size: 12px; font-weight: 700;
color: var(--brand);
}
/* Normal grid - 1 sütun yatay kartlar */
.bagis-grid-normal{
display: flex;
flex-direction: column;
gap: 10px;
}
.bagis-kart-normal{
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: var(--c-bg-elev);
border: 1px solid var(--c-fill-1);
border-radius: 14px;
text-align: left;
font-family: inherit;
cursor: pointer;
transition: background .12s;
-webkit-tap-highlight-color: transparent;
}
.bagis-kart-normal:active{ background: var(--c-fill-1); }
.bagis-kart-ikon-mini{
width: 50px; height: 50px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(0,0,0,.10);
}
.bagis-kart-ikon-mini .ji-svg{
filter: drop-shadow(0 1px 2px rgba(0,0,0,.2));
}
.bagis-kart-text{ flex: 1; min-width: 0; }
.bagis-kart-aciklama-kisa{
font-size: 12px; color: var(--c-text-3);
line-height: 1.4; margin-top: 2px;
}
.bagis-kart-chev{
flex-shrink: 0;
color: var(--c-text-4);
}
/* Bilgi kartı */
.bagis-bilgi-card{
background: linear-gradient(145deg, #fefcf3 0%, #f5edd3 100%);
border: 1px solid #e6dec1;
border-radius: 14px;
padding: 14px 16px;
}
.bagis-bilgi-baslik{
display: flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 700;
color: #7c4a1c;
margin-bottom: 8px;
}
.bagis-bilgi-list{
font-size: 13px;
color: var(--c-text-2);
line-height: 1.7;
}
.bagis-bilgi-list strong{ color: var(--c-text-1); }
/* ============ DETAY SHEET ============ */
.bagis-detay{ padding: 0 4px; }
.bagis-detay-header{
display: flex; flex-direction: column; align-items: center;
text-align: center;
margin-bottom: 16px;
padding: 12px 0 18px;
border-bottom: 1px solid var(--c-fill-1);
}
.bagis-detay-ikon{
margin-bottom: 8px;
filter: drop-shadow(0 4px 8px rgba(0,0,0,.12));
}
.bagis-detay-baslik{
font-size: 22px; font-weight: 700;
color: var(--c-text-1);
}
.bagis-detay-hadis{
background: linear-gradient(145deg, #fefcf3 0%, #f5edd3 100%);
border: 1px solid #e6dec1;
border-radius: 12px;
padding: 14px 16px;
margin-bottom: 14px;
}
.bagis-detay-hadis-metin{
font-size: 14px; line-height: 1.65;
color: #1f1305;
font-style: italic;
}
.bagis-detay-hadis-kaynak{
font-size: 12px; color: #7c4a1c;
margin-top: 6px; text-align: right;
}
.bagis-detay-aciklama{
font-size: 14px; line-height: 1.6;
color: var(--c-text-2);
margin-bottom: 18px;
padding: 0 2px;
}
.bagis-section-label{
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: .5px;
color: var(--c-text-3);
margin-bottom: 8px;
padding: 0 2px;
}
.bagis-tutarlar{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 8px;
}
.bagis-tutar-btn{
padding: 12px 6px;
background: var(--c-bg-elev);
border: 2px solid var(--c-fill-2);
border-radius: 10px;
font-size: 14px; font-weight: 700;
color: var(--c-text-1);
cursor: pointer;
font-family: inherit;
font-variant-numeric: tabular-nums;
transition: all .12s;
}
.bagis-tutar-btn:active{ transform: scale(.97); }
.bagis-tutar-btn.is-active{
background: var(--brand);
color: #fff;
border-color: var(--brand);
box-shadow: 0 2px 8px rgba(41,153,129,.25);
}
.bagis-tutar-ozel{ font-size: 13px; }
.bagis-tutar-input{
width: 100%;
padding: 12px 14px;
border: 2px solid var(--brand);
border-radius: 10px;
font-size: 16px; font-weight: 700;
font-family: inherit;
font-variant-numeric: tabular-nums;
margin-top: 6px;
margin-bottom: 14px;
background: var(--c-bg-elev);
color: var(--c-text-1);
}
.bagis-tutar-input:focus{
outline: none;
box-shadow: 0 0 0 3px var(--brand-tint);
}
/* IBAN kart */
.bagis-iban-card{
background: var(--c-bg-elev);
border: 1px solid var(--c-fill-1);
border-radius: 12px;
padding: 14px;
margin: 18px 0;
}
.bagis-iban-baslik{
display: flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 700;
text-transform: uppercase; letter-spacing: .5px;
color: var(--c-text-3);
margin-bottom: 10px;
}
.bagis-iban-row{
display: flex; justify-content: space-between; align-items: center;
padding: 6px 0;
font-size: 13px;
border-bottom: 1px solid var(--c-fill-1);
}
.bagis-iban-row:last-child{ border-bottom: 0; }
.bagis-iban-label{ color: var(--c-text-3); }
.bagis-iban-deger{ color: var(--c-text-1); font-weight: 600; }
.bagis-iban-no-row{ flex-direction: column; align-items: flex-start; gap: 6px; }
.bagis-iban-no{
display: flex; justify-content: space-between; align-items: center; gap: 8px;
width: 100%;
padding: 10px 12px;
background: var(--brand-tint);
border: 1px dashed var(--brand);
border-radius: 8px;
cursor: pointer;
font-family: 'Consolas','Monaco',monospace;
font-size: 13px;
color: var(--brand);
font-weight: 700;
letter-spacing: .5px;
}
.bagis-iban-no:active{ background: rgba(41,153,129,.15); }
.bagis-iban-no span{
flex: 1; text-align: left; word-break: break-all;
}
.bagis-iban-aciklama{
margin-top: 10px;
padding: 10px 12px;
background: var(--c-fill-1);
border-radius: 8px;
font-size: 12px;
color: var(--c-text-2);
line-height: 1.5;
}
/* Aksiyonlar */
.bagis-detay-actions{
display: flex; flex-direction: column; gap: 8px;
margin-top: 18px;
padding-bottom: 14px;
}
.bagis-btn-primary, .bagis-btn-secondary{
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%;
padding: 13px;
border-radius: 12px;
font-size: 14px; font-weight: 700;
cursor: pointer;
font-family: inherit;
text-decoration: none;
border: 0;
transition: transform .1s;
}
.bagis-btn-primary{
background: linear-gradient(145deg, var(--brand-2) 0%, var(--brand-dark) 100%);
color: #fff;
box-shadow: 0 4px 12px rgba(41,153,129,.25);
}
.bagis-btn-secondary{
background: var(--c-fill-1);
color: var(--c-text-1);
border: 1px solid var(--c-fill-2);
}
.bagis-btn-primary:active, .bagis-btn-secondary:active{ transform: scale(.98); }
.bagis-btn-primary:disabled, .bagis-btn-secondary:disabled{ opacity: .6; }
/* =====================================================================
* Bağış v2.1 - Hero görsel + IBAN şeridi + Tuğra
* Eski .bagis-hero (gradient) yerine görsel tabanlı hero
* ===================================================================== */
.bagis-hero-image{
position: relative;
width: 100%;
aspect-ratio: 4 / 5; /* Görsel orantısı (1440x1800) */
background-size: cover;
background-position: center;
border-radius: 18px;
margin-bottom: 0;
box-shadow: 0 8px 24px rgba(20, 60, 110, .25);
overflow: hidden;
}
.bagis-hero-overlay{
/* Görsel kendi içinde zaten kompozit (yazı + IBAN + tuğra) - overlay'e gerek yok
ama hafif altta gradient yumuşatma */
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 70%, rgba(0,0,0,.15) 100%);
pointer-events: none;
}
/* IBAN bandı - görsel altında, koyu mavi-siyah arka plan */
.bagis-iban-band{
background: linear-gradient(135deg, #0a3556 0%, #061f37 100%);
color: #fff;
border-radius: 14px;
padding: 14px 16px;
margin-top: -20px; /* Görsele biraz girer */
margin-bottom: 18px;
position: relative;
z-index: 2;
box-shadow: 0 6px 18px rgba(6, 31, 55, .35);
}
.bagis-iban-band-dernek{
font-size: 12px;
color: rgba(255,255,255,.85);
margin-bottom: 8px;
text-align: center;
font-weight: 500;
line-height: 1.3;
}
.bagis-iban-band-no{
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 12px 14px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.18);
border-radius: 10px;
cursor: pointer;
font-family: inherit;
color: #fff;
-webkit-tap-highlight-color: transparent;
transition: background .12s;
}
.bagis-iban-band-no:active{ background: rgba(255,255,255,.15); }
.bagis-iban-band-prefix{
font-size: 11px;
font-weight: 700;
color: rgba(255,255,255,.6);
letter-spacing: 1px;
}
.bagis-iban-band-deger{
flex: 1;
font-family: 'Consolas','Monaco',monospace;
font-size: 14px;
font-weight: 700;
letter-spacing: .8px;
color: #fff;
text-align: center;
word-break: break-all;
line-height: 1.3;
}
.bagis-iban-band-icon{
flex-shrink: 0;
color: rgba(255,255,255,.85);
}
.bagis-iban-band-hint{
font-size: 11px;
color: rgba(255,255,255,.55);
text-align: center;
margin-top: 8px;
}
/* Tuğra - footer dernek isimleri */
.bagis-tugra{
text-align: center;
padding: 24px 16px 8px;
margin-top: 8px;
}
.bagis-tugra-ad{
font-size: 14px;
font-weight: 700;
color: var(--c-text-1);
letter-spacing: 1.5px;
text-transform: uppercase;
}
.bagis-tugra-alt{
font-size: 11px;
color: var(--c-text-3);
margin-top: 4px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 500;
}
/* =====================================================================
* Sohbetler Modülü v2.0 - Profesyonel
* ===================================================================== */
.sohbetler-wrap{ padding: 0 0 100px; }
/* Kanal başlığı */
.sohbetler-channel{
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
color: #fff;
margin-bottom: 14px;
position: relative;
}
.sohbetler-channel-icon{
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(255,255,255,.18);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
}
.sohbetler-channel-info{ flex: 1; min-width: 0; }
.sohbetler-channel-name{
font-size: 15px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sohbetler-channel-meta{
font-size: 12px;
opacity: .9;
margin-top: 2px;
}
.sohbetler-channel-btn{
flex-shrink: 0;
width: 38px; height: 38px;
border-radius: 10px;
background: rgba(255,255,255,.18);
display: flex; align-items: center; justify-content: center;
color: #fff;
text-decoration: none;
transition: background .12s;
}
.sohbetler-channel-btn:active{ background: rgba(255,255,255,.3); }
/* Filtre chip'leri */
.sohbetler-filtreler{
display: flex;
gap: 6px;
padding: 0 16px 14px;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.sohbetler-filtreler::-webkit-scrollbar{ display: none; }
.sohbetler-chip{
flex-shrink: 0;
padding: 7px 14px;
background: var(--c-bg-elev);
border: 1px solid var(--c-fill-2);
border-radius: 18px;
font-size: 13px;
font-weight: 600;
color: var(--c-text-2);
cursor: pointer;
font-family: inherit;
white-space: nowrap;
transition: all .12s;
}
.sohbetler-chip.is-active{
background: var(--c-text-1);
color: var(--c-bg);
border-color: var(--c-text-1);
}
/* Featured (en yeni sohbet) */
.sohbetler-featured{
margin: 0 16px 18px;
background: var(--c-bg-elev);
border: 1px solid var(--c-fill-1);
border-radius: 16px;
overflow: hidden;
cursor: pointer;
transition: transform .15s, box-shadow .15s;
-webkit-tap-highlight-color: transparent;
display: block;
width: calc(100% - 32px);
text-align: left;
padding: 0;
font-family: inherit;
border: 0;
}
.sohbetler-featured:active{ transform: scale(.98); }
.sohbetler-featured-thumb{
position: relative;
background: #000;
aspect-ratio: 16/9;
overflow: hidden;
}
.sohbetler-featured-thumb img{
width: 100%; height: 100%; object-fit: cover;
display: block;
}
.sohbetler-featured-overlay{
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.4) 100%);
display: flex; align-items: center; justify-content: center;
transition: background .2s;
}
.sohbetler-featured:active .sohbetler-featured-overlay{
background: linear-gradient(180deg, rgba(0,0,0,.2) 50%, rgba(0,0,0,.5) 100%);
}
.sohbetler-featured-play{
width: 64px; height: 64px;
border-radius: 50%;
background: rgba(0,0,0,.7);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
border: 2px solid rgba(255,255,255,.3);
box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.sohbetler-featured-badge{
position: absolute;
top: 10px; left: 10px;
background: linear-gradient(135deg, #ef4444, #b91c1c);
color: #fff;
font-size: 10px;
font-weight: 800;
letter-spacing: .8px;
padding: 4px 10px;
border-radius: 6px;
text-transform: uppercase;
box-shadow: 0 2px 8px rgba(239,68,68,.4);
}
.sohbetler-featured-duration{
position: absolute;
bottom: 10px; right: 10px;
background: rgba(0,0,0,.85);
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 3px 8px;
border-radius: 4px;
font-variant-numeric: tabular-nums;
}
.sohbetler-featured-info{ padding: 14px 16px; }
.sohbetler-featured-baslik{
font-size: 15px;
font-weight: 700;
line-height: 1.4;
color: var(--c-text-1);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 6px;
}
.sohbetler-featured-meta{
font-size: 12px;
color: var(--c-text-3);
display: flex;
gap: 6px;
align-items: center;
}
/* Bölüm başlığı */
.sohbetler-bolum-baslik{
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 16px 10px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--c-text-3);
}
.sohbetler-yenile{
width: 32px; height: 32px;
border-radius: 50%;
background: var(--c-fill-1);
border: 0;
display: flex; align-items: center; justify-content: center;
color: var(--c-text-2);
cursor: pointer;
font-family: inherit;
transition: background .12s;
}
.sohbetler-yenile:active{ background: var(--c-fill-2); }
.sohbetler-yenile.is-rotating svg{
animation: sohbetSpin 1s linear infinite;
}
@keyframes sohbetSpin {
to { transform: rotate(360deg); }
}
/* Liste */
.sohbetler-liste{
display: flex;
flex-direction: column;
padding: 0 16px;
}
.sohbetler-item{
display: flex;
gap: 12px;
padding: 8px;
background: transparent;
border: 0;
border-radius: 10px;
cursor: pointer;
font-family: inherit;
text-align: left;
-webkit-tap-highlight-color: transparent;
transition: background .12s;
align-items: flex-start;
}
.sohbetler-item + .sohbetler-item{
border-top: 1px solid var(--c-fill-1);
border-radius: 0 0 10px 10px;
padding-top: 12px;
}
.sohbetler-item:active{ background: var(--c-fill-1); }
.sohbetler-item-thumb{
position: relative;
width: 140px;
aspect-ratio: 16/9;
background: #000;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
}
.sohbetler-item-thumb img{
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.sohbetler-item-duration{
position: absolute;
bottom: 4px; right: 4px;
background: rgba(0,0,0,.85);
color: #fff;
font-size: 10px;
font-weight: 700;
padding: 2px 6px;
border-radius: 3px;
font-variant-numeric: tabular-nums;
}
.sohbetler-item-info{
flex: 1;
min-width: 0;
padding-top: 2px;
}
.sohbetler-item-baslik{
font-size: 14px;
font-weight: 600;
line-height: 1.4;
color: var(--c-text-1);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 4px;
}
.sohbetler-item-meta{
font-size: 12px;
color: var(--c-text-3);
display: flex;
gap: 4px;
align-items: center;
}
/* Tüm sohbetler YT */
.sohbetler-tum-yt{
text-align: center;
padding: 18px 16px 10px;
}
.sohbetler-tum-yt a{
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: var(--brand);
text-decoration: none;
}
/* ============ PLAYER ============ */
.sohbet-player-wrap{ padding-bottom: 100px; }
.sohbet-player-frame{
background: #000;
aspect-ratio: 16/9;
position: relative;
overflow: hidden;
}
.sohbet-player-frame iframe{
position: absolute; inset: 0;
width: 100%; height: 100%;
border: 0;
}
.sohbet-player-meta{ padding: 14px 16px 18px; }
.sohbet-player-baslik{
font-size: 17px;
font-weight: 700;
line-height: 1.4;
color: var(--c-text-1);
margin-bottom: 8px;
}
.sohbet-player-info{
font-size: 13px;
color: var(--c-text-3);
display: flex;
gap: 4px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 14px;
}
.sohbet-player-info .sep{ color: var(--c-text-4); }
.sohbet-player-aciklama{
background: var(--c-fill-1);
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 8px;
max-height: 80px;
overflow: hidden;
position: relative;
transition: max-height .25s;
}
.sohbet-player-aciklama.is-open{ max-height: 600px; }
.sohbet-player-aciklama-text{
font-size: 13px;
color: var(--c-text-2);
line-height: 1.55;
white-space: pre-line;
}
.sohbet-player-daha-fazla{
background: transparent;
border: 0;
color: var(--brand);
font-size: 13px;
font-weight: 600;
padding: 4px 0;
cursor: pointer;
font-family: inherit;
margin-bottom: 14px;
}
.sohbet-player-actions{
display: flex;
gap: 8px;
margin-top: 8px;
}
.sohbet-action-btn{
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 11px;
background: var(--c-fill-1);
border: 1px solid var(--c-fill-2);
border-radius: 12px;
font-size: 13px;
font-weight: 600;
color: var(--c-text-1);
cursor: pointer;
font-family: inherit;
text-decoration: none;
}
.sohbet-action-btn:active{
background: var(--c-fill-2);
transform: scale(.98);
}
.sohbet-suggestions{
margin-top: 8px;
padding-top: 18px;
border-top: 1px solid var(--c-fill-1);
}
.sohbet-suggestions-baslik{
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--c-text-3);
padding: 0 16px 10px;
}
/* ============ ANA SAYFA SOHBET KARTI ============ */
.ana-sohbet-card{
margin: 0 16px;
background: #000;
border-radius: 14px;
overflow: hidden;
cursor: pointer;
position: relative;
transition: transform .15s;
-webkit-tap-highlight-color: transparent;
}
.ana-sohbet-card:active{ transform: scale(.98); }
.ana-sohbet-thumb{
position: relative;
aspect-ratio: 16/9;
}
.ana-sohbet-thumb img{
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.ana-sohbet-overlay{
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.85) 100%);
}
.ana-sohbet-play{
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 56px; height: 56px;
border-radius: 50%;
background: rgba(0,0,0,.7);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
border: 2px solid rgba(255,255,255,.3);
}
.ana-sohbet-meta{
position: absolute;
bottom: 12px; left: 14px; right: 14px;
color: #fff;
}
.ana-sohbet-baslik{
font-size: 14px;
font-weight: 700;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.ana-sohbet-alt{
font-size: 11px;
opacity: .9;
margin-top: 4px;
text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
/* =====================================================================
* KÜTÜPHANE v2.0 - Apple Books tarzı
* ===================================================================== */
.kut-wrap{ padding: 0 0 100px; }
.kut-hero{
text-align: center;
padding: 28px 20px 24px;
background: linear-gradient(160deg, #fefcf3 0%, #f5edd3 100%);
border-bottom: 1px solid #e6dec1;
margin-bottom: 16px;
}
.kut-hero-icon{
display: flex; justify-content: center;
margin-bottom: 8px;
filter: drop-shadow(0 4px 8px rgba(124,74,28,.18));
}
.kut-hero-baslik{
font-size: 22px;
font-weight: 800;
color: var(--c-text-1);
margin-bottom: 4px;
}
.kut-hero-alt{
font-size: 13px;
color: #7c4a1c;
font-weight: 600;
}
.kut-search{
display: flex; align-items: center;
gap: 10px;
margin: 0 16px 18px;
padding: 11px 14px;
background: var(--c-fill-1);
border-radius: 12px;
color: var(--c-text-3);
}
.kut-search input{
flex: 1; border: 0; background: transparent;
font-size: 14px; color: var(--c-text-1);
font-family: inherit; outline: none;
-webkit-appearance: none; appearance: none;
}
.kut-search input::placeholder{ color: var(--c-text-3); }
.kut-bolum-baslik{
font-size: 12px; font-weight: 700;
text-transform: uppercase; letter-spacing: .5px;
color: var(--c-text-3);
padding: 0 16px 10px;
}
.kut-kategoriler{
display: flex; flex-direction: column;
gap: 8px;
padding: 0 16px;
}
.kut-kategori-card{
display: flex; align-items: center;
gap: 14px;
padding: 12px;
background: var(--c-bg-elev);
border: 1px solid var(--c-fill-1);
border-radius: 14px;
font-family: inherit;
cursor: pointer;
text-align: left;
-webkit-tap-highlight-color: transparent;
transition: background .12s, transform .15s;
}
.kut-kategori-card:active{ background: var(--c-fill-1); transform: scale(.98); }
.kut-kategori-cover{
width: 64px; height: 64px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(0,0,0,.12);
filter: drop-shadow(0 2px 4px rgba(0,0,0,.08));
}
.kut-kategori-cover .ji-svg{
filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
}
.kut-kategori-info{ flex: 1; min-width: 0; }
.kut-kategori-ad{
font-size: 16px; font-weight: 700;
color: var(--c-text-1);
margin-bottom: 2px;
}
.kut-kategori-alt{
font-size: 12px; font-weight: 600;
color: var(--brand);
margin-bottom: 4px;
}
.kut-kategori-aciklama{
font-size: 12px;
color: var(--c-text-3);
line-height: 1.4;
}
.kut-kategori-chev{ flex-shrink: 0; color: var(--c-text-4); }
/* Kategori detay */
.kut-kategori-wrap{ padding-bottom: 100px; }
.kut-kat-header{
display: grid;
grid-template-columns: auto auto 1fr;
align-items: center;
gap: 12px;
padding: 14px 16px 18px;
background: linear-gradient(180deg, var(--c-fill-1) 0%, transparent 100%);
}
.kut-back{
width: 38px; height: 38px;
border-radius: 50%;
background: var(--c-bg-elev);
border: 1px solid var(--c-fill-2);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
font-family: inherit;
color: var(--c-text-1);
flex-shrink: 0;
}
.kut-kat-header-cover{
width: 64px; height: 64px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.kut-kat-header-info{ flex: 1; min-width: 0; }
.kut-kat-header-ad{
font-size: 20px; font-weight: 800;
color: var(--c-text-1);
}
.kut-kat-header-alt{
font-size: 13px; font-weight: 600;
color: var(--brand);
margin-top: 2px;
}
.kut-kat-header-aciklama{
font-size: 12px;
color: var(--c-text-3);
margin-top: 6px;
grid-column: 1 / -1;
}
/* Kitap grid */
.kut-kitap-grid{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 14px;
padding: 0 16px;
}
.kut-kitap-kart{
display: flex; flex-direction: column;
background: transparent;
border: 0;
cursor: pointer;
font-family: inherit;
text-align: left;
-webkit-tap-highlight-color: transparent;
padding: 0;
}
.kut-kitap-kart:active{ transform: scale(.96); transition: transform .15s; }
.kut-kitap-kapak{
position: relative;
width: 100%;
aspect-ratio: 2/3;
border-radius: 8px;
overflow: hidden;
margin-bottom: 8px;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
padding: 12px;
box-shadow:
0 4px 12px rgba(0,0,0,.18),
0 1px 0 rgba(255,255,255,.15) inset;
color: #fff;
}
.kut-kitap-kapak img{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
.kut-kitap-kapak-icon{
margin-bottom: 8px;
filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
opacity: .9;
}
.kut-kitap-kapak-baslik{
font-size: 11px; font-weight: 700;
text-align: center;
line-height: 1.3;
text-shadow: 0 1px 2px rgba(0,0,0,.3);
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.kut-kitap-kapak-rozet{
position: absolute; top: 8px; right: 8px;
background: rgba(0,0,0,.7);
color: #fff;
font-size: 9px;
font-weight: 800;
letter-spacing: .5px;
padding: 3px 7px;
border-radius: 5px;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.kut-kitap-baslik{
font-size: 13px; font-weight: 700;
color: var(--c-text-1);
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 2px;
}
.kut-kitap-yazar{
font-size: 11px;
color: var(--c-text-3);
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Kitap detay */
.kut-detay{ padding: 0 4px 4px; }
.kut-detay-kapak{
position: relative;
width: 160px; aspect-ratio: 2/3;
margin: 8px auto 16px;
border-radius: 12px;
overflow: hidden;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
padding: 14px;
color: #fff;
box-shadow: 0 12px 28px rgba(0,0,0,.25);
}
.kut-detay-kapak img{
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
.kut-detay-kapak-icon{
margin-bottom: 10px;
filter: drop-shadow(0 2px 6px rgba(0,0,0,.3));
}
.kut-detay-kapak-baslik{
font-size: 12px; font-weight: 700;
text-align: center; line-height: 1.3;
text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.kut-detay-kapak-yazar{
font-size: 10px;
margin-top: 6px;
opacity: .85;
}
.kut-detay-info{ text-align: center; }
.kut-detay-baslik{
font-size: 18px; font-weight: 800;
color: var(--c-text-1);
line-height: 1.3;
margin-bottom: 4px;
}
.kut-detay-yazar{
font-size: 13px;
color: var(--brand);
font-weight: 600;
margin-bottom: 14px;
}
.kut-detay-meta{
display: flex; justify-content: center;
gap: 14px;
padding: 12px 0;
margin-bottom: 14px;
border-top: 1px solid var(--c-fill-1);
border-bottom: 1px solid var(--c-fill-1);
}
.kut-detay-meta-item{ text-align: center; }
.kut-detay-meta-label{
font-size: 10px;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--c-text-3);
margin-bottom: 2px;
}
.kut-detay-meta-deger{
font-size: 14px; font-weight: 700;
color: var(--c-text-1);
font-variant-numeric: tabular-nums;
}
.kut-detay-aciklama{
font-size: 14px;
color: var(--c-text-2);
line-height: 1.6;
text-align: left;
margin-bottom: 18px;
}
.kut-btn-oku{
display: flex; align-items: center; justify-content: center;
flex-direction: column;
width: 100%;
padding: 14px;
background: linear-gradient(145deg, var(--brand-2) 0%, var(--brand-dark) 100%);
color: #fff;
border: 0; border-radius: 14px;
font-size: 16px; font-weight: 700;
cursor: pointer;
font-family: inherit;
box-shadow: 0 4px 14px rgba(41,153,129,.30);
gap: 4px;
}
.kut-btn-oku:active{ transform: scale(.98); }
.kut-btn-oku-alt{
font-size: 11px;
font-weight: 500;
opacity: .9;
}
.kut-detay-yakinda{
background: linear-gradient(145deg, #fef3c7, #fde68a);
border: 1px solid #fcd34d;
color: #78350f;
padding: 14px;
border-radius: 12px;
font-size: 13px;
line-height: 1.55;
text-align: left;
}
/* =====================================================================
* KAZA TAKİBİ v2.0 - Apple Health/Streaks tarzı
* ===================================================================== */
.kaza-wrap{ padding: 14px 16px 100px; }
.kaza-toplam-card{
position: relative;
background: linear-gradient(160deg, #2fae93 0%, #1d6f5e 100%);
color: #fff;
border-radius: 18px;
padding: 22px 22px 22px;
margin-bottom: 16px;
overflow: hidden;
box-shadow: 0 10px 28px rgba(41,153,129,.30);
}
.kaza-toplam-bg{
position: absolute;
right: -20px; top: 50%;
transform: translateY(-50%);
opacity: .08;
pointer-events: none;
}
.kaza-toplam-icerik{ position: relative; z-index: 1; }
.kaza-toplam-label{
font-size: 12px; font-weight: 600;
text-transform: uppercase;
letter-spacing: .8px;
opacity: .85;
margin-bottom: 8px;
}
.kaza-toplam-sayi{
font-size: 56px; font-weight: 800;
line-height: 1; font-variant-numeric: tabular-nums;
text-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.kaza-toplam-alt{
font-size: 14px;
opacity: .9;
margin-top: 4px;
font-weight: 600;
}
.kaza-toplam-progress{ margin-top: 18px; }
.kaza-toplam-progress-bar{
height: 8px;
background: rgba(255,255,255,.2);
border-radius: 4px;
overflow: hidden;
}
.kaza-toplam-progress-fill{
height: 100%;
background: linear-gradient(90deg, #fbe79e 0%, #fffaed 100%);
border-radius: 4px;
transition: width .5s;
box-shadow: 0 0 8px rgba(251,231,158,.5);
}
.kaza-toplam-progress-text{
font-size: 12px;
margin-top: 8px;
opacity: .9;
}
.kaza-toplam-bos{
margin-top: 14px;
font-size: 13px;
padding: 10px 14px;
background: rgba(255,255,255,.12);
border-radius: 10px;
}
/* Aksiyon kartları */
.kaza-actions{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 18px;
}
.kaza-action-card{
display: flex; align-items: center;
gap: 10px;
padding: 12px;
background: var(--c-bg-elev);
border: 1px solid var(--c-fill-1);
border-radius: 14px;
cursor: pointer;
font-family: inherit;
text-align: left;
-webkit-tap-highlight-color: transparent;
}
.kaza-action-card:active{ background: var(--c-fill-1); }
.kaza-action-icon{
width: 42px; height: 42px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.kaza-action-baslik{
font-size: 13px; font-weight: 700;
color: var(--c-text-1);
}
.kaza-action-alt{
font-size: 11px;
color: var(--c-text-3);
margin-top: 1px;
line-height: 1.3;
}
.kaza-bolum-baslik{
font-size: 12px; font-weight: 700;
text-transform: uppercase; letter-spacing: .5px;
color: var(--c-text-3);
padding: 4px 4px 10px;
}
.kaza-vakitler{
display: flex; flex-direction: column;
gap: 10px;
margin-bottom: 18px;
}
.kaza-vakit-card{
background: var(--c-bg-elev);
border: 1px solid var(--c-fill-1);
border-radius: 14px;
padding: 14px;
transition: background .2s;
}
.kaza-vakit-card.is-done{
background: linear-gradient(145deg, #d1fae5 0%, #a7f3d0 100%);
border-color: #86efac;
}
.kaza-vakit-baslik{
display: flex; align-items: center; gap: 12px;
margin-bottom: 8px;
}
.kaza-vakit-ikon{
flex-shrink: 0;
filter: drop-shadow(0 2px 4px rgba(0,0,0,.1));
}
.kaza-vakit-info{ flex: 1; min-width: 0; }
.kaza-vakit-ad{
font-size: 16px; font-weight: 700;
color: var(--c-text-1);
}
.kaza-vakit-meta{
font-size: 12px;
color: var(--c-text-3);
margin-top: 2px;
}
.kaza-vakit-meta strong{
color: var(--c-text-1);
font-variant-numeric: tabular-nums;
font-weight: 700;
}
.kaza-vakit-yuzde{
font-size: 13px; font-weight: 700;
color: var(--brand);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
.kaza-vakit-progress{
height: 6px;
background: var(--c-fill-1);
border-radius: 3px;
overflow: hidden;
margin-bottom: 10px;
}
.kaza-vakit-progress-fill{
height: 100%;
border-radius: 3px;
transition: width .35s;
}
.kaza-vakit-actions{
display: grid;
grid-template-columns: auto auto 1fr;
gap: 6px;
}
.kaza-btn-borc{
display: inline-flex; align-items: center;
gap: 4px;
padding: 9px 12px;
background: var(--c-fill-1);
border: 0; border-radius: 10px;
font-size: 12px; font-weight: 700;
color: var(--c-text-2);
cursor: pointer;
font-family: inherit;
-webkit-tap-highlight-color: transparent;
}
.kaza-btn-borc:active{ background: var(--c-fill-2); }
.kaza-btn-eksik{
width: 38px;
background: var(--c-fill-1);
border: 0; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
color: var(--c-text-2);
font-family: inherit;
}
.kaza-btn-eksik:disabled{ opacity: .35; cursor: not-allowed; }
.kaza-btn-eksik:not(:disabled):active{ background: var(--c-fill-2); }
.kaza-btn-edit{
flex: 1;
padding: 11px;
background: linear-gradient(145deg, var(--brand-2) 0%, var(--brand-dark) 100%);
color: #fff;
border: 0; border-radius: 10px;
font-size: 14px; font-weight: 700;
cursor: pointer;
font-family: inherit;
box-shadow: 0 2px 8px rgba(41,153,129,.25);
-webkit-tap-highlight-color: transparent;
}
.kaza-btn-edit:disabled{
background: var(--c-fill-1);
color: var(--c-text-4);
box-shadow: none;
}
.kaza-btn-edit:not(:disabled):active{ transform: scale(.97); }
.kaza-btn-edit.is-done{
background: rgba(255,255,255,.7);
color: #064e3b;
box-shadow: none;
display: flex; align-items: center; justify-content: center;
gap: 4px;
}
.kaza-bilgi-card{
background: linear-gradient(145deg, #fefcf3 0%, #f5edd3 100%);
border: 1px solid #e6dec1;
border-radius: 14px;
padding: 14px 16px;
}
.kaza-bilgi-baslik{
display: flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 700;
color: #7c4a1c;
margin-bottom: 8px;
}
.kaza-bilgi-text{
font-size: 13px;
color: #1f1305;
line-height: 1.6;
}
/* Sheet'ler */
.kaza-borc-sheet,
.kaza-oto-sheet,
.kaza-sifir-sheet{ padding: 12px 4px 4px; text-align: center; }
.kaza-borc-icon, .kaza-oto-icon, .kaza-sifir-icon{
display: flex; justify-content: center;
margin-bottom: 12px;
filter: drop-shadow(0 4px 8px rgba(0,0,0,.12));
}
.kaza-borc-baslik, .kaza-oto-baslik, .kaza-sifir-baslik{
font-size: 18px; font-weight: 700;
color: var(--c-text-1);
margin-bottom: 8px;
}
.kaza-borc-aciklama, .kaza-oto-aciklama, .kaza-sifir-aciklama{
font-size: 13px;
color: var(--c-text-3);
line-height: 1.55;
margin-bottom: 18px;
padding: 0 12px;
}
.kaza-borc-quick{
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
margin-bottom: 10px;
}
.kaza-borc-quick-btn{
padding: 12px 6px;
background: var(--c-bg-elev);
border: 2px solid var(--c-fill-2);
border-radius: 10px;
font-size: 14px; font-weight: 700;
color: var(--c-text-1);
cursor: pointer;
font-family: inherit;
font-variant-numeric: tabular-nums;
}
.kaza-borc-quick-btn.is-active{
background: var(--brand);
color: #fff;
border-color: var(--brand);
}
.kaza-borc-input{
width: 100%;
padding: 12px 14px;
border: 2px solid var(--c-fill-2);
border-radius: 10px;
font-size: 16px; font-weight: 700;
font-family: inherit;
font-variant-numeric: tabular-nums;
margin-bottom: 14px;
text-align: center;
background: var(--c-bg-elev);
color: var(--c-text-1);
}
.kaza-borc-input:focus{
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px var(--brand-tint);
}
.kaza-borc-ekle{
width: 100%;
padding: 14px;
background: linear-gradient(145deg, var(--brand-2) 0%, var(--brand-dark) 100%);
color: #fff;
border: 0; border-radius: 12px;
font-size: 15px; font-weight: 700;
cursor: pointer;
font-family: inherit;
box-shadow: 0 4px 12px rgba(41,153,129,.25);
}
.kaza-borc-ekle:active{ transform: scale(.98); }
.kaza-borc-ekle:disabled{
opacity: .5;
background: var(--c-fill-2);
color: var(--c-text-3);
box-shadow: none;
}
.kaza-oto-form{ text-align: left; margin-bottom: 14px; }
.kaza-oto-row{ margin-bottom: 12px; }
.kaza-oto-row label{
display: block;
font-size: 12px; font-weight: 600;
color: var(--c-text-2);
margin-bottom: 4px;
}
.kaza-oto-row input{
width: 100%;
padding: 11px 14px;
border: 1px solid var(--c-fill-2);
border-radius: 10px;
font-size: 15px;
font-family: inherit;
font-variant-numeric: tabular-nums;
background: var(--c-bg-elev);
color: var(--c-text-1);
}
.kaza-oto-row input:focus{
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px var(--brand-tint);
}
.kaza-oto-sonuc{
background: linear-gradient(145deg, var(--brand-tint), #d1fae5);
border: 1px solid var(--brand-2);
border-radius: 12px;
padding: 14px;
margin-bottom: 14px;
text-align: center;
}
.kaza-oto-sonuc-baslik{
font-size: 11px;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--brand-dark);
font-weight: 700;
margin-bottom: 4px;
}
.kaza-oto-sonuc-deger{
font-size: 26px; font-weight: 800;
color: var(--brand-dark);
font-variant-numeric: tabular-nums;
}
.kaza-oto-sonuc-alt{
font-size: 11px;
color: var(--brand-dark);
opacity: .7;
margin-top: 4px;
}
.kaza-oto-not{
font-size: 12px;
color: var(--c-text-3);
text-align: left;
margin-top: 12px;
line-height: 1.5;
padding: 10px 12px;
background: var(--c-fill-1);
border-radius: 8px;
}
.kaza-sifir-onay{
width: 100%;
padding: 14px;
background: linear-gradient(145deg, #ef4444 0%, #b91c1c 100%);
color: #fff;
border: 0; border-radius: 12px;
font-size: 14px; font-weight: 700;
cursor: pointer;
font-family: inherit;
margin-bottom: 8px;
box-shadow: 0 4px 12px rgba(239,68,68,.30);
}
.kaza-sifir-onay:active{ transform: scale(.98); }
.kaza-sifir-iptal{
width: 100%;
padding: 12px;
background: transparent;
border: 0;
font-size: 14px; font-weight: 600;
color: var(--c-text-2);
cursor: pointer;
font-family: inherit;
}
/* =====================================================================
* SOSYAL MEDYA v2.0 - Profesyonel
* ===================================================================== */
.ssm-wrap{ padding: 0 0 100px; }
.ssm-hero{
position: relative;
margin: 14px 16px 16px;
border-radius: 18px;
overflow: hidden;
background: linear-gradient(135deg, #299981 0%, #1d6f5e 100%);
color: #fff;
padding: 18px;
box-shadow: 0 8px 24px rgba(41,153,129,.30);
}
.ssm-hero-bg{
position: absolute;
top: -30%; right: -20%;
width: 280px; height: 280px;
background: radial-gradient(circle, rgba(251,231,158,.15) 0%, transparent 70%);
pointer-events: none;
}
.ssm-hero-icerik{
position: relative;
display: flex; align-items: center; gap: 14px;
margin-bottom: 14px;
}
.ssm-hero-avatar{
width: 56px; height: 56px;
border-radius: 16px;
background: rgba(255,255,255,.18);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
border: 2px solid rgba(255,255,255,.25);
}
.ssm-hero-info{ flex: 1; min-width: 0; }
.ssm-hero-ad{
font-size: 18px; font-weight: 800;
text-shadow: 0 2px 4px rgba(0,0,0,.15);
}
.ssm-hero-alt{
font-size: 12px;
opacity: .85;
margin-top: 2px;
font-weight: 500;
}
.ssm-hero-kanallar{
position: relative;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.ssm-hero-kanal-link{
width: 44px; height: 44px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
color: #fff;
text-decoration: none;
flex-shrink: 0;
transition: transform .12s;
box-shadow: 0 4px 12px rgba(0,0,0,.20);
}
.ssm-hero-kanal-link:active{ transform: scale(.94); }
.ssm-tabs{
display: flex; gap: 6px;
padding: 0 16px 14px;
overflow-x: auto;
scrollbar-width: none;
}
.ssm-tabs::-webkit-scrollbar{ display: none; }
.ssm-tab{
flex-shrink: 0;
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px;
background: var(--c-bg-elev);
border: 1px solid var(--c-fill-2);
border-radius: 18px;
font-size: 13px; font-weight: 600;
color: var(--c-text-2);
cursor: pointer;
font-family: inherit;
white-space: nowrap;
transition: all .12s;
}
.ssm-tab.is-active{
background: var(--c-text-1);
color: var(--c-bg);
border-color: var(--c-text-1);
}
.ssm-tab-sayi{
background: rgba(0,0,0,.1);
padding: 1px 7px;
border-radius: 10px;
font-size: 11px;
font-weight: 700;
}
.ssm-tab.is-active .ssm-tab-sayi{ background: rgba(255,255,255,.25); }
.ssm-feed{
display: flex; flex-direction: column;
gap: 18px;
padding: 0 16px;
}
.ssm-post{
background: var(--c-bg-elev);
border: 1px solid var(--c-fill-1);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.ssm-post-header{
display: flex; align-items: center; gap: 10px;
padding: 12px 14px;
border-bottom: 1px solid var(--c-fill-1);
}
.ssm-post-platform{
width: 36px; height: 36px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
color: #fff;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.ssm-post-header-info{ flex: 1; min-width: 0; }
.ssm-post-header-ad{
font-size: 13px; font-weight: 700;
color: var(--c-text-1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ssm-post-header-alt{
font-size: 11px;
color: var(--c-text-3);
margin-top: 1px;
}
.ssm-post-ext{
width: 32px; height: 32px;
border-radius: 8px;
background: var(--c-fill-1);
display: flex; align-items: center; justify-content: center;
color: var(--c-text-2);
text-decoration: none;
flex-shrink: 0;
}
.ssm-post-ext:active{ background: var(--c-fill-2); }
/* Instagram embed */
.ssm-post-embed-ig{
background: #fff;
position: relative;
min-height: 400px;
}
.ssm-post-embed-ig iframe{
width: 100%;
min-height: 600px;
border: 0;
display: block;
}
/* YouTube */
.ssm-post-embed-yt{
position: relative;
width: 100%;
aspect-ratio: 16/9;
background: #000;
}
.ssm-post-embed-yt iframe{
position: absolute; inset: 0;
width: 100%; height: 100%;
border: 0;
}
/* Facebook */
.ssm-post-embed-fb{
width: 100%;
height: 480px;
border: 0;
background: #fff;
display: block;
}
.ssm-post-meta{ padding: 12px 14px; }
.ssm-post-baslik{
font-size: 14px; font-weight: 700;
color: var(--c-text-1);
line-height: 1.4;
margin-bottom: 4px;
}
.ssm-post-aciklama{
font-size: 13px;
color: var(--c-text-3);
line-height: 1.55;
}
.ssm-post-fallback{
display: block;
text-decoration: none;
color: var(--c-text-1);
padding: 16px;
position: relative;
}
.ssm-post-fallback .ssm-post-platform{
position: absolute;
top: 16px; right: 16px;
}
.ssm-post-fallback-cta{
margin-top: 10px;
font-size: 13px; font-weight: 700;
color: var(--brand);
}
/* Boş hal */
.ssm-bos{
text-align: center;
padding: 60px 24px;
}
.ssm-bos-icon{
display: flex; justify-content: center;
margin-bottom: 14px;
filter: drop-shadow(0 4px 8px rgba(0,0,0,.12));
}
.ssm-bos-baslik{
font-size: 16px; font-weight: 700;
color: var(--c-text-1);
margin-bottom: 6px;
}
.ssm-bos-aciklama{
font-size: 13px;
color: var(--c-text-3);
margin-bottom: 24px;
}
.ssm-bos-kanallar{
display: flex; flex-direction: column;
gap: 10px;
max-width: 280px;
margin: 0 auto;
}
.ssm-bos-kanal{
display: flex; align-items: center; justify-content: center;
gap: 10px;
padding: 13px;
border-radius: 12px;
text-decoration: none;
color: #fff;
font-weight: 700;
font-size: 14px;
box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
/* =====================================================================
* MAHMUD EFENDİ HAZRETLERİ - PREMIUM TASARIM
* ===================================================================== */
/* Ana sayfa kartı - hero görsel + gradient overlay */
.me-anasayfa-kart{
position: relative;
display: block;
margin: 0 16px;
height: 180px;
border-radius: 18px;
overflow: hidden;
text-decoration: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
box-shadow: 0 10px 28px rgba(20,40,80,.30);
transition: transform .15s;
}
.me-anasayfa-kart:active{ transform: scale(.98); }
.me-anasayfa-foto{
position: absolute; inset: 0;
background-size: cover;
background-position: center 20%;
}
.me-anasayfa-overlay{
position: absolute; inset: 0;
background:
linear-gradient(135deg, rgba(10,53,86,.85) 0%, rgba(6,31,55,.55) 50%, rgba(0,0,0,.30) 100%);
}
.me-anasayfa-icerik{
position: absolute;
inset: 0;
padding: 18px 22px;
display: flex;
flex-direction: column;
justify-content: center;
color: #fff;
}
.me-anasayfa-rumuz{
font-size: 14px;
font-family: 'Amiri','Scheherazade New',serif;
color: #fbe79e;
margin-bottom: 4px;
letter-spacing: 2px;
text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.me-anasayfa-baslik{
font-size: 22px;
font-weight: 800;
line-height: 1.15;
text-shadow: 0 2px 6px rgba(0,0,0,.4);
letter-spacing: -.3px;
}
.me-anasayfa-altbaslik{
font-size: 12px;
opacity: .92;
margin-top: 6px;
font-weight: 500;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.me-anasayfa-chev{
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
/* ============ DETAY VIEW ============ */
.me-wrap{ padding-bottom: 100px; }
/* Hero - tam ekran fotoğraf */
.me-hero{
position: relative;
width: 100%;
aspect-ratio: 4/5;
max-height: 580px;
overflow: hidden;
}
.me-hero-bg{
position: absolute; inset: 0;
background-size: cover;
background-position: center 15%;
filter: brightness(.92);
}
.me-hero-overlay{
position: absolute; inset: 0;
background: linear-gradient(180deg,
rgba(10,53,86,.55) 0%,
rgba(10,53,86,.20) 30%,
rgba(10,53,86,.45) 70%,
rgba(6,31,55,.95) 100%);
}
.me-hero-icerik{
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 0 24px 32px;
color: #fff;
text-align: center;
}
.me-hero-rumuz{
font-size: 18px;
font-family: 'Amiri','Scheherazade New',serif;
color: #fbe79e;
margin-bottom: 10px;
letter-spacing: 4px;
text-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.me-hero-baslik{
font-size: 36px;
font-weight: 800;
line-height: 1.1;
margin: 0 0 10px;
text-shadow: 0 4px 12px rgba(0,0,0,.5);
letter-spacing: -.5px;
}
.me-hero-altbaslik{
font-size: 15px;
opacity: .92;
margin-bottom: 6px;
font-weight: 500;
text-shadow: 0 2px 4px rgba(0,0,0,.4);
}
.me-hero-tarih{
display: inline-block;
font-size: 13px;
font-weight: 600;
padding: 5px 14px;
background: rgba(251,231,158,.18);
border: 1px solid rgba(251,231,158,.4);
border-radius: 16px;
color: #fbe79e;
margin-top: 8px;
font-variant-numeric: tabular-nums;
}
/* Tab bar */
.me-tabs{
display: flex;
gap: 6px;
padding: 16px 16px 14px;
background: var(--c-bg);
position: sticky;
top: 0;
z-index: 10;
border-bottom: 1px solid var(--c-fill-1);
overflow-x: auto;
scrollbar-width: none;
}
.me-tabs::-webkit-scrollbar{ display: none; }
.me-tab{
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 14px;
background: var(--c-fill-1);
border: 0;
border-radius: 22px;
font-size: 13px;
font-weight: 600;
color: var(--c-text-2);
cursor: pointer;
font-family: inherit;
white-space: nowrap;
transition: all .12s;
-webkit-tap-highlight-color: transparent;
}
.me-tab.is-active{
background: linear-gradient(135deg, #0a3556 0%, #061f37 100%);
color: #fbe79e;
}
.me-tab.is-active .ji-svg{ filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
/* İçerik konteyner */
.me-icerik{ padding: 16px; }
/* Yazılar listesi */
.me-yazilar{ display: flex; flex-direction: column; gap: 10px; }
.me-yazi-kart{
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
background: var(--c-bg-elev);
border: 1px solid var(--c-fill-1);
border-radius: 14px;
cursor: pointer;
font-family: inherit;
text-align: left;
-webkit-tap-highlight-color: transparent;
transition: background .12s, transform .15s;
animation: meKartGiris .4s cubic-bezier(.4,.0,.2,1);
animation-delay: calc(var(--i, 0) * 60ms);
animation-fill-mode: both;
}
@keyframes meKartGiris {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.me-yazi-kart:active{ background: var(--c-fill-1); transform: scale(.98); }
.me-yazi-numara{
flex-shrink: 0;
width: 38px; height: 38px;
border-radius: 10px;
background: linear-gradient(135deg, #0a3556 0%, #061f37 100%);
color: #fbe79e;
display: flex; align-items: center; justify-content: center;
font-size: 13px;
font-weight: 800;
font-variant-numeric: tabular-nums;
letter-spacing: .5px;
}
.me-yazi-icerik{ flex: 1; min-width: 0; }
.me-yazi-baslik{
font-size: 15px;
font-weight: 700;
color: var(--c-text-1);
line-height: 1.35;
margin-bottom: 3px;
}
.me-yazi-aciklama{
font-size: 12px;
color: var(--c-text-3);
line-height: 1.45;
}
.me-yazi-okunma{
font-size: 11px;
color: var(--c-text-4);
margin-top: 4px;
}
.me-yazi-chev{
flex-shrink: 0;
color: var(--c-text-4);
}
/* Sözler grid */
.me-sozler{
display: flex;
flex-direction: column;
gap: 14px;
}
.me-soz-kart{
position: relative;
background: linear-gradient(145deg, #fefcf3 0%, #f5edd3 100%);
border: 1px solid #e6dec1;
border-radius: 16px;
padding: 24px 20px 20px;
text-align: center;
animation: meKartGiris .4s cubic-bezier(.4,.0,.2,1);
animation-delay: calc(var(--i, 0) * 80ms);
animation-fill-mode: both;
}
.me-soz-tirnak-acik,
.me-soz-tirnak-kapali{
font-family: 'Amiri','Georgia',serif;
font-size: 56px;
line-height: 0;
color: #c9a961;
opacity: .35;
height: 0;
font-weight: 700;
}
.me-soz-tirnak-acik{ text-align: left; margin-bottom: 12px; }
.me-soz-tirnak-kapali{
text-align: right; margin-top: 12px;
transform: rotate(180deg);
display: inline-block;
}
.me-soz-metin{
font-size: 16px;
font-weight: 500;
font-style: italic;
line-height: 1.65;
color: #1f1305;
font-family: 'Georgia', 'Cambria', serif;
}
.me-soz-imza{
font-size: 12px;
font-weight: 700;
color: #7c4a1c;
margin-top: 14px;
text-transform: uppercase;
letter-spacing: 1px;
}
.me-soz-tema{
display: inline-block;
margin-top: 10px;
padding: 3px 10px;
background: rgba(124,74,28,.12);
color: #7c4a1c;
border-radius: 8px;
font-size: 10px;
font-weight: 700;
letter-spacing: .5px;
}
/* Videolar grid */
.me-videolar{
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 480px) {
.me-videolar{ grid-template-columns: 1fr 1fr; }
}
.me-video-kart{
background: var(--c-bg-elev);
border: 1px solid var(--c-fill-1);
border-radius: 14px;
padding: 0;
overflow: hidden;
cursor: pointer;
font-family: inherit;
text-align: left;
-webkit-tap-highlight-color: transparent;
transition: transform .15s;
}
.me-video-kart:active{ transform: scale(.98); }
.me-video-thumb{
position: relative;
aspect-ratio: 16/9;
background: #000;
}
.me-video-thumb img{
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.me-video-overlay{
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.4) 100%);
display: flex; align-items: center; justify-content: center;
}
.me-video-play{
width: 56px; height: 56px;
border-radius: 50%;
background: rgba(0,0,0,.7);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
border: 2px solid rgba(255,255,255,.3);
}
.me-video-sure{
position: absolute;
bottom: 8px; right: 8px;
background: rgba(0,0,0,.85);
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 3px 7px;
border-radius: 4px;
font-variant-numeric: tabular-nums;
}
.me-video-baslik{
font-size: 14px;
font-weight: 700;
color: var(--c-text-1);
line-height: 1.4;
padding: 12px 14px 4px;
}
.me-video-aciklama{
font-size: 12px;
color: var(--c-text-3);
line-height: 1.45;
padding: 0 14px 12px;
}
/* Video player sheet */
.me-video-player-wrap{ padding: 0; }
.me-video-player{
background: #000;
aspect-ratio: 16/9;
position: relative;
border-radius: 12px;
overflow: hidden;
margin-bottom: 14px;
}
.me-video-player iframe{
position: absolute; inset: 0;
width: 100%; height: 100%;
border: 0;
}
.me-video-player-baslik{
font-size: 16px;
font-weight: 700;
color: var(--c-text-1);
line-height: 1.4;
padding: 0 4px;
}
/* Yazı detay (makale) */
.me-makale{
padding: 4px 4px 24px;
font-family: 'Georgia','Cambria',serif;
}
.me-makale-rumuz{
text-align: center;
font-size: 16px;
font-family: 'Amiri','Scheherazade New',serif;
color: #c9a961;
margin-bottom: 6px;
letter-spacing: 3px;
}
.me-makale-baslik{
font-size: 26px;
font-weight: 800;
line-height: 1.2;
color: var(--c-text-1);
text-align: center;
margin: 0 0 12px;
letter-spacing: -.5px;
font-family: 'Georgia','Cambria',serif;
}
.me-makale-aciklama{
font-size: 14px;
color: var(--c-text-3);
text-align: center;
font-style: italic;
line-height: 1.55;
margin-bottom: 18px;
padding: 0 12px;
}
.me-makale-meta{
display: flex;
justify-content: center;
gap: 16px;
font-size: 11px;
color: var(--c-text-4);
margin-bottom: 22px;
padding-bottom: 18px;
border-bottom: 1px solid var(--c-fill-1);
text-transform: uppercase;
letter-spacing: .5px;
font-family: -apple-system, system-ui, sans-serif;
}
.me-makale-icerik{
font-size: 16px;
line-height: 1.85;
color: var(--c-text-1);
}
.me-makale-icerik p{
margin: 0 0 16px;
}
.me-makale-icerik p:first-letter{
/* İlk harf büyütme efekti devre dışı - okumayı zorlaştırıyor olabilir */
}
.me-makale-kaynak{
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 22px;
padding: 10px 14px;
background: var(--c-fill-1);
border-radius: 10px;
font-size: 12px;
font-weight: 600;
color: var(--brand);
text-decoration: none;
font-family: -apple-system, system-ui, sans-serif;
}
.me-makale-dua{
text-align: center;
font-size: 22px;
font-family: 'Amiri','Scheherazade New',serif;
color: #c9a961;
margin-top: 28px;
padding-top: 18px;
border-top: 1px solid var(--c-fill-1);
letter-spacing: 2px;
}
/* Kaynak kartı */
.me-kaynak{
margin: 16px 16px 0;
padding: 14px 16px;
background: linear-gradient(145deg, #fefcf3 0%, #f5edd3 100%);
border: 1px solid #e6dec1;
border-radius: 12px;
}
.me-kaynak-baslik{
display: flex; align-items: center; gap: 6px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .5px;
color: #7c4a1c;
margin-bottom: 6px;
}
.me-kaynak-text{
font-size: 12px;
color: var(--c-text-2);
line-height: 1.55;
}
.me-kaynak-text a{
color: var(--brand);
font-weight: 700;
text-decoration: none;
}
/* =====================================================================
* HEADER WEATHER CHIP
* ===================================================================== */
.header-weather{
display: flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
background: linear-gradient(135deg, rgba(251,146,60,.12), rgba(245,158,11,.18));
border: 1px solid rgba(245,158,11,.25);
border-radius: 14px;
font-size: 13px;
font-weight: 700;
color: #b45309;
font-variant-numeric: tabular-nums;
margin-right: 6px;
}
.header-weather-icon{
display: inline-flex;
align-items: center;
color: #d97706;
}
.header-weather-temp{ line-height: 1; }
/* =====================================================================
* PREMIUM HERO - Mahmud Efendi fotoğrafı + animasyonlu glass overlay
* Eski .hero rule'larını override ediyor
* ===================================================================== */
.hero-premium{
position: relative;
margin: 14px 16px 18px;
border-radius: 24px;
overflow: hidden;
min-height: 240px;
padding: 0 !important;
background: linear-gradient(135deg, #1d6f5e 0%, #299981 50%, #2fae93 100%);
box-shadow:
0 14px 36px rgba(6,77,40,.40),
0 2px 0 rgba(255,255,255,.10) inset,
0 -2px 0 rgba(0,0,0,.20) inset;
isolation: isolate;
}
/* Eski .hero::before ve .hero::after katmanlarını kapat */
.hero-premium::before,
.hero-premium::after{
content: none !important;
display: none !important;
}
/* Arka plan katmanları - Mahmud Efendi fotoğrafı */
.hero-premium .hero-bg{
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background-image: url('/assets/img/mahmud-efendi.jpg');
background-size: cover;
background-position: center 25%;
}
/* Yeşil gradient overlay - fotoğrafın üstünde */
.hero-premium .hero-bg-gradient{
position: absolute; inset: 0;
z-index: 2;
background:
linear-gradient(135deg,
rgba(6,77,40,.78) 0%,
rgba(41,153,129,.62) 50%,
rgba(13,140,74,.78) 100%),
radial-gradient(ellipse at 30% 20%, rgba(251,231,158,.20) 0%, transparent 55%),
radial-gradient(ellipse at 80% 80%, rgba(34,197,94,.25) 0%, transparent 50%);
pointer-events: none;
}
.hero-premium .hero-bg-pattern{
position: absolute; inset: 0;
z-index: 3;
opacity: .08;
background-image:
repeating-linear-gradient(45deg, transparent 0 24px, rgba(255,255,255,.5) 24px 25px),
repeating-linear-gradient(-45deg, transparent 0 24px, rgba(255,255,255,.5) 24px 25px);
background-size: 70px 70px;
mix-blend-mode: overlay;
pointer-events: none;
}
.hero-premium .hero-bg-shimmer{
position: absolute;
top: -50%;
left: -150%;
width: 100%;
height: 200%;
z-index: 4;
background: linear-gradient(
115deg,
transparent 30%,
rgba(255,255,255,.10) 45%,
rgba(251,231,158,.32) 50%,
rgba(255,255,255,.10) 55%,
transparent 70%
);
transform: rotate(8deg);
animation: heroShimmer 7s ease-in-out infinite;
pointer-events: none;
}
.hero-premium .hero-bg-particles{
position: absolute; inset: 0;
z-index: 5;
pointer-events: none;
}
@keyframes heroShimmer {
0%, 100% { left: -150%; }
50% { left: 150%; }
}
.particle{
position: absolute;
width: 6px; height: 6px;
border-radius: 50%;
background: radial-gradient(circle, rgba(251,231,158,.95) 0%, rgba(251,231,158,0) 70%);
filter: blur(.5px);
animation: particleFloat 6s ease-in-out infinite;
}
.particle.p1{ top: 20%; left: 12%; animation-delay: 0s; }
.particle.p2{ top: 65%; left: 25%; width: 4px; height: 4px; animation-delay: 1.2s; }
.particle.p3{ top: 30%; left: 78%; width: 5px; height: 5px; animation-delay: 2.4s; }
.particle.p4{ top: 75%; left: 88%; animation-delay: 3.6s; }
.particle.p5{ top: 50%; left: 60%; width: 3px; height: 3px; animation-delay: 4.8s; }
@keyframes particleFloat {
0%, 100% { transform: translateY(0) scale(1); opacity: .8; }
50% { transform: translateY(-15px) scale(1.4); opacity: 1; }
}
/* İçerik - üstte (eski .hero > * z-index'ini override) */
.hero-premium .hero-content{
position: relative;
z-index: 10;
padding: 18px 22px 24px;
color: #fff;
}
/* Eski hero-hijri absolute pozisyonunu sıfırla */
.hero-premium .hero-hijri{
position: static;
top: auto; right: auto;
}
/* Eski hero-loc/time/countdown stilini override */
.hero-premium .hero-loc{
margin-bottom: 0;
}
.hero-premium .hero-time{
margin-bottom: 12px;
}
.hero-top{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
}
.hero-loc{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px 5px 8px;
background: rgba(0,0,0,.30);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,.18);
border-radius: 12px;
font-size: 13px;
font-weight: 600;
}
.hero-loc svg{ width: 14px; height: 14px; }
.hero-hijri{
font-size: 12px;
font-weight: 700;
color: #fbe79e;
letter-spacing: .5px;
text-shadow: 0 2px 4px rgba(0,0,0,.5);
font-variant-numeric: tabular-nums;
padding: 5px 10px;
background: rgba(0,0,0,.25);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(251,231,158,.25);
border-radius: 10px;
}
.hero-next-label{
font-size: 13px;
opacity: .95;
margin-bottom: 4px;
font-weight: 500;
text-shadow: 0 2px 4px rgba(0,0,0,.5);
}
.hero-next-label span{ font-weight: 800; color: #fbe79e; }
.hero-time{
font-size: 64px;
font-weight: 800;
line-height: 1;
font-variant-numeric: tabular-nums;
letter-spacing: -2px;
text-shadow: 0 4px 18px rgba(0,0,0,.55);
margin: 4px 0 12px;
color: #ffffff;
filter: drop-shadow(0 4px 8px rgba(0,0,0,.35));
}
.hero-countdown-wrap{
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px 8px 12px;
background: rgba(0,0,0,.32);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,.18);
border-radius: 14px;
}
.hero-countdown-pulse{
width: 8px; height: 8px;
border-radius: 50%;
background: #4ade80;
position: relative;
box-shadow: 0 0 10px #4ade80;
}
.hero-countdown-pulse::after{
content: '';
position: absolute;
inset: -3px;
border-radius: 50%;
border: 2px solid #4ade80;
animation: pulseRing 2s ease-out infinite;
opacity: .6;
}
@keyframes pulseRing {
0% { transform: scale(.6); opacity: .9; }
100% { transform: scale(2.2); opacity: 0; }
}
.hero-countdown{
font-size: 14px;
font-weight: 700;
color: #fff;
font-variant-numeric: tabular-nums;
text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
/* =====================================================================
* KERAHAT BANNER (eski card yerine ince çubuk)
* ===================================================================== */
.kerahat-banner{
display: flex;
align-items: center;
gap: 10px;
margin: 0 16px 14px;
padding: 11px 14px;
background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
border: 1px solid #fdba74;
border-radius: 12px;
color: #9a3412;
}
.kerahat-banner svg{
flex-shrink: 0;
width: 22px; height: 22px;
color: #ea580c;
}
.kerahat-banner-text{
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.kerahat-banner-text strong{
font-size: 13px;
font-weight: 700;
color: #7c2d12;
}
.kerahat-banner-text span{
font-size: 12px;
color: #9a3412;
}
/* =====================================================================
* TIME PILLS - aktif vakit için ekstra animasyon
* ===================================================================== */
.time-pill.is-active{
position: relative;
overflow: hidden;
}
.time-pill.is-active::before{
content: '';
position: absolute;
inset: 0;
background: linear-gradient(115deg,
transparent 30%,
rgba(41,153,129,.10) 50%,
transparent 70%);
animation: pillShine 3s ease-in-out infinite;
pointer-events: none;
}
@keyframes pillShine {
0%, 100% { transform: translateX(-100%); }
50% { transform: translateX(100%); }
}
/* =====================================================================
* KÜTÜPHANE KAPAK - TEMİZ "NO COVER" TASARIMI
* (AI/SVG generator yerine sade typografi - Apple Books no-cover stili)
* ===================================================================== */
/* Kapak içinde sade typografi (görsel yokken) */
.kut-kitap-kapak-bos,
.kut-detay-kapak-bos{
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 14px 12px;
text-align: center;
color: #fff;
}
/* Üstte ve altta ince altın çizgi (kitap kapağı standardı) */
.kut-kitap-kapak-bos::before,
.kut-kitap-kapak-bos::after,
.kut-detay-kapak-bos::before,
.kut-detay-kapak-bos::after{
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 50%;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.6) 50%, transparent 100%);
}
.kut-kitap-kapak-bos::before,
.kut-detay-kapak-bos::before{ top: 18%; }
.kut-kitap-kapak-bos::after,
.kut-detay-kapak-bos::after{ bottom: 18%; }
/* Detay kapağı (büyük) için daha geniş çizgi */
.kut-detay-kapak-bos::before{ top: 14%; width: 60%; }
.kut-detay-kapak-bos::after{ bottom: 14%; width: 60%; }
/* Mevcut kapak-baslik override - tüm hayata bind */
.kut-kitap-kapak-bos .kut-kitap-kapak-baslik{
font-family: 'Georgia', 'Times New Roman', serif;
font-size: 13px;
font-weight: 700;
text-shadow: 0 1px 3px rgba(0,0,0,.4);
line-height: 1.35;
letter-spacing: -.2px;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 6px;
}
.kut-kitap-kapak-yazar-mini{
font-family: 'Georgia', serif;
font-size: 9px;
font-style: italic;
opacity: .85;
text-shadow: 0 1px 2px rgba(0,0,0,.4);
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Detay kapağı no-cover */
.kut-detay-kapak-bos .kut-detay-kapak-baslik{
font-family: 'Georgia', serif;
font-size: 17px;
font-weight: 700;
line-height: 1.3;
text-shadow: 0 2px 6px rgba(0,0,0,.4);
margin-bottom: 10px;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
.kut-detay-kapak-bos .kut-detay-kapak-yazar{
font-family: 'Georgia', serif;
font-size: 12px;
font-style: italic;
opacity: .9;
text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
/* Image error → fallback (parent .is-no-cover sınıfı eklenir) */
.kut-kitap-kapak.is-no-cover::before{
content: attr(data-baslik);
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
font-family: 'Georgia', serif;
font-size: 12px;
font-weight: 700;
color: #fff;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
/* =====================================================================
* KIBLE PUSULA v2 - PREMIUM TASARIM
* Apple Compass tarzı, animasyonlu, glassmorphism
* ===================================================================== */
.qibla-premium-wrap{
padding: 14px 16px 100px;
}
/* ============ HERO KART (mesafe + yön) ============ */
.qibla-hero{
position: relative;
background: linear-gradient(135deg, #1d6f5e 0%, #299981 50%, #2fae93 100%);
border-radius: 22px;
overflow: hidden;
box-shadow:
0 12px 32px rgba(6,77,40,.35),
0 2px 0 rgba(255,255,255,.10) inset,
0 -2px 0 rgba(0,0,0,.20) inset;
margin-bottom: 24px;
}
.qibla-hero-bg{
position: absolute; inset: 0;
pointer-events: none;
}
.qibla-hero-particles{ position: absolute; inset: 0; }
.qp-particle{
position: absolute;
width: 4px; height: 4px;
border-radius: 50%;
background: radial-gradient(circle, rgba(251,231,158,.9) 0%, transparent 70%);
filter: blur(.5px);
animation: qpFloat 5s ease-in-out infinite;
}
.qpp1{ top: 20%; left: 18%; animation-delay: 0s; }
.qpp2{ top: 70%; left: 75%; width: 5px; height: 5px; animation-delay: 1.5s; }
.qpp3{ top: 40%; left: 50%; animation-delay: 3s; }
@keyframes qpFloat {
0%, 100% { transform: translateY(0); opacity: .7; }
50% { transform: translateY(-12px); opacity: 1; }
}
.qibla-hero-content{
position: relative;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 20px 18px;
color: #fff;
}
.qibla-hero-stat{
text-align: center;
min-width: 0;
}
.qibla-hero-stat-label{
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
opacity: .85;
margin-bottom: 4px;
}
.qibla-hero-stat-value{
display: flex;
align-items: baseline;
justify-content: center;
gap: 4px;
margin-bottom: 4px;
}
.qibla-hero-num{
font-size: 32px;
font-weight: 800;
line-height: 1;
font-variant-numeric: tabular-nums;
letter-spacing: -1px;
text-shadow: 0 2px 6px rgba(0,0,0,.30);
color: #fff;
}
.qibla-hero-unit{
font-size: 14px;
font-weight: 700;
opacity: .9;
text-shadow: 0 2px 4px rgba(0,0,0,.25);
}
.qibla-hero-stat-sub{
font-size: 11px;
opacity: .85;
font-weight: 500;
text-shadow: 0 1px 2px rgba(0,0,0,.25);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.qibla-hero-divider{
width: 1px;
height: 50px;
background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.4) 50%, transparent 100%);
}
/* ============ PUSULA (büyük çember) ============ */
.qibla-compass-wrap{
position: relative;
display: flex;
justify-content: center;
margin-bottom: 24px;
padding: 20px 0;
}
/* Glow efekti - hizalanınca güçlenir */
.qibla-compass-glow{
position: absolute;
top: 50%; left: 50%;
width: 320px; height: 320px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(circle,
rgba(13,140,74,.20) 0%,
rgba(13,140,74,.08) 40%,
transparent 70%);
pointer-events: none;
transition: all .4s ease;
}
.qibla-compass-glow.is-aligned{
background: radial-gradient(circle,
rgba(74,222,128,.40) 0%,
rgba(74,222,128,.18) 40%,
transparent 70%);
animation: alignedPulse 1.5s ease-in-out infinite;
}
@keyframes alignedPulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); }
50% { transform: translate(-50%, -50%) scale(1.08); }
}
.qibla-compass-v2{
position: relative;
width: 280px;
height: 280px;
border-radius: 50%;
background:
radial-gradient(circle at 50% 30%, #ffffff 0%, #fafaf7 100%);
box-shadow:
0 20px 50px rgba(0,0,0,.18),
0 4px 12px rgba(0,0,0,.10),
inset 0 -3px 8px rgba(0,0,0,.06),
inset 0 3px 8px rgba(255,255,255,.8);
transition: box-shadow .3s ease;
}
.qibla-compass-v2.is-aligned{
box-shadow:
0 20px 50px rgba(74,222,128,.35),
0 4px 12px rgba(13,140,74,.25),
inset 0 -3px 8px rgba(13,140,74,.10),
inset 0 3px 8px rgba(255,255,255,.9),
inset 0 0 0 3px rgba(74,222,128,.6);
}
/* Pusula gül (döner) */
.qc-rose{
position: absolute;
inset: 0;
border-radius: 50%;
transition: transform .3s ease-out;
will-change: transform;
}
/* Tick ring */
.qc-tick-ring{
position: absolute;
inset: 0;
}
.compass-tick{
position: absolute;
top: 8px;
left: 50%;
width: 2px;
height: 8px;
background: rgba(41,153,129,.4);
transform-origin: 50% 132px;
margin-left: -1px;
border-radius: 1px;
}
.compass-tick.is-major{
height: 14px;
width: 3px;
background: var(--brand);
margin-left: -1.5px;
}
/* Yön harfleri (K D G B) */
.qc-marker{
position: absolute;
font-size: 16px;
font-weight: 800;
color: var(--brand-dark);
text-shadow: 0 1px 0 rgba(255,255,255,.8);
width: 22px; height: 22px;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Georgia', serif;
}
.qc-n{ top: 26px; left: 50%; transform: translateX(-50%); color: #b91c1c; font-size: 18px; }
.qc-e{ right: 22px; top: 50%; transform: translateY(-50%); }
.qc-s{ bottom: 26px; left: 50%; transform: translateX(-50%); }
.qc-w{ left: 22px; top: 50%; transform: translateY(-50%); }
/* Cihaz oku (sabit, üst) */
.qc-device-arrow{
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
z-index: 5;
}
.qc-device-arrow-tip{
width: 0; height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 14px solid #b91c1c;
filter: drop-shadow(0 2px 4px rgba(185,28,28,.4));
}
.qc-device-arrow-tip::after{
content: '';
position: absolute;
top: 14px;
left: 50%;
transform: translateX(-50%);
width: 4px; height: 8px;
background: #b91c1c;
border-radius: 0 0 2px 2px;
}
/* Kâbe oku (döner - ortadan yukarıya) */
.qc-qibla-arrow{
position: absolute;
inset: 0;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 36px;
transition: transform .35s cubic-bezier(.4,.0,.2,1);
pointer-events: none;
will-change: transform;
}
.qc-qibla-line{
position: absolute;
top: 38px;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 100px;
background: linear-gradient(180deg,
rgba(201,169,97,.0) 0%,
rgba(201,169,97,.5) 30%,
rgba(201,169,97,.85) 100%);
border-radius: 1px;
}
.qc-qibla-icon{
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 56px; height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, #fefcf3 0%, #fbe79e 100%);
box-shadow:
0 4px 14px rgba(201,169,97,.40),
0 1px 0 rgba(255,255,255,.6) inset,
0 -2px 0 rgba(124,74,28,.15) inset;
border: 2px solid #c9a961;
}
/* Merkez nokta */
.qc-center{
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 14px; height: 14px;
border-radius: 50%;
background: linear-gradient(135deg, #fff 0%, #e6dec1 100%);
border: 2px solid var(--brand);
box-shadow:
0 2px 6px rgba(0,0,0,.20),
inset 0 1px 0 rgba(255,255,255,.5);
z-index: 6;
}
/* Hizalandı badge */
.qc-aligned-badge{
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%) scale(.6);
display: inline-flex;
align-items: center;
gap: 5px;
padding: 7px 14px;
background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
color: #fff;
font-size: 12px;
font-weight: 800;
letter-spacing: .3px;
border-radius: 18px;
box-shadow: 0 6px 14px rgba(22,163,74,.45);
opacity: 0;
pointer-events: none;
transition: all .3s cubic-bezier(.34,1.56,.64,1);
z-index: 10;
white-space: nowrap;
}
.qc-aligned-badge.is-show{
opacity: 1;
transform: translateX(-50%) scale(1);
}
/* ============ DURUM KARTI ============ */
.qibla-status-card{
display: flex;
align-items: center;
gap: 12px;
background: var(--c-bg-elev);
border: 1px solid var(--c-fill-1);
border-radius: 14px;
padding: 12px 14px;
margin-bottom: 12px;
transition: all .25s ease;
}
.qibla-status-card.is-active{
background: linear-gradient(135deg, #ecfdf5, #d1fae5);
border-color: #6ee7b7;
}
.qibla-status-card.is-aligned{
background: linear-gradient(135deg, #16a34a, #15803d);
border-color: #15803d;
color: #fff;
}
.qibla-status-card.is-warn{
background: linear-gradient(135deg, #fffbeb, #fef3c7);
border-color: #fbbf24;
}
.qibla-status-card.is-error{
background: linear-gradient(135deg, #fef2f2, #fee2e2);
border-color: #fca5a5;
color: #991b1b;
}
.qibla-status-icon{
flex-shrink: 0;
width: 38px; height: 38px;
border-radius: 10px;
background: rgba(0,0,0,.06);
display: flex; align-items: center; justify-content: center;
}
.qibla-status-card.is-active .qibla-status-icon{ background: rgba(22,163,74,.15); color: #15803d; }
.qibla-status-card.is-aligned .qibla-status-icon{ background: rgba(255,255,255,.20); color: #fff; }
.qibla-status-card.is-warn .qibla-status-icon{ background: rgba(245,158,11,.18); color: #b45309; }
.qibla-status-card.is-error .qibla-status-icon{ background: rgba(239,68,68,.15); color: #b91c1c; }
.qibla-status-text{ flex: 1; min-width: 0; }
.qibla-status-title{
font-size: 14px;
font-weight: 700;
color: inherit;
line-height: 1.3;
}
.qibla-status-card.is-active .qibla-status-title{ color: #064e3b; }
.qibla-status-card.is-aligned .qibla-status-title{ color: #fff; }
.qibla-status-sub{
font-size: 12px;
opacity: .85;
margin-top: 2px;
line-height: 1.4;
}
/* ============ BAŞLAT BUTONU ============ */
.qibla-start-btn{
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 14px;
background: linear-gradient(135deg, var(--brand-2) 0%, var(--brand-dark) 100%);
color: #fff;
border: 0;
border-radius: 14px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
margin-bottom: 18px;
box-shadow:
0 6px 16px rgba(41,153,129,.35),
0 1px 0 rgba(255,255,255,.15) inset,
0 -1px 0 rgba(0,0,0,.20) inset;
-webkit-tap-highlight-color: transparent;
transition: transform .15s, box-shadow .15s;
}
.qibla-start-btn:active{
transform: scale(.98);
box-shadow:
0 3px 8px rgba(41,153,129,.30),
0 1px 0 rgba(0,0,0,.20) inset;
}
/* ============ HARİTA ============ */
.qibla-map-card{
background: var(--c-bg-elev);
border: 1px solid var(--c-fill-1);
border-radius: 14px;
overflow: hidden;
margin-bottom: 14px;
box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.qibla-map-header{
display: flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--c-text-3);
border-bottom: 1px solid var(--c-fill-1);
background: var(--c-fill-1);
}
.qibla-map-v2{
width: 100%;
height: 220px;
background: #f5f5f5;
}
/* ============ BİLGİ KARTI ============ */
.qibla-bilgi-card{
background: linear-gradient(145deg, #fefcf3 0%, #f5edd3 100%);
border: 1px solid #e6dec1;
border-radius: 14px;
padding: 12px 14px;
}
.qibla-bilgi-baslik{
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .8px;
color: #7c4a1c;
margin-bottom: 6px;
}
.qibla-bilgi-text{
font-size: 12px;
color: var(--c-text-2);
line-height: 1.6;
}
.qibla-bilgi-text strong{ color: #7c4a1c; }
/* =====================================================================
* KAZA - CİNSİYET RADIO
* ===================================================================== */
.kaza-cinsiyet-radio{
flex: 1;
display: flex; align-items: center; justify-content: center;
gap: 6px;
padding: 10px;
background: var(--c-bg-elev);
border: 2px solid var(--c-fill-2);
border-radius: 10px;
cursor: pointer;
font-size: 13px;
font-weight: 700;
color: var(--c-text-2);
-webkit-tap-highlight-color: transparent;
transition: all .15s;
}
.kaza-cinsiyet-radio input{ display: none; }
.kaza-cinsiyet-radio:has(input:checked){
background: var(--brand);
color: #fff;
border-color: var(--brand);
}
.kaza-cinsiyet-radio span{ user-select: none; }
/* =====================================================================
* WHATSAPP ÜYE SHEET - PREMIUM
* ===================================================================== */
.wa-sheet{ padding-bottom: 24px; }
.wa-hero{
text-align: center;
padding: 18px 24px 22px;
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
margin: -16px -16px 0;
border-radius: 0 0 24px 24px;
color: #fff;
position: relative;
overflow: hidden;
}
.wa-hero::after{
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 80% 20%, rgba(255,255,255,.15) 0%, transparent 50%),
radial-gradient(ellipse at 20% 80%, rgba(0,0,0,.10) 0%, transparent 60%);
pointer-events: none;
}
.wa-hero-icon{
width: 64px; height: 64px;
margin: 0 auto 12px;
background: rgba(255,255,255,.20);
border: 2px solid rgba(255,255,255,.30);
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
position: relative;
z-index: 1;
}
.wa-hero-title{
font-size: 20px;
font-weight: 800;
letter-spacing: -.3px;
margin-bottom: 4px;
position: relative;
text-shadow: 0 2px 6px rgba(0,0,0,.20);
}
.wa-hero-sub{
font-size: 13px;
opacity: .95;
line-height: 1.5;
max-width: 320px;
margin: 0 auto;
position: relative;
text-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.wa-step-wrap{
padding: 24px 16px 16px;
animation: waSlideIn .25s ease-out;
}
@keyframes waSlideIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.wa-field{ margin-bottom: 14px; }
.wa-label{
display: block;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--c-text-3);
margin-bottom: 8px;
}
.wa-phone-input{
display: flex;
align-items: center;
background: var(--c-bg-elev);
border: 2px solid var(--c-fill-2);
border-radius: 14px;
overflow: hidden;
transition: border-color .15s, box-shadow .15s;
}
.wa-phone-input:focus-within{
border-color: #25D366;
box-shadow: 0 0 0 4px rgba(37,211,102,.15);
}
.wa-phone-prefix{
padding: 0 12px 0 14px;
font-size: 16px;
font-weight: 700;
color: var(--c-text-2);
border-right: 1px solid var(--c-fill-2);
height: 100%;
display: flex;
align-items: center;
background: var(--c-fill-1);
}
.wa-phone-input input{
flex: 1;
border: 0;
background: transparent;
padding: 14px 14px;
font-size: 17px;
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: .5px;
outline: none;
color: var(--c-text-1);
font-family: inherit;
}
.wa-otp-input{
width: 100%;
background: var(--c-bg-elev);
border: 2px solid var(--c-fill-2);
border-radius: 14px;
padding: 18px 14px;
font-size: 30px;
font-weight: 800;
text-align: center;
letter-spacing: 14px;
font-variant-numeric: tabular-nums;
outline: none;
color: var(--c-text-1);
font-family: inherit;
transition: border-color .15s, box-shadow .15s;
text-indent: 14px; /* placeholder ortala */
}
.wa-otp-input:focus{
border-color: #25D366;
box-shadow: 0 0 0 4px rgba(37,211,102,.15);
}
.wa-hint{
display: flex;
align-items: center;
gap: 6px;
margin-top: 8px;
font-size: 12px;
color: var(--c-text-3);
line-height: 1.5;
}
.wa-hint a{ color: #16a34a; font-weight: 700; text-decoration: none; }
.wa-hint a:hover{ text-decoration: underline; }
.wa-hint svg{ flex-shrink: 0; }
.wa-btn{
width: 100%;
padding: 14px;
border: 0;
border-radius: 14px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: inherit;
transition: transform .15s, box-shadow .15s, opacity .15s;
-webkit-tap-highlight-color: transparent;
}
.wa-btn-primary{
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
color: #fff;
box-shadow:
0 6px 16px rgba(18,140,126,.30),
0 1px 0 rgba(255,255,255,.20) inset,
0 -1px 0 rgba(0,0,0,.15) inset;
margin-top: 6px;
}
.wa-btn-primary:active:not(:disabled){
transform: scale(.98);
box-shadow: 0 3px 8px rgba(18,140,126,.25);
}
.wa-btn-primary:disabled{
opacity: .5;
cursor: not-allowed;
}
.wa-btn-text{
background: transparent;
color: var(--c-text-3);
margin-top: 8px;
font-weight: 600;
font-size: 13px;
}
.wa-btn-text:active{ background: var(--c-fill-1); }
.wa-loader{
width: 14px; height: 14px;
border: 2px solid rgba(255,255,255,.3);
border-top-color: #fff;
border-radius: 50%;
animation: waSpin .7s linear infinite;
display: inline-block;
}
@keyframes waSpin { to { transform: rotate(360deg); } }
.wa-channel-info{
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-radius: 10px;
font-size: 12px;
margin-bottom: 14px;
background: var(--c-fill-1);
color: var(--c-text-2);
line-height: 1.4;
}
.wa-channel-info.is-whatsapp{
background: linear-gradient(135deg, #d1fae5, #a7f3d0);
color: #065f46;
border-left: 3px solid #25D366;
}
.wa-channel-info.is-sms{
background: linear-gradient(135deg, #fef3c7, #fde68a);
color: #92400e;
border-left: 3px solid #f59e0b;
}
.wa-channel-info.is-dry{
background: linear-gradient(135deg, #dbeafe, #bfdbfe);
color: #1e40af;
border-left: 3px solid #3b82f6;
}
.wa-channel-info svg{ flex-shrink: 0; }
.wa-channel-info strong{ font-weight: 800; }
.wa-bottom-info{
margin: 18px 16px 0;
padding: 12px 14px;
background: var(--c-fill-1);
border-radius: 12px;
font-size: 12px;
color: var(--c-text-2);
line-height: 1.6;
}
.wa-bottom-info strong{
color: var(--c-text-1);
font-weight: 700;
}
/* =====================================================================
* ZEKAT SEPET SİSTEMİ - PREMIUM
* ===================================================================== */
.zk-wrap{ padding: 14px 16px 100px; }
/* Hero - nisap */
.zk-hero{
position: relative;
background: linear-gradient(135deg, #1d6f5e 0%, #299981 50%, #2fae93 100%);
border-radius: 22px;
overflow: hidden;
padding: 22px 20px;
margin-bottom: 16px;
color: #fff;
box-shadow: 0 12px 30px rgba(6,77,40,.30);
}
.zk-hero-bg{
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 30% 20%, rgba(251,231,158,.20) 0%, transparent 55%),
radial-gradient(ellipse at 80% 80%, rgba(34,197,94,.20) 0%, transparent 50%);
pointer-events: none;
}
.zk-hero-content{ position: relative; text-align: center; }
.zk-hero-label{
font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
opacity: .85; margin-bottom: 6px; text-transform: uppercase;
}
.zk-hero-amount{
font-size: 36px; font-weight: 800; line-height: 1;
font-variant-numeric: tabular-nums; letter-spacing: -1.5px;
margin-bottom: 6px;
text-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.zk-hero-sub{ font-size: 12px; opacity: .9; margin-bottom: 14px; }
.zk-hero-toggle{
display: inline-flex; gap: 4px;
background: rgba(0,0,0,.25);
padding: 3px;
border-radius: 12px;
backdrop-filter: blur(8px);
}
.zk-toggle{
padding: 6px 16px;
background: transparent; border: 0;
color: rgba(255,255,255,.7);
font-weight: 700; font-size: 12px;
border-radius: 9px;
cursor: pointer;
transition: all .15s;
}
.zk-toggle.is-on{ background: #fff; color: var(--brand-dark); }
.zk-info{
background: linear-gradient(135deg, #fefcf3, #f5edd3);
border: 1px solid #e6dec1;
border-radius: 12px; padding: 12px 14px;
font-size: 12px; line-height: 1.6;
color: #7c4a1c; margin-bottom: 14px;
}
.zk-info strong{ color: #5a3208; }
/* Kategori sekmeleri */
.zk-tabs{
display: flex; gap: 6px;
overflow-x: auto;
padding: 2px 0 8px;
margin-bottom: 12px;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
}
.zk-tabs::-webkit-scrollbar{ display: none; }
.zk-tab{
flex-shrink: 0;
display: flex; flex-direction: column; align-items: center;
gap: 4px;
min-width: 76px; padding: 10px 8px;
background: var(--c-bg-elev);
border: 2px solid var(--c-fill-2);
border-radius: 12px;
cursor: pointer;
font-family: inherit;
scroll-snap-align: start;
transition: all .15s;
}
.zk-tab.is-active{
border-color: var(--c, var(--brand));
background: linear-gradient(135deg, var(--c, var(--brand)) 0%, color-mix(in oklab, var(--c, var(--brand)) 75%, black) 100%);
color: #fff;
}
.zk-tab-ico{ font-size: 22px; line-height: 1; }
.zk-tab-ad{
font-size: 10px; font-weight: 700;
text-align: center; line-height: 1.2;
}
/* Form */
.zk-form-card{
background: var(--c-bg-elev);
border: 1px solid var(--c-fill-1);
border-radius: 14px; padding: 16px;
margin-bottom: 14px;
}
.zk-form{ display: flex; flex-direction: column; gap: 12px; }
.zk-row{ display: flex; flex-direction: column; gap: 6px; }
.zk-row label{
font-size: 12px; font-weight: 700;
color: var(--c-text-2);
text-transform: uppercase;
letter-spacing: .3px;
}
.zk-input{
width: 100%;
padding: 12px 14px;
background: var(--c-fill-1);
border: 1px solid var(--c-fill-2);
border-radius: 10px;
font-size: 15px;
font-family: inherit;
color: var(--c-text-1);
outline: none;
transition: border-color .15s, box-shadow .15s;
}
.zk-input:focus{
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(13,140,74,.15);
}
.zk-radio-row{ display: flex; gap: 8px; }
.zk-radio{
flex: 1;
display: flex; align-items: center; justify-content: center;
gap: 6px; padding: 8px;
background: var(--c-fill-1);
border: 2px solid var(--c-fill-2);
border-radius: 10px;
cursor: pointer;
font-size: 13px; font-weight: 700;
color: var(--c-text-2);
}
.zk-radio input{ display: none; }
.zk-radio:has(input:checked){
background: var(--brand);
color: #fff;
border-color: var(--brand);
}
.zk-add-btn{
width: 100%;
padding: 12px;
background: linear-gradient(135deg, var(--brand-2) 0%, var(--brand-dark) 100%);
color: #fff;
border: 0;
border-radius: 10px;
font-weight: 700;
font-size: 14px;
cursor: pointer;
font-family: inherit;
box-shadow: 0 3px 8px rgba(41,153,129,.25);
}
.zk-add-btn:active{ transform: scale(.98); }
.zk-form-not{
font-size: 12px;
background: #fef3c7; border: 1px solid #fcd34d;
border-radius: 8px; padding: 10px 12px;
color: #92400e; line-height: 1.5;
}
.zk-form-not strong{ color: #78350f; }
/* Sepet */
.zk-sepet{
background: var(--c-bg-elev);
border: 1px solid var(--c-fill-1);
border-radius: 14px;
margin-bottom: 14px;
overflow: hidden;
}
.zk-sepet-baslik{
padding: 12px 14px;
display: flex; align-items: center; justify-content: space-between;
font-size: 12px; font-weight: 800;
text-transform: uppercase; letter-spacing: .5px;
color: var(--c-text-3);
border-bottom: 1px solid var(--c-fill-1);
background: var(--c-fill-1);
}
.zk-sepet-temizle{
background: transparent; border: 0;
color: #dc2626; font-size: 12px;
font-weight: 700; cursor: pointer;
font-family: inherit;
}
.zk-sepet-list{ padding: 4px; }
.zk-sepet-bos{
padding: 24px;
text-align: center;
color: var(--c-text-3); font-size: 13px;
}
.zk-sepet-item{
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
border-radius: 10px;
transition: background .15s;
}
.zk-sepet-item:hover{ background: var(--c-fill-1); }
.zk-sepet-item.is-borc{ background: #fef2f2; }
.zk-sepet-ico{
flex-shrink: 0;
width: 40px; height: 40px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 20px;
}
.zk-sepet-info{ flex: 1; min-width: 0; }
.zk-sepet-tip{
font-size: 12px; font-weight: 600;
color: var(--c-text-2);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zk-sepet-miktar{
font-size: 14px; font-weight: 700;
color: var(--c-text-1);
font-variant-numeric: tabular-nums;
}
.zk-sepet-sil{
flex-shrink: 0;
width: 28px; height: 28px;
border: 0; border-radius: 50%;
background: var(--c-fill-2);
color: var(--c-text-2);
font-size: 18px; font-weight: 700;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-family: inherit;
}
.zk-sepet-sil:hover{ background: #fee2e2; color: #dc2626; }
/* Hesapla butonu */
.zk-hesapla-btn{
width: 100%;
padding: 14px;
background: linear-gradient(135deg, var(--brand-2) 0%, var(--brand-dark) 100%);
color: #fff;
border: 0;
border-radius: 14px;
font-weight: 800;
font-size: 15px;
cursor: pointer;
font-family: inherit;
margin-bottom: 12px;
box-shadow: 0 6px 16px rgba(41,153,129,.35);
}
.zk-hesapla-btn:disabled{
opacity: .5; cursor: not-allowed;
background: var(--c-fill-2); color: var(--c-text-3);
box-shadow: none;
}
.zk-gecmis-link{
width: 100%;
padding: 12px;
background: transparent;
border: 1px solid var(--c-fill-2);
border-radius: 12px;
color: var(--c-text-2);
font-weight: 600; font-size: 13px;
cursor: pointer;
font-family: inherit;
}
/* Sonuç ekranı */
.zk-sonuc-card{
background: linear-gradient(135deg, #16a34a, #15803d);
color: #fff;
border-radius: 22px;
padding: 24px 20px;
text-align: center;
margin-bottom: 16px;
box-shadow: 0 12px 30px rgba(22,163,74,.30);
}
.zk-sonuc-card.is-yetmiyor{
background: linear-gradient(135deg, #64748b, #475569);
box-shadow: 0 12px 30px rgba(71,85,105,.25);
}
.zk-sonuc-baslik{
font-size: 14px; font-weight: 700;
opacity: .95; margin-bottom: 8px;
}
.zk-sonuc-tutar{
font-size: 42px; font-weight: 800;
line-height: 1;
font-variant-numeric: tabular-nums;
letter-spacing: -1.5px;
text-shadow: 0 2px 8px rgba(0,0,0,.20);
margin-bottom: 6px;
}
.zk-sonuc-alt{ font-size: 12px; opacity: .9; }
.zk-detay-card{
background: var(--c-bg-elev);
border: 1px solid var(--c-fill-1);
border-radius: 14px;
padding: 16px;
margin-bottom: 14px;
}
.zk-detay-baslik{
margin: 0 0 10px;
font-size: 14px; font-weight: 700;
color: var(--c-text-1);
}
.zk-detay-tablo{
width: 100%;
font-size: 13px;
font-variant-numeric: tabular-nums;
}
.zk-detay-tablo td{
padding: 6px 0;
border-bottom: 1px solid var(--c-fill-1);
}
.zk-detay-tablo td:last-child{ text-align: right; }
.zk-detay-tablo tr:last-child td{ border-bottom: 0; }
.zk-detay-net td{
border-top: 2px solid var(--c-text-1);
padding-top: 8px; padding-bottom: 8px;
}
.zk-detay-zekat td{
background: rgba(22,163,74,.08);
color: #15803d;
border-radius: 8px;
}
.zk-sonuc-sepet-row{
display: flex; justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid var(--c-fill-1);
font-size: 12px;
}
.zk-sonuc-sepet-row:last-child{ border-bottom: 0; }
.zk-sonuc-sepet-aciklama{
flex: 1; color: var(--c-text-2);
}
.zk-sonuc-sepet-try{
font-weight: 700;
color: var(--c-text-1);
font-variant-numeric: tabular-nums;
margin-left: 8px;
}
.zk-kaydet-btn, .zk-bagis-btn, .zk-geri-btn{
width: 100%;
padding: 12px;
border: 0;
border-radius: 12px;
font-weight: 700; font-size: 14px;
cursor: pointer; font-family: inherit;
margin-bottom: 8px;
}
.zk-kaydet-btn{
background: var(--c-fill-1);
color: var(--c-text-1);
}
.zk-bagis-btn{
background: linear-gradient(135deg, #16a34a, #15803d);
color: #fff;
}
.zk-geri-btn{
background: transparent;
border: 1px solid var(--c-fill-2);
color: var(--c-text-2);
}
.zk-bilgi{
font-size: 11px; line-height: 1.6;
color: var(--c-text-3);
background: var(--c-fill-1);
border-radius: 10px; padding: 10px 12px;
margin-top: 12px;
}
.zk-gecmis-row{
background: var(--c-bg-elev);
border: 1px solid var(--c-fill-1);
border-radius: 12px;
padding: 12px 14px;
margin-bottom: 8px;
}
.zk-gecmis-tarih{
font-size: 11px; color: var(--c-text-3);
margin-bottom: 4px;
font-variant-numeric: tabular-nums;
}
.zk-gecmis-detay{
font-size: 14px;
color: var(--c-text-1);
margin-bottom: 6px;
}
.zk-gecmis-not{
font-size: 12px; color: var(--c-text-2);
font-style: italic;
}
.zk-gecmis-sil{
background: transparent; border: 0;
color: #dc2626; font-size: 12px;
font-weight: 700; cursor: pointer;
margin-top: 6px;
font-family: inherit;
}
/* =====================================================================
* SAHABE HAYATLARI - PREMIUM
* ===================================================================== */
.sh-wrap{ padding: 14px 16px 100px; }
/* Hero */
.sh-hero{
position: relative;
background: linear-gradient(135deg, #5a3208 0%, #7c4a1c 50%, #c9a961 100%);
border-radius: 22px;
overflow: hidden;
padding: 24px 20px;
margin-bottom: 16px;
color: #fff;
box-shadow: 0 12px 30px rgba(124,74,28,.30);
text-align: center;
}
.sh-hero-bg{
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.18) 0%, transparent 55%),
radial-gradient(ellipse at 80% 80%, rgba(0,0,0,.20) 0%, transparent 60%);
}
.sh-hero-content{ position: relative; }
.sh-hero-emoji{ font-size: 32px; margin-bottom: 8px; }
.sh-hero-title{
font-family: 'Georgia', serif;
font-size: 24px; font-weight: 800;
letter-spacing: -.3px;
margin-bottom: 6px;
text-shadow: 0 2px 6px rgba(0,0,0,.30);
}
.sh-hero-sub{
font-size: 12px; line-height: 1.5;
opacity: .92;
max-width: 320px; margin: 0 auto 12px;
text-shadow: 0 1px 3px rgba(0,0,0,.20);
}
.sh-hero-stat{
display: inline-block;
padding: 5px 14px;
background: rgba(0,0,0,.30);
border-radius: 14px;
font-size: 11px;
font-weight: 700;
backdrop-filter: blur(8px);
letter-spacing: .5px;
}
.sh-hero-stat strong{
font-size: 13px;
color: #fbe79e;
}
/* Sekmeler */
.sh-tabs{
display: flex; gap: 6px;
overflow-x: auto;
padding: 2px 0 12px;
-webkit-overflow-scrolling: touch;
}
.sh-tabs::-webkit-scrollbar{ display: none; }
.sh-tab{
flex-shrink: 0;
padding: 8px 16px;
background: var(--c-bg-elev);
border: 1px solid var(--c-fill-2);
border-radius: 20px;
font-size: 13px; font-weight: 700;
color: var(--c-text-2);
cursor: pointer;
font-family: inherit;
white-space: nowrap;
transition: all .15s;
}
.sh-tab.is-active{
background: linear-gradient(135deg, #7c4a1c, #5a3208);
color: #fff; border-color: #5a3208;
}
/* Grid */
.sh-grid{
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
@media (min-width: 480px) {
.sh-grid{ grid-template-columns: 1fr 1fr; }
}
/* Kart */
.sh-kart{
background: var(--c-bg-elev);
border: 1px solid var(--c-fill-1);
border-radius: 16px;
overflow: hidden;
cursor: pointer;
text-align: left;
font-family: inherit;
padding: 0;
display: flex;
flex-direction: column;
transition: transform .2s, box-shadow .2s;
-webkit-tap-highlight-color: transparent;
}
.sh-kart:active{ transform: scale(.98); }
.sh-kart-foto{
position: relative;
height: 160px;
background: linear-gradient(135deg, #c9a961, #7c4a1c);
background-size: cover;
background-position: center 20%;
display: flex;
align-items: center;
justify-content: center;
}
.sh-kart-foto-fallback{
font-size: 56px;
filter: drop-shadow(0 4px 8px rgba(0,0,0,.25));
}
.sh-kart-overlay{
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.50) 100%);
}
.sh-kart-rozet{
position: absolute;
top: 10px; left: 10px;
padding: 4px 10px;
background: rgba(0,0,0,.45);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: #fff;
font-size: 10px;
font-weight: 700;
letter-spacing: .3px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,.20);
}
.sh-kart-body{ padding: 12px 14px 14px; }
.sh-kart-ad{
font-family: 'Georgia', serif;
font-size: 16px;
font-weight: 700;
color: var(--c-text-1);
line-height: 1.3;
margin-bottom: 4px;
}
.sh-kart-yas{
font-size: 11px;
color: var(--c-text-3);
margin-bottom: 6px;
font-variant-numeric: tabular-nums;
}
.sh-kart-ozet{
font-size: 12px;
color: var(--c-text-2);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Detay sheet */
.sh-detay{ padding-bottom: 24px; }
.sh-detay-hero{
position: relative;
height: 220px;
background: linear-gradient(135deg, #c9a961, #7c4a1c);
background-size: cover;
background-position: center 20%;
margin: -16px -16px 0;
}
.sh-detay-hero-overlay{
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.75) 100%);
}
.sh-detay-hero-content{
position: absolute;
bottom: 16px; left: 18px; right: 18px;
color: #fff;
}
.sh-detay-unvan{
display: inline-block;
padding: 4px 10px;
background: rgba(251,231,158,.25);
border: 1px solid rgba(251,231,158,.40);
color: #fbe79e;
font-size: 11px;
font-weight: 700;
border-radius: 8px;
margin-bottom: 8px;
backdrop-filter: blur(6px);
}
.sh-detay-ad{
font-family: 'Georgia', serif;
font-size: 22px;
font-weight: 800;
line-height: 1.2;
text-shadow: 0 2px 8px rgba(0,0,0,.50);
}
/* Meta grid */
.sh-detay-meta{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 16px;
background: linear-gradient(135deg, #fefcf3, #f5edd3);
border-bottom: 1px solid #e6dec1;
}
.sh-detay-meta-item{
display: flex; flex-direction: column; gap: 2px;
}
.sh-detay-meta-item span{
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .5px;
color: #7c4a1c;
}
.sh-detay-meta-item strong{
font-size: 13px;
color: #5a3208;
font-weight: 700;
}
.sh-detay-ozet{
padding: 16px;
font-style: italic;
font-size: 14px;
color: var(--c-text-2);
line-height: 1.6;
border-bottom: 1px solid var(--c-fill-1);
background: var(--c-fill-1);
}
.sh-detay-icerik{ padding: 16px; }
.sh-md-h1, .sh-md-h2, .sh-md-h3{
font-family: 'Georgia', serif;
color: #5a3208;
margin: 18px 0 8px;
line-height: 1.3;
}
.sh-md-h1{ font-size: 22px; font-weight: 800; }
.sh-md-h2{
font-size: 17px; font-weight: 700;
border-left: 3px solid #c9a961;
padding-left: 10px;
}
.sh-md-h3{ font-size: 14px; font-weight: 700; }
.sh-md-p{
font-size: 14px;
color: var(--c-text-1);
line-height: 1.7;
margin: 0 0 12px;
}
.sh-md-list{
margin: 0 0 12px;
padding-left: 22px;
}
.sh-md-list li{
font-size: 14px;
color: var(--c-text-1);
line-height: 1.7;
margin-bottom: 4px;
}
.sh-md-quote{
margin: 12px 0;
padding: 10px 14px;
background: linear-gradient(135deg, #fefcf3, #f5edd3);
border-left: 3px solid #c9a961;
border-radius: 8px;
font-style: italic;
color: #5a3208;
font-size: 13px;
line-height: 1.6;
}
.sh-md-p code, .sh-md-list code{
background: var(--c-fill-1);
padding: 1px 5px;
border-radius: 3px;
font-size: 12px;
}
.sh-detay-dua{
font-size: 24px;
text-align: center;
color: #7c4a1c;
padding: 20px 16px;
font-weight: 700;
direction: rtl;
}
/* Sahâbe Hayâtları - Anasayfa kartı */
.sh-anasayfa-kart{
display: block;
position: relative;
margin-top: 12px;
height: 110px;
border-radius: 18px;
overflow: hidden;
text-decoration: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
box-shadow: 0 8px 22px rgba(124,74,28,.28);
transition: transform .15s, box-shadow .15s;
}
.sh-anasayfa-kart:active{ transform: scale(.98); }
.sh-anasayfa-bg{
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 25% 30%, rgba(251,231,158,.30) 0%, transparent 55%),
radial-gradient(ellipse at 80% 80%, rgba(0,0,0,.25) 0%, transparent 60%),
linear-gradient(135deg, #5a3208 0%, #7c4a1c 50%, #c9a961 100%);
}
.sh-anasayfa-icerik{
position: relative;
height: 100%;
display: flex;
align-items: center;
gap: 14px;
padding: 0 20px;
color: #fff;
}
.sh-anasayfa-emoji{
flex-shrink: 0;
font-size: 36px;
filter: drop-shadow(0 2px 6px rgba(0,0,0,.40));
}
.sh-anasayfa-baslik{
font-family: 'Georgia', serif;
font-size: 19px;
font-weight: 800;
letter-spacing: -.3px;
line-height: 1.2;
text-shadow: 0 2px 6px rgba(0,0,0,.35);
margin-bottom: 4px;
}
.sh-anasayfa-altbaslik{
font-size: 12px;
opacity: .92;
text-shadow: 0 1px 3px rgba(0,0,0,.30);
}
.sh-anasayfa-chev{
position: absolute;
right: 16px; top: 50%;
transform: translateY(-50%);
filter: drop-shadow(0 1px 3px rgba(0,0,0,.30));
}
/* =====================================================================
* ZEKAT - SVG icon fixes (emoji yerine)
* ===================================================================== */
.zk-tab-ico{
width: 24px; height: 24px;
display: inline-flex; align-items: center; justify-content: center;
}
.zk-tab-ico svg{ width: 24px; height: 24px; }
.zk-icon-sm{
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px;
margin-right: 6px;
vertical-align: middle;
}
.zk-icon-sm svg{ width: 18px; height: 18px; }
.zk-add-btn, .zk-kaydet-btn, .zk-bagis-btn, .zk-geri-btn, .zk-gecmis-link{
display: flex; align-items: center; justify-content: center;
}
.zk-sepet-ico{
width: 40px; height: 40px;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
border-radius: 10px;
}
.zk-sepet-ico svg{ width: 22px; height: 22px; }
.zk-sonuc-check{
width: 56px; height: 56px;
margin: 0 auto 10px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.20);
border-radius: 50%;
backdrop-filter: blur(8px);
}
.zk-sonuc-check svg{ width: 32px; height: 32px; color: #fff; }
/* =====================================================================
* SAHABE - SVG icon fixes (emoji yerine)
* ===================================================================== */
.sh-hero-icon{
width: 44px; height: 44px;
margin: 0 auto 8px;
display: flex; align-items: center; justify-content: center;
color: #fbe79e;
filter: drop-shadow(0 2px 6px rgba(0,0,0,.30));
}
.sh-hero-icon svg{ width: 36px; height: 36px; }
.sh-kart-foto-fallback{
width: 64px; height: 64px;
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,.92);
filter: drop-shadow(0 4px 8px rgba(0,0,0,.25));
}
.sh-kart-foto-fallback svg{ width: 56px; height: 56px; }
/* Anasayfa Sahabe kartı */
.sh-anasayfa-kart{
position: relative;
display: block;
padding: 18px 20px;
margin-top: 12px;
background: linear-gradient(135deg, #5a3208 0%, #7c4a1c 50%, #c9a961 100%);
border-radius: 16px;
overflow: hidden;
text-decoration: none;
color: #fff;
cursor: pointer;
box-shadow: 0 8px 20px rgba(124,74,28,.25);
-webkit-tap-highlight-color: transparent;
transition: transform .2s;
}
.sh-anasayfa-kart:active{ transform: scale(.985); }
.sh-anasayfa-bg{
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.20) 0%, transparent 55%),
radial-gradient(ellipse at 90% 90%, rgba(0,0,0,.18) 0%, transparent 60%);
pointer-events: none;
}
.sh-anasayfa-icerik{
position: relative;
display: flex; align-items: center; gap: 14px;
}
.sh-anasayfa-icon{
flex-shrink: 0;
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
background: rgba(251,231,158,.20);
color: #fbe79e;
border: 1px solid rgba(251,231,158,.35);
border-radius: 12px;
backdrop-filter: blur(6px);
}
.sh-anasayfa-icon svg{ width: 24px; height: 24px; }
.sh-anasayfa-icerik > div:nth-child(2){ flex: 1; min-width: 0; }
.sh-anasayfa-baslik{
font-family: 'Georgia', serif;
font-size: 18px; font-weight: 800;
text-shadow: 0 2px 6px rgba(0,0,0,.30);
margin-bottom: 2px;
}
.sh-anasayfa-altbaslik{
font-size: 11px;
opacity: .92;
text-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.sh-anasayfa-chev{
position: absolute;
top: 50%; right: 16px;
transform: translateY(-50%);
opacity: .8;
}
/* =====================================================================
* SAHABE - İSLAMİ KALİGRAFİK FALLBACK TASARIMI
* (Eski emoji/SVG icon stillerini override eder)
* ===================================================================== */
/* Hero - Arapça dua: "Radıyallâhu anhüm" */
.sh-hero-icon{ display: none !important; }
.sh-hero-emoji{ display: none !important; }
.sh-hero-arapca{
font-size: 28px;
font-weight: 600;
color: #fbe79e;
margin-bottom: 10px;
line-height: 1.2;
direction: rtl;
letter-spacing: 0;
text-shadow: 0 2px 8px rgba(0,0,0,.40);
font-family: 'Amiri', 'Scheherazade New', 'Traditional Arabic', serif;
}
/* Kart fallback - kaligrafi tasarım */
.sh-kart-foto-fallback{ display: none !important; }
.sh-kart-fallback{
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 16px;
text-align: center;
background:
radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.10) 0%, transparent 60%),
linear-gradient(135deg, #5a3208 0%, #7c4a1c 40%, #a07939 70%, #c9a961 100%);
overflow: hidden;
}
/* İslamî geometrik desen (sublime art - SVG arka plan) */
.sh-kart-fb-pattern{
position: absolute;
inset: 0;
opacity: .08;
background-image: url("data:image/svg+xml;utf8,");
background-size: 60px 60px;
background-repeat: repeat;
}
.sh-kart-fb-arapca{
position: relative;
font-family: 'Amiri', 'Scheherazade New', 'Traditional Arabic', serif;
font-size: 30px;
font-weight: 600;
color: #fbe79e;
direction: rtl;
line-height: 1.1;
text-shadow: 0 2px 6px rgba(0,0,0,.40);
margin-bottom: 8px;
z-index: 2;
}
.sh-kart-fb-divider{
position: relative;
width: 60px;
height: 1px;
background: linear-gradient(90deg, transparent, #fbe79e, transparent);
margin-bottom: 8px;
z-index: 2;
}
.sh-kart-fb-kisalt{
position: relative;
font-family: 'Georgia', serif;
font-size: 22px;
font-weight: 700;
color: rgba(255,255,255,.85);
letter-spacing: 4px;
z-index: 2;
}
/* Anasayfa kartındaki yıldız ikonu da kaligrafi olsun */
.sh-anasayfa-icon{
display: flex !important;
background: rgba(251,231,158,.18) !important;
font-family: 'Amiri', 'Scheherazade New', serif !important;
}
.sh-anasayfa-icon svg{ display: none; }
.sh-anasayfa-icon::before{
content: 'صَحَابَة';
font-size: 14px;
font-weight: 600;
color: #fbe79e;
direction: rtl;
text-shadow: 0 1px 3px rgba(0,0,0,.30);
}
/* =====================================================================
* ANA SAYFA PREMIUM VAKİT KARTLARI - YATAY SCROLL
* 6 vakit, mobil dahil yatay kaydırılabilir, taşma yok
* ===================================================================== */
.times-grid-premium{
display: flex !important;
flex-wrap: nowrap !important;
gap: 8px !important;
margin: 16px !important;
padding: 4px 0 !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scroll-snap-type: x mandatory !important;
scrollbar-width: none !important;
}
.times-grid-premium::-webkit-scrollbar{ display: none !important; }
.times-grid-premium .time-pill{
flex: 1 0 calc((100% - 40px) / 6) !important;
min-width: 0 !important;
scroll-snap-align: start !important;
background: linear-gradient(180deg, #ffffff 0%, #f8faf9 100%) !important;
border: 1px solid #e8efeb !important;
border-radius: 14px !important;
padding: 12px 4px 11px !important;
text-align: center !important;
box-shadow:
0 1px 3px rgba(41, 153, 129, 0.04),
0 4px 14px rgba(41, 153, 129, 0.05) !important;
position: relative !important;
overflow: hidden !important;
transition: transform .25s ease, box-shadow .25s ease !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
/* Subtle altın çizgi tepede */
.times-grid-premium .time-pill::before{
content: '';
position: absolute;
top: 0; left: 18%; right: 18%;
height: 2px;
background: linear-gradient(90deg, transparent, #c9a961 50%, transparent);
opacity: .35;
border-radius: 0 0 2px 2px;
}
/* Aktif vakit - yeşil premium */
.times-grid-premium .time-pill.is-active{
background: linear-gradient(180deg, #2fae93 0%, #1d6f5e 100%) !important;
border-color: #1d6f5e !important;
box-shadow:
0 4px 12px rgba(41, 153, 129, .35),
0 8px 24px rgba(41, 153, 129, .22) !important;
transform: translateY(-2px) !important;
outline: none !important;
}
.times-grid-premium .time-pill.is-active::before{
background: linear-gradient(90deg, transparent, #fbe79e 50%, transparent);
opacity: .85;
}
/* Vakit adı */
.times-grid-premium .time-pill-name{
font-size: 9.5px !important;
font-weight: 700 !important;
color: #64748b !important;
text-transform: uppercase !important;
letter-spacing: .6px !important;
margin-bottom: 5px !important;
white-space: nowrap !important;
}
.times-grid-premium .time-pill.is-active .time-pill-name{
color: #fbe79e !important;
}
/* Vakit zamanı */
.times-grid-premium .time-pill-time{
font-size: 15px !important;
font-weight: 800 !important;
color: #0a0a0a !important;
font-variant-numeric: tabular-nums !important;
letter-spacing: -0.3px !important;
line-height: 1 !important;
white-space: nowrap !important;
}
.times-grid-premium .time-pill.is-active .time-pill-time{
color: #ffffff !important;
text-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
/* Tablet/geniş ekran - daha büyük */
@media (min-width: 600px) {
.times-grid-premium{
overflow-x: visible !important;
}
.times-grid-premium .time-pill{
padding: 18px 8px 16px !important;
border-radius: 16px !important;
}
.times-grid-premium .time-pill-name{
font-size: 11px !important;
letter-spacing: 1px !important;
margin-bottom: 8px !important;
}
.times-grid-premium .time-pill-time{
font-size: 22px !important;
}
}
@media (min-width: 900px) {
.times-grid-premium .time-pill{
padding: 22px 10px 18px !important;
}
.times-grid-premium .time-pill-time{
font-size: 26px !important;
}
}
/* =====================================================================
* VAKİT EKRANI 2026 - MINIMAL PREMIUM
* Felsefe: Tek odak (şu anki vakit DEV font), Apple Watch tarzı
* Hero görsel arka planda blur, ön plan içerik koyu glass overlay
* ===================================================================== */
/* Eski tüm hero/grid kalıntılarını öldür */
.view[data-view="vakitler"] .hero,
.view[data-view="vakitler"] .hero-premium,
.view[data-view="vakitler"] .times-grid,
.view[data-view="vakitler"] .times-grid-premium,
.view[data-view="vakitler"] .vh-hero,
.view[data-view="vakitler"] .vh-hero-image,
.view[data-view="vakitler"] .vh-hero-fade,
.view[data-view="vakitler"] .vh-hero-header,
.view[data-view="vakitler"] .vh-cd-card,
.view[data-view="vakitler"] .vh-times-card,
.view[data-view="vakitler"] .vh-quick,
.view[data-view="vakitler"] .kerahat-banner:not(.vh2-kerahat){
display: none !important;
}
/* View padding sıfırla */
.view[data-view="vakitler"]{
padding: 0 !important;
background: #f9f9f6 !important;
}
.view[data-view="vakitler"].is-active{
display: flex !important;
flex-direction: column !important;
padding-bottom: 0 !important;
position: relative;
background: #f9f9f6 !important;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* === HERO — Beyaz kâğıt zemin + soluk islami geometrik pattern === */
.vh2-hero{
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
background: #f9f9f6;
}
.vh2-hero::before{
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 100px 100px;
opacity: .5;
pointer-events: none;
}
.vh2-hero::after{
content: '';
position: absolute;
top: 40%;
left: 50%;
transform: translateX(-50%);
width: 400px;
height: 400px;
background: radial-gradient(circle at 50% 50%, rgba(201,169,97,.08) 0%, transparent 60%);
pointer-events: none;
}
/* === ANA İÇERİK (hero üzerinde) === */
.vh2-content{
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
/* Alt padding: sadece tabbar + safe-area (ekstra boşluk yok) */
padding: 16px 0 calc(var(--tabbar-h, 64px) + var(--safe-bot, 0px) + 12px);
text-align: center;
color: #0a2e1c;
min-height: 0;
}
/* vh2-content içindeki ilk seviye blokların yatay padding'i (vakit listesi hariç - kendi marjı var) */
.vh2-content > .vh2-top,
.vh2-content > .vh2-cd,
.vh2-content > .vh2-kerahat{
padding-left: 20px;
padding-right: 20px;
}
/* ÜST: Şehir + Tarih (kompakt) — beyaz zemin, koyu yeşil metin */
.vh2-top{
width: 100%;
margin-bottom: 18px;
padding-top: 4px;
}
.vh2-city{
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
font-weight: 600;
padding: 6px 14px;
background: rgba(41,153,129,.06);
border: 1px solid rgba(41,153,129,.14);
border-radius: 12px;
margin-bottom: 12px;
color: #299981;
}
.vh2-hicri{
font-size: 17px;
font-weight: 700;
color: #0a2e1c;
margin-top: 6px;
letter-spacing: .2px;
}
.vh2-date{
font-size: 12.5px;
font-weight: 500;
color: #64748b;
letter-spacing: .1px;
margin-top: 3px;
}
/* ORTA: Şu anki vakit */
.vh2-now{
margin: 8px 0 12px;
}
.vh2-now-label{
font-size: 10.5px;
font-weight: 700;
letter-spacing: 2.4px;
text-transform: uppercase;
color: #c9a961;
margin-bottom: 8px;
}
.vh2-now-name{
font-size: 22px;
font-weight: 600;
letter-spacing: .5px;
color: #1d6f5e;
margin-bottom: 6px;
}
.vh2-now-time{
font-size: 64px;
font-weight: 800;
font-variant-numeric: tabular-nums;
letter-spacing: -2px;
line-height: .95;
color: #fff;
text-shadow:
0 4px 24px rgba(0,0,0,.50),
0 0 60px rgba(251,231,158,.20);
}
/* COUNTDOWN + Progress bar — modern islami: beyaz card, koyu yeşil sayaç */
.vh2-cd{
width: 100%;
max-width: 380px;
margin: 8px auto 0;
padding: 22px 24px 20px;
background: #ffffff;
border: 1px solid rgba(41,153,129,.10);
border-radius: 22px;
box-shadow:
0 1px 2px rgba(6,77,40,.04),
0 12px 28px -12px rgba(6,77,40,.18);
position: relative;
overflow: hidden;
animation: vh2CdEnter .8s cubic-bezier(.16,1,.3,1);
}
@keyframes vh2CdEnter {
from { opacity: 0; transform: translateY(20px) scale(.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Üst altın parlama çizgisi */
.vh2-cd::before{
content: '';
position: absolute;
top: 0; left: 25%; right: 25%;
height: 2px;
background: linear-gradient(90deg, transparent, #c9a961 50%, transparent);
opacity: .7;
border-radius: 0 0 2px 2px;
}
.vh2-cd-label{
font-size: 11px;
font-weight: 700;
color: #299981;
letter-spacing: 1.5px;
margin-bottom: 12px;
text-transform: uppercase;
text-align: center;
}
/* DEV countdown clock — koyu yeşil, ince altın gölge */
.vh2-cd-clock{
font-size: 44px;
font-weight: 800;
font-variant-numeric: tabular-nums;
letter-spacing: -1px;
color: #1d6f5e;
margin-bottom: 14px;
line-height: 1;
text-align: center;
text-shadow: 0 2px 6px rgba(6,77,40,.10);
animation: vh2ClockPulse 2s ease-in-out infinite;
}
@keyframes vh2ClockPulse {
0%, 100% { opacity: 1; }
50% { opacity: .88; }
}
/* Yakın vakit (< 5dk) — sıcak turuncu uyarı */
.vh2-cd.is-imminent .vh2-cd-clock{
color: #c2410c;
text-shadow: 0 2px 8px rgba(194,65,12,.20);
animation: vh2ClockUrgent 1s ease-in-out infinite;
}
@keyframes vh2ClockUrgent {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.04); }
}
.vh2-progress{
width: 100%;
height: 8px;
background: rgba(41,153,129,.14);
border-radius: 999px;
overflow: hidden;
position: relative;
border: 1px solid rgba(41,153,129,.10);
}
.vh2-progress-fill{
height: 100%;
background: linear-gradient(90deg, #2fae93 0%, #299981 50%, #1d6f5e 100%);
border-radius: 999px;
transition: width .8s ease;
width: 0%;
box-shadow: 0 0 8px rgba(41,153,129,.35), inset 0 1px 0 rgba(255,255,255,.20);
position: relative;
overflow: hidden;
}
/* Shimmer animasyonu - sürekli akan parlaklık */
.vh2-progress-fill::after{
content: '';
position: absolute;
top: 0; left: -100%;
width: 60%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
animation: vh2Shimmer 2.4s linear infinite;
}
@keyframes vh2Shimmer {
0% { left: -100%; }
100% { left: 200%; }
}
/* Akıllı dini mesaj alanı (countdown'un altı) */
.vh2-cd-hikmet{
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid rgba(41,153,129,.08);
font-size: 12.5px;
font-weight: 500;
line-height: 1.5;
color: #475569;
letter-spacing: .1px;
min-height: 18px;
opacity: 0;
animation: vh2HikmetIn .6s ease forwards;
animation-delay: .3s;
text-align: center;
font-style: italic;
}
@keyframes vh2HikmetIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: .95; transform: translateY(0); }
}
/* Hikmet ikonu (sol başta küçük yıldız/hilal) */
.vh2-cd-hikmet::before{
content: '✦ ';
color: #fbe79e;
font-weight: 800;
margin-right: 4px;
}
/* KERAHAT (kompakt rozet) */
.vh2-kerahat{
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 12px;
padding: 6px 12px;
background: rgba(251,191,36,.18);
border: 1px solid rgba(251,191,36,.40);
border-radius: 12px;
color: #fef3c7;
font-size: 11.5px;
font-weight: 600;
text-shadow: 0 1px 3px rgba(0,0,0,.30);
}
.vh2-kerahat svg{ flex-shrink: 0; }
/* === ALT PANEL (vakitler) - SABİT KONUM, TABBAR ÜSTÜNDE === */
/* === MYNET STİLİ DİKEY VAKİT LİSTESİ ===
* PDF talebi: 6 vakit dikey liste, koyu panel, aktif vakit kalın
* Modern islami: beyaz card, koyu yeşil metin, altın accent aktif vakit */
.vh2-times-list{
margin: 18px 14px 0;
background: #ffffff;
border: 1px solid rgba(41,153,129,.10);
border-radius: 18px;
padding: 6px 0;
box-shadow:
0 1px 2px rgba(6,77,40,.04),
0 8px 24px -12px rgba(6,77,40,.14);
overflow: hidden;
}
.time-row{
display: flex;
align-items: center;
gap: 14px;
padding: 16px 22px;
border-bottom: 1px solid rgba(41,153,129,.06);
position: relative;
transition: background .3s ease;
}
.time-row:last-child{ border-bottom: 0; }
/* Her satırın kendine özgü ambient bg (ikonun rengiyle uyumlu, çok soluk) */
.time-row[data-key="imsak"] { background: linear-gradient(90deg, rgba(50,90,140,.14) 0%, rgba(50,90,140,.03) 55%, transparent 100%); }
.time-row[data-key="gunes"] { background: linear-gradient(90deg, rgba(240,140,50,.14) 0%, rgba(240,140,50,.03) 55%, transparent 100%); }
.time-row[data-key="ogle"] { background: linear-gradient(90deg, rgba(100,160,220,.14) 0%, rgba(100,160,220,.03) 55%, transparent 100%); }
.time-row[data-key="ikindi"] { background: linear-gradient(90deg, rgba(230,160,60,.14) 0%, rgba(230,160,60,.03) 55%, transparent 100%); }
.time-row[data-key="aksam"] { background: linear-gradient(90deg, rgba(220,90,50,.14) 0%, rgba(220,90,50,.03) 55%, transparent 100%); }
.time-row[data-key="yatsi"] { background: linear-gradient(90deg, rgba(30,45,90,.16) 0%, rgba(30,45,90,.03) 55%, transparent 100%); }
/* ============ VAKİT İKONLARI — Premium PNG (özel tasarım) ============ */
.time-row-icon{
width: 42px;
height: 42px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
overflow: hidden;
box-shadow:
0 1px 2px rgba(0,0,0,.06),
0 4px 12px -4px rgba(0,0,0,.15);
transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, filter .3s;
}
.time-row-icon img{
width: 108%;
height: 108%;
margin: -4%;
display: block;
object-fit: cover;
object-position: center;
transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}
/* Her ikon için özel yumuşak nefes animasyonu */
.time-row-icon-imsak img,
.time-row-icon-yatsi img{
animation: tiSlowGlow 5s ease-in-out infinite;
}
.time-row-icon-gunes img{
animation: tiSunRise 4.5s ease-in-out infinite;
}
.time-row-icon-ogle img{
animation: tiSunBright 3.2s ease-in-out infinite;
}
.time-row-icon-ikindi img{
animation: tiSlowGlow 5.5s ease-in-out infinite;
}
.time-row-icon-aksam img{
animation: tiSunSet 5s ease-in-out infinite;
}
@keyframes tiSlowGlow {
0%,100% { transform: scale(1); filter: brightness(1) saturate(1); }
50% { transform: scale(1.05); filter: brightness(1.08) saturate(1.15); }
}
@keyframes tiSunRise {
0%,100% { transform: translateY(2%) scale(1); filter: brightness(.95); }
50% { transform: translateY(-1%) scale(1.06); filter: brightness(1.10); }
}
@keyframes tiSunBright {
0%,100% { transform: scale(1) rotate(-1deg); filter: brightness(1) saturate(1); }
50% { transform: scale(1.07) rotate(1deg); filter: brightness(1.12) saturate(1.20); }
}
@keyframes tiSunSet {
0%,100% { transform: translateY(-1%) scale(1); filter: brightness(1); }
50% { transform: translateY(2%) scale(1.03); filter: brightness(.92); }
}
/* Geçmiş vakit — soluk & desat */
.time-row.is-past .time-row-icon{
opacity: .40;
filter: grayscale(.55) brightness(.9);
}
.time-row.is-past .time-row-icon img{
animation: none;
}
/* Aktif vakit — büyütme + altın halka + parlak glow */
.time-row.is-active .time-row-icon{
transform: scale(1.10);
box-shadow:
0 1px 2px rgba(0,0,0,.08),
0 8px 24px -6px rgba(201,169,97,.55),
0 0 0 2.5px rgba(201,169,97,.45);
}
.time-row-name{
font-size: 16px;
font-weight: 500;
color: #475569;
letter-spacing: .1px;
flex: 1;
}
.time-row-time{
font-size: 18px;
font-weight: 700;
color: #0a2e1c;
font-variant-numeric: tabular-nums;
letter-spacing: -.3px;
}
/* Geçmiş vakitler soluk */
.time-row.is-past .time-row-name,
.time-row.is-past .time-row-time{
opacity: .45;
}
.time-row.is-past .time-row-icon{
opacity: .35;
}
/* Aktif vakit: solda altın çizgi + kendi renginin biraz daha koyu tonu */
.time-row.is-active{
background: linear-gradient(90deg, rgba(41,153,129,.06) 0%, rgba(41,153,129,.02) 100%);
}
.time-row.is-active[data-key="imsak"] { background: linear-gradient(90deg, rgba(50,90,140,.24) 0%, rgba(50,90,140,.06) 70%, transparent 100%); }
.time-row.is-active[data-key="gunes"] { background: linear-gradient(90deg, rgba(240,140,50,.24) 0%, rgba(240,140,50,.06) 70%, transparent 100%); }
.time-row.is-active[data-key="ogle"] { background: linear-gradient(90deg, rgba(100,160,220,.24) 0%, rgba(100,160,220,.06) 70%, transparent 100%); }
.time-row.is-active[data-key="ikindi"] { background: linear-gradient(90deg, rgba(230,160,60,.24) 0%, rgba(230,160,60,.06) 70%, transparent 100%); }
.time-row.is-active[data-key="aksam"] { background: linear-gradient(90deg, rgba(220,90,50,.24) 0%, rgba(220,90,50,.06) 70%, transparent 100%); }
.time-row.is-active[data-key="yatsi"] { background: linear-gradient(90deg, rgba(30,45,90,.26) 0%, rgba(30,45,90,.06) 70%, transparent 100%); }
.time-row.is-active::before{
content: '';
position: absolute;
left: 0; top: 8px; bottom: 8px;
width: 3px;
background: linear-gradient(180deg, #c9a961, #b8935a);
border-radius: 0 3px 3px 0;
}
.time-row.is-active .time-row-icon{
color: #c9a961;
filter: drop-shadow(0 0 6px rgba(201,169,97,.35));
transform: scale(1.08);
}
.time-row.is-active .time-row-name{
color: #299981;
font-weight: 700;
}
.time-row.is-active .time-row-time{
color: #c9a961;
font-weight: 800;
}
/* Eski .vh2-bottom fixed panel kaldırıldı, content normal akışta */
.vh2-bottom{ display: none; }
/* 6 vakit kartı - OTOMATIK OPTIMIZE
* clamp() ile font ve padding her ekrana otomatik adapte olur
* Container query benzeri davranış: 6 sütun her zaman, font ekrana göre */
.vh2-times{
display: grid !important;
grid-template-columns: repeat(6, 1fr) !important;
gap: clamp(5px, 1.5vw, 10px) !important;
margin-bottom: 0;
width: 100%;
}
.vh2-times .time-pill{
background: rgba(255,255,255,.92);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: clamp(12px, 3vw, 18px);
padding: clamp(13px, 3.2vw, 20px) clamp(3px, 1.2vw, 8px) clamp(12px, 3vw, 18px);
text-align: center;
position: relative;
transition: transform .2s ease;
box-shadow: 0 2px 10px rgba(0,0,0,.18);
min-width: 0;
}
.vh2-times .time-pill.is-active{
background: linear-gradient(180deg, #2fae93 0%, #1d6f5e 100%);
transform: translateY(-3px);
box-shadow: 0 6px 18px rgba(41,153,129,.50);
}
.vh2-times .time-pill-name{
font-size: clamp(11px, 3vw, 14px) !important;
font-weight: 700 !important;
color: #475569 !important;
margin-bottom: clamp(5px, 1.5vw, 9px) !important;
text-transform: none !important;
letter-spacing: 0 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vh2-times .time-pill.is-active .time-pill-name{
color: rgba(251,231,158,.95) !important;
}
.vh2-times .time-pill-time{
font-size: clamp(15px, 4.4vw, 24px) !important;
font-weight: 800 !important;
color: #0a0a0a !important;
font-variant-numeric: tabular-nums !important;
letter-spacing: -.5px !important;
line-height: 1 !important;
white-space: nowrap;
}
.vh2-times .time-pill.is-active .time-pill-time{
color: #fff !important;
text-shadow: 0 1px 4px rgba(0,0,0,.30);
}
/* === RESPONSIVE === */
/* iPhone SE / küçük (< 360px) */
@media (max-width: 360px) {
.vh2-now-time{ font-size: 52px; letter-spacing: -1.5px; }
.vh2-now-name{ font-size: 16px; }
.vh2-cd-clock{ font-size: 28px; }
.vh2-cd{ max-width: 320px; padding: 12px 14px 10px; }
.vh2-cd-hikmet{ font-size: 11px; }
}
/* Standart mobil (360-600px) - default */
/* Tablet (>= 600px) */
@media (min-width: 600px) {
.vh2-content{ padding: 28px 28px calc(var(--tabbar-h, 64px) + var(--safe-bot, 0px) + 160px); }
.vh2-now-time{ font-size: 84px; letter-spacing: -3px; }
.vh2-now-name{ font-size: 22px; }
.vh2-cd{ max-width: 460px; padding: 18px 24px 14px; }
.vh2-cd-clock{ font-size: 48px; }
.vh2-cd-hikmet{ font-size: 13.5px; }
.vh2-bottom{
max-width: 720px;
left: 50%;
transform: translateX(-50%);
right: auto;
width: calc(100% - 0px);
}
}
/* Desktop (>= 900px) */
@media (min-width: 900px) {
.vh2-now-time{ font-size: 100px; }
}
/* =====================================================================
* VAKİT EKRANI - Header transparan, hero ekranın en üstüne kadar
* ===================================================================== */
/* Vakit ekranındayken header — beyaz zemine uyumlu */
body.tab-vakitler .header,
.app:has(.view[data-view="vakitler"].is-active) .header{
background: rgba(249,249,246,.85) !important;
backdrop-filter: saturate(180%) blur(20px) !important;
-webkit-backdrop-filter: saturate(180%) blur(20px) !important;
border-bottom: .5px solid rgba(41,153,129,.08) !important;
box-shadow: none !important;
}
/* Header ikonları — koyu yeşil (beyaz zemin üzerinde okunur) */
body.tab-vakitler .header-btn svg,
.app:has(.view[data-view="vakitler"].is-active) .header-btn svg{
color: #299981;
filter: none;
}
body.tab-vakitler .header-title img,
.app:has(.view[data-view="vakitler"].is-active) .header-title img{
filter: none;
}
body.tab-vakitler .header-weather,
.app:has(.view[data-view="vakitler"].is-active) .header-weather{
background: rgba(41,153,129,.06) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: 1px solid rgba(41,153,129,.14) !important;
color: #299981 !important;
}
body.tab-vakitler .header-weather-temp,
.app:has(.view[data-view="vakitler"].is-active) .header-weather-temp{
color: #299981 !important;
text-shadow: none;
}
/* Hero ekranın en üstünden başlasın - app padding-top sıfırla */
.app:has(.view[data-view="vakitler"].is-active){
padding-top: 0 !important;
}
/* vh2-content header altından değil EN ÜST'ten başlar */
.view[data-view="vakitler"] .vh2-content{
padding-top: calc(var(--header-h, 56px) + var(--safe-top, 0px) + 8px) !important;
}
/* Hero da ekranın tepesine kadar uzasın */
.view[data-view="vakitler"] .vh2-hero{
top: 0 !important;
}
/* =====================================================================
* HEADER LOGO TAM ORTA + BÜYÜK
* Soldaki ve sağdaki butonlar farklı genişlikte olduğu için
* logo'yu position:absolute ile mutlak ortala
* ===================================================================== */
.header-inner{ position: relative; }
.header-title{
position: absolute !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
flex: none !important;
width: auto !important;
pointer-events: none;
z-index: 2;
}
.header-title img,
.header-title > img{
max-height: 44px !important;
height: 44px !important;
width: auto !important;
}
/* Hava durumu chip'i artık header-right içinde flex item */
.header-weather{
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 600;
padding: 4px 8px;
background: rgba(0,0,0,.04);
border-radius: 8px;
color: var(--c-text-1);
}
/* Header yüksekliğini büyük logoya göre ayarla */
:root{
--header-h: 64px;
}
/* =====================================================================
* KUR'AN-I KERİM MODÜLÜ - PREMIUM REDESIGN
* Backend dokunulmadı, sadece görsel iyileştirme
* ===================================================================== */
/* "Kaldığın yerden" kartı - premium altın aksanlı koyu yeşil */
.kuran-resume{
background: linear-gradient(135deg, #1d6f5e 0%, #299981 50%, #2fae93 100%) !important;
color: #fff !important;
border-radius: 20px !important;
margin: 8px 14px 16px !important;
padding: 18px 20px !important;
cursor: pointer !important;
box-shadow:
0 8px 24px rgba(6,77,40,.30),
0 2px 6px rgba(0,0,0,.08) !important;
transition: transform .2s ease, box-shadow .2s ease !important;
position: relative;
overflow: hidden;
}
.kuran-resume::before{
content: '';
position: absolute;
top: 0; right: 0;
width: 120px; height: 120px;
background: radial-gradient(circle at top right, rgba(251,231,158,.20), transparent 70%);
pointer-events: none;
}
.kuran-resume::after{
content: '';
position: absolute;
top: 14px; right: 16px;
width: 28px; height: 28px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
}
.kuran-resume:active{ transform: scale(.98) !important; }
/* Tabs - segmented control tarzı */
.kuran-tabs{
display: flex !important;
gap: 4px !important;
padding: 5px !important;
margin: 0 14px 14px !important;
background: #f1f5f9 !important;
border-radius: 14px !important;
}
.kuran-tab{
flex: 1 !important;
padding: 10px 12px !important;
border: 0 !important;
background: transparent !important;
font-size: 13px !important;
font-weight: 700 !important;
color: #64748b !important;
border-radius: 10px !important;
cursor: pointer !important;
font-family: inherit !important;
transition: all .2s ease !important;
}
.kuran-tab.is-active{
background: #ffffff !important;
color: #1d6f5e !important;
box-shadow: 0 2px 6px rgba(0,0,0,.08) !important;
}
.kuran-tab:active{ transform: scale(.97); }
/* Search input premium */
.kuran-search{ padding: 0 14px 14px !important; }
.kuran-input{
width: 100% !important;
padding: 13px 16px !important;
background: #f1f5f9 !important;
border: 1.5px solid transparent !important;
border-radius: 14px !important;
font-size: 14px !important;
font-family: inherit !important;
color: #0a0a0a !important;
outline: none !important;
transition: all .2s ease !important;
}
.kuran-input::placeholder{ color: #94a3b8; font-weight: 500; }
.kuran-input:focus{
background: #fff !important;
border-color: #2fae93 !important;
box-shadow: 0 0 0 4px rgba(13,140,74,.10) !important;
}
/* Sure listesi - Apple Books tarzı kartlar */
.kuran-list{
padding: 0 14px 100px !important;
display: flex;
flex-direction: column;
gap: 8px;
}
.kuran-sure-item{
width: 100% !important;
display: flex !important;
align-items: center !important;
gap: 14px !important;
padding: 14px 16px !important;
background: #fff !important;
border: 1px solid #f1f5f9 !important;
border-radius: 16px !important;
cursor: pointer !important;
transition: all .2s ease !important;
text-align: left !important;
font-family: inherit !important;
box-shadow: 0 1px 3px rgba(0,0,0,.03);
}
.kuran-sure-item:active{
transform: scale(.98) !important;
background: #f8fafc !important;
border-color: #cbd5e1 !important;
}
.kuran-sure-no{
width: 38px !important;
height: 38px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: linear-gradient(135deg, #2fae93, #1d6f5e) !important;
color: #fbe79e !important;
border-radius: 50% !important;
font-size: 13px !important;
font-weight: 800 !important;
font-variant-numeric: tabular-nums !important;
flex-shrink: 0 !important;
box-shadow: 0 2px 6px rgba(13,140,74,.25);
}
.kuran-sure-info{ flex: 1 !important; min-width: 0 !important; }
.kuran-sure-name{
font-size: 15.5px !important;
font-weight: 700 !important;
color: #0a0a0a !important;
margin-bottom: 2px !important;
}
.kuran-sure-meta{
font-size: 12px !important;
color: #64748b !important;
font-weight: 500 !important;
}
.kuran-sure-arabic{
font-family: 'Amiri', 'Scheherazade New', serif !important;
font-size: 22px !important;
color: #1d6f5e !important;
font-weight: 700 !important;
flex-shrink: 0 !important;
direction: rtl;
letter-spacing: 1px;
}
/* Cüz grid - kompakt premium */
.kuran-grid{
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 10px !important;
padding: 0 14px 100px !important;
}
.kuran-cuz-item{
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
padding: 22px 12px !important;
background: linear-gradient(180deg, #fff 0%, #f8faf9 100%) !important;
border: 1px solid #e8efeb !important;
border-radius: 16px !important;
cursor: pointer !important;
font-family: inherit !important;
transition: all .2s ease !important;
position: relative;
overflow: hidden;
}
.kuran-cuz-item::before{
content: '';
position: absolute;
top: 0; left: 22%; right: 22%;
height: 2px;
background: linear-gradient(90deg, transparent, #c9a961 50%, transparent);
opacity: .50;
}
.kuran-cuz-item:active{
transform: scale(.96);
background: linear-gradient(180deg, #2fae93, #1d6f5e) !important;
border-color: #1d6f5e !important;
}
.kuran-cuz-item:active .kuran-cuz-no,
.kuran-cuz-item:active .kuran-cuz-label{ color: #fff !important; }
.kuran-cuz-no{
font-size: 28px !important;
font-weight: 800 !important;
color: #1d6f5e !important;
font-variant-numeric: tabular-nums !important;
line-height: 1 !important;
letter-spacing: -1px;
}
.kuran-cuz-label{
font-size: 11px !important;
color: #64748b !important;
margin-top: 4px !important;
font-weight: 600 !important;
letter-spacing: .3px;
}
/* Yer imi sil butonu */
.kuran-bm-rm{
margin-left: auto;
width: 32px; height: 32px;
border: 0; background: #fef2f2;
color: #dc2626;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
cursor: pointer; font-family: inherit;
}
.kuran-bm-rm:active{ background: #fee2e2 !important; transform: scale(.92); }
/* === SURE OKUMA EKRANI - Mushaf premium === */
.kuran-reader-head{
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 8px 14px 14px !important;
background: #fff;
position: sticky;
top: 0;
z-index: 5;
border-bottom: 1px solid #f1f5f9;
}
.kuran-back-btn{
width: 38px !important; height: 38px !important;
border: 0 !important;
background: #f1f5f9 !important;
color: #475569 !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
font-family: inherit !important;
transition: all .2s ease !important;
}
.kuran-back-btn:active{
background: #e2e8f0 !important;
transform: scale(.92);
}
.kuran-reader-title{
flex: 1 !important;
text-align: center !important;
min-width: 0 !important;
}
.kuran-reader-name{
font-size: 17px !important;
font-weight: 800 !important;
color: #0a0a0a !important;
letter-spacing: -.3px;
}
.kuran-reader-sub{
font-size: 11.5px !important;
color: #64748b !important;
margin-top: 1px !important;
font-weight: 600 !important;
}
/* Meal tabs - segmented control (sadece 2 buton: Diyanet & Elmalılı) */
.kuran-meal-tabs{
display: flex !important;
gap: 4px !important;
padding: 5px !important;
margin: 14px 14px 16px !important;
background: #f1f5f9 !important;
border-radius: 14px !important;
}
.kuran-meal-tab{
flex: 1 !important;
padding: 10px 14px !important;
border: 0 !important;
background: transparent !important;
font-size: 13.5px !important;
font-weight: 700 !important;
color: #64748b !important;
border-radius: 10px !important;
cursor: pointer !important;
font-family: inherit !important;
transition: all .2s ease !important;
}
.kuran-meal-tab.is-active{
background: linear-gradient(135deg, #2fae93, #1d6f5e) !important;
color: #fff !important;
box-shadow: 0 2px 8px rgba(13,140,74,.30) !important;
}
.kuran-meal-tab:active{ transform: scale(.97); }
/* Besmele - krem premium banner */
.kuran-besmele{
text-align: center !important;
padding: 22px 18px !important;
margin: 0 14px 18px !important;
font-family: 'Amiri', 'Scheherazade New', serif !important;
font-size: 30px !important;
color: #1d6f5e !important;
background: linear-gradient(180deg, #fefcf3 0%, #f5edd3 100%) !important;
border-radius: 18px !important;
border: 1px solid #e8d8a8 !important;
letter-spacing: 1.5px;
line-height: 1.6;
position: relative;
}
.kuran-besmele::before,
.kuran-besmele::after{
content: '';
position: absolute;
left: 18%; right: 18%;
height: 1px;
background: linear-gradient(90deg, transparent, #c9a961 50%, transparent);
}
.kuran-besmele::before{ top: 8px; }
.kuran-besmele::after{ bottom: 8px; }
/* Ayet listesi container */
.kuran-ayet-list{
padding: 0 14px 120px !important;
display: flex;
flex-direction: column;
gap: 14px;
}
/* Tek ayet kartı - premium */
.kuran-ayet{
background: #fff !important;
border: 1px solid #f1f5f9 !important;
border-radius: 18px !important;
padding: 18px 18px 14px !important;
position: relative !important;
box-shadow: 0 1px 3px rgba(0,0,0,.03);
transition: all .3s ease;
}
.kuran-ayet.is-highlight{
background: linear-gradient(180deg, #fefcf3 0%, #f5edd3 100%) !important;
border-color: #c9a961 !important;
box-shadow: 0 4px 16px rgba(201,169,97,.30);
}
.kuran-ayet-no-badge{
position: absolute !important;
top: -10px !important;
left: 18px !important;
width: 32px !important;
height: 32px !important;
background: linear-gradient(135deg, #2fae93, #1d6f5e) !important;
color: #fbe79e !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 12px !important;
font-weight: 800 !important;
font-variant-numeric: tabular-nums !important;
box-shadow: 0 4px 10px rgba(13,140,74,.30) !important;
border: 2px solid #fff;
}
.kuran-ayet-arabic{
font-family: 'Amiri', 'Scheherazade New', serif !important;
text-align: right !important;
direction: rtl !important;
line-height: 2.0 !important;
color: #0a0a0a !important;
margin: 12px 0 16px !important;
font-weight: 500 !important;
letter-spacing: .5px;
}
.kuran-ayet-meal{
color: #475569 !important;
line-height: 1.7 !important;
padding: 14px 0 0 !important;
border-top: 1px dashed #e2e8f0 !important;
font-weight: 500 !important;
}
.kuran-ayet-actions{
display: flex !important;
gap: 8px !important;
margin-top: 14px !important;
padding-top: 12px !important;
border-top: 1px solid #f1f5f9 !important;
justify-content: flex-end;
}
.kuran-ayet-btn{
width: 36px !important; height: 36px !important;
border: 0 !important;
background: #f1f5f9 !important;
color: #475569 !important;
border-radius: 10px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
font-family: inherit !important;
transition: all .2s ease !important;
}
.kuran-ayet-btn:active{
background: #e2e8f0 !important;
transform: scale(.90);
}
.kuran-ayet-btn.is-active{
background: linear-gradient(135deg, #dc2626, #991b1b) !important;
color: #fff !important;
box-shadow: 0 2px 8px rgba(220,38,38,.30);
}
/* Player (alt floating) */
.kuran-player{
position: fixed !important;
bottom: calc(var(--tabbar-h, 64px) + var(--safe-bot, 0px) + 12px) !important;
left: 14px !important; right: 14px !important;
max-width: 720px;
margin: 0 auto;
z-index: 60 !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 12px 14px !important;
background: linear-gradient(135deg, #1d6f5e, #299981) !important;
border-radius: 16px !important;
color: #fff !important;
box-shadow: 0 12px 32px rgba(0,0,0,.25) !important;
}
.kuran-play-btn{
width: 42px !important; height: 42px !important;
border: 0 !important;
background: rgba(255,255,255,.15) !important;
color: #fbe79e !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
font-family: inherit !important;
transition: background .2s ease;
}
.kuran-play-btn:active{ background: rgba(255,255,255,.25) !important; transform: scale(.94); }
.kuran-play-btn.is-secondary{
width: 32px !important; height: 32px !important;
background: rgba(0,0,0,.20) !important;
color: #fff !important;
}
/* Responsive - tablet */
@media (min-width: 600px) {
.kuran-list, .kuran-grid, .kuran-ayet-list{
max-width: 720px;
margin-left: auto !important;
margin-right: auto !important;
}
.kuran-resume, .kuran-tabs, .kuran-search, .kuran-meal-tabs{
max-width: 720px;
margin-left: auto !important;
margin-right: auto !important;
}
.kuran-grid{ grid-template-columns: repeat(5, 1fr) !important; }
.kuran-ayet-arabic{ font-size: 28px !important; line-height: 2.2 !important; }
}
/* =====================================================================
* KURAN PREMIUM - FORCE OVERRIDE (specificity boost)
* Eski stillerle çakışma olmasın diye .view ile prefix
* ===================================================================== */
.view[data-view="kuran"] .kuran-list,
.view .kuran-list{
padding: 0 14px 100px !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
.view[data-view="kuran"] .kuran-sure-item,
.view .kuran-sure-item{
width: 100% !important;
display: flex !important;
align-items: center !important;
gap: 14px !important;
padding: 16px 16px !important;
background: #ffffff !important;
border: 1px solid #e8efeb !important;
border-bottom: 1px solid #e8efeb !important;
border-radius: 16px !important;
cursor: pointer !important;
text-align: left !important;
font-family: inherit !important;
box-shadow: 0 2px 8px rgba(41,153,129,.05), 0 1px 2px rgba(0,0,0,.03) !important;
transition: all .2s ease !important;
}
.view[data-view="kuran"] .kuran-sure-item:active,
.view .kuran-sure-item:active{
transform: scale(.985) !important;
background: #f8faf9 !important;
border-color: #cbd5e1 !important;
box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
}
/* Boşluk ayarı - sayfa altında alt navigasyon için yer */
.view[data-view="kuran"]{
padding-bottom: calc(var(--tabbar-h, 64px) + var(--safe-bot, 0px) + 16px);
}
/* =====================================================================
* PUSULA REALTIME PERFORMANS - Smoothing JS tarafında, CSS transition kısa
* ===================================================================== */
.qc-rose{
transition: transform .08s linear !important;
will-change: transform;
}
.qc-qibla-arrow{
transition: transform .08s linear !important;
will-change: transform;
}
/* =====================================================================
* ZİKİRMATİK PREMIUM - Tesbih Boncuk Efekti
* Light tema, yeşil/altın aksent, büyük dokunmatik halka
* ===================================================================== */
.zk-app{
display: flex;
flex-direction: column;
align-items: center;
padding: 12px 14px calc(var(--tabbar-h, 64px) + var(--safe-bot, 0px) + 20px);
width: 100%;
max-width: 480px;
margin: 0 auto;
gap: 14px;
}
/* Aktif zikir kartı (üst) */
.zk-active-card{
width: 100%;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: #ffffff;
border: 1px solid #e8efeb;
border-radius: 16px;
cursor: pointer;
text-align: left;
font-family: inherit;
box-shadow: 0 2px 8px rgba(41,153,129,.06);
transition: all .15s ease;
}
.zk-active-card:active{ transform: scale(.985); background: #f8faf9; }
.zk-active-info{ flex: 1; min-width: 0; }
.zk-active-label{
font-size: 10.5px;
font-weight: 700;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 3px;
}
.zk-active-name{
font-size: 16.5px;
font-weight: 800;
color: #1d6f5e;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: -.2px;
}
.zk-active-sub{
font-size: 12.5px;
color: #64748b;
margin-top: 1px;
font-weight: 500;
}
.zk-active-chev{ color: #cbd5e1; flex-shrink: 0; }
/* Akıllı tavsiye banner */
.zk-tavsiye{
width: 100%;
padding: 10px 14px;
background: linear-gradient(135deg, #fefcf3, #f5edd3);
border: 1px solid #e8d8a8;
border-radius: 12px;
font-size: 12.5px;
font-weight: 600;
color: #6b5817;
text-align: center;
letter-spacing: .1px;
line-height: 1.4;
}
/* === ANA TESBİH ALANI === */
.zk-tesbih{
position: relative;
width: 100%;
max-width: 340px;
aspect-ratio: 1 / 1;
background: transparent;
border: 0;
cursor: pointer;
font-family: inherit;
-webkit-tap-highlight-color: transparent;
padding: 0;
margin: 4px 0;
border-radius: 50%;
user-select: none;
}
.zk-tesbih:active{ transform: scale(.985); transition: transform .12s ease; }
/* SVG halka */
.zk-ring-svg{
width: 100%;
height: 100%;
display: block;
filter: drop-shadow(0 4px 12px rgba(201,169,97,.20));
}
/* İç boncuk (saf beyaz, derinlik gölgeli) */
.zk-bead{
position: absolute;
inset: 18px;
border-radius: 50%;
background:
radial-gradient(circle at 35% 30%,
#ffffff 0%,
#fafaf7 40%,
#f1ebd8 75%,
#e8d8a8 100%);
box-shadow:
inset 0 -8px 24px rgba(201,169,97,.18),
inset 0 8px 18px rgba(255,255,255,.9),
0 8px 24px rgba(0,0,0,.10),
0 2px 6px rgba(0,0,0,.06);
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.zk-bead-inner{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 16px;
}
/* Arapça yazı - Amiri font */
.zk-arapca{
font-family: 'Amiri', 'Scheherazade New', serif;
font-size: clamp(22px, 6vw, 30px);
color: #1d6f5e;
line-height: 1.2;
margin-bottom: 4px;
font-weight: 600;
text-shadow: 0 1px 2px rgba(255,255,255,.6);
letter-spacing: 1px;
direction: rtl;
}
/* Sayaç - DEV font */
.zk-sayac{
font-size: clamp(56px, 18vw, 84px);
font-weight: 800;
color: #0a0a0a;
letter-spacing: -3px;
line-height: 1;
font-variant-numeric: tabular-nums;
margin: 4px 0;
text-shadow: 0 1px 1px rgba(255,255,255,.6);
}
/* Hedef (/33) */
.zk-hedef{
font-size: 13px;
color: #64748b;
font-weight: 600;
margin-top: 2px;
}
/* Meta (segment label) */
.zk-meta{
font-size: 11px;
color: #94a3b8;
margin-top: 6px;
font-weight: 600;
min-height: 14px;
}
.zk-segment{
display: inline-block;
padding: 3px 10px;
background: linear-gradient(135deg, #1d6f5e, #299981);
color: #fbe79e;
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .3px;
box-shadow: 0 2px 6px rgba(41,153,129,.20);
}
/* Tıklama dalgası */
.zk-ripple{
position: absolute;
inset: 18px;
border-radius: 50%;
pointer-events: none;
background: radial-gradient(circle, rgba(13,140,74,.15), transparent 60%);
opacity: 0;
}
.zk-ripple.is-fire{
animation: zkRipple .6s ease-out;
}
@keyframes zkRipple {
0% { opacity: 0; transform: scale(.5); }
40% { opacity: 1; }
100% { opacity: 0; transform: scale(1.15); }
}
/* === EYLEM BUTONLARI === */
.zk-actions{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
width: 100%;
margin-top: 4px;
}
.zk-act-btn{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 12px 4px 11px;
background: #ffffff;
border: 1px solid #e8efeb;
border-radius: 14px;
color: #475569;
cursor: pointer;
font-family: inherit;
font-size: 11.5px;
font-weight: 700;
transition: all .15s ease;
box-shadow: 0 2px 6px rgba(0,0,0,.04);
-webkit-tap-highlight-color: transparent;
}
.zk-act-btn:active{
transform: scale(.94);
background: #f8faf9;
border-color: #cbd5e1;
}
.zk-act-btn svg{ color: #475569; }
.zk-act-btn span{ font-size: 11px; font-weight: 700; line-height: 1; }
/* Yeşil "Yeni" butonu */
.zk-act-add{
background: linear-gradient(135deg, #2fae93, #1d6f5e) !important;
border-color: #1d6f5e !important;
color: #fff !important;
box-shadow: 0 4px 12px rgba(41,153,129,.30) !important;
}
.zk-act-add svg{ color: #fbe79e; }
.zk-act-add span{ color: #fbe79e; }
/* Toggle (ses) butonu */
.zk-act-toggle svg{ color: #c9a961; }
/* İpucu metni */
.zk-hint{
font-size: 11.5px;
color: #94a3b8;
text-align: center;
font-weight: 500;
margin-top: 6px;
line-height: 1.4;
padding: 0 12px;
}
/* Responsive - tablet */
@media (min-width: 600px) {
.zk-tesbih{ max-width: 400px; }
.zk-actions{ max-width: 480px; }
}
/* Küçük ekran (< 360px) */
@media (max-width: 360px) {
.zk-tesbih{ max-width: 290px; }
.zk-sayac{ font-size: 56px; }
.zk-arapca{ font-size: 22px; }
}
/* =====================================================================
* BİLDİRİMLER - Bell badge + Sheet liste tasarımı
* ===================================================================== */
/* Bell üzerindeki kırmızı badge */
.bell-badge{
position: absolute;
top: 4px;
right: 4px;
min-width: 18px;
height: 18px;
padding: 0 5px;
background: #ef4444;
color: #fff;
font-size: 10.5px;
font-weight: 800;
font-variant-numeric: tabular-nums;
border-radius: 9px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
border: 2px solid #fff;
box-shadow: 0 2px 8px rgba(239, 68, 68, .35);
pointer-events: none;
animation: bellBadgePulse 2s ease-in-out infinite;
}
@keyframes bellBadgePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.10); }
}
/* Bell butonun position relative olmalı (badge için) */
#btnNotify{
position: relative !important;
}
/* Vakitler ekranında bell beyaz olduğu için badge border'ı koyu */
body.tab-vakitler .bell-badge{
border-color: rgba(0,0,0,.40);
box-shadow: 0 2px 10px rgba(239, 68, 68, .55);
}
/* === Bildirimler Sheet === */
.bildirim-tabs{
display: flex;
gap: 4px;
padding: 6px;
margin: 4px 0 12px;
background: #f1f5f9;
border-radius: 14px;
}
.bildirim-tab{
flex: 1;
padding: 10px 14px;
border: 0;
background: transparent;
font-size: 13px;
font-weight: 700;
color: #64748b;
border-radius: 10px;
cursor: pointer;
font-family: inherit;
transition: all .15s ease;
}
.bildirim-tab.is-active{
background: #fff;
color: #1d6f5e;
box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.bildirim-tab:active{ transform: scale(.97); }
.bildirim-list{
display: flex;
flex-direction: column;
gap: 10px;
padding-bottom: 8px;
max-height: 70vh;
overflow-y: auto;
}
.bildirim-loader{
text-align: center;
padding: 32px 16px;
color: #94a3b8;
font-size: 14px;
font-weight: 500;
}
.bildirim-empty{
text-align: center;
padding: 40px 24px;
color: #94a3b8;
}
.bildirim-empty-icon{
display: inline-flex;
width: 80px; height: 80px;
align-items: center;
justify-content: center;
background: #f1f5f9;
border-radius: 50%;
color: #cbd5e1;
margin-bottom: 14px;
}
.bildirim-empty-title{
font-size: 16px;
font-weight: 700;
color: #475569;
margin-bottom: 4px;
}
.bildirim-empty-sub{
font-size: 13px;
color: #94a3b8;
}
/* Bildirim item kartı */
.bildirim-item{
display: flex;
gap: 12px;
padding: 14px 14px;
background: #fff;
border: 1px solid #f1f5f9;
border-radius: 14px;
transition: all .15s ease;
position: relative;
}
.bildirim-item.is-unread{
background: linear-gradient(180deg, #fefcf3 0%, #fff 100%);
border-color: #e8d8a8;
box-shadow: 0 2px 10px rgba(201,169,97,.12);
}
.bildirim-item.is-unread::before{
content: '';
position: absolute;
top: 16px;
right: 14px;
width: 8px; height: 8px;
background: #ef4444;
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(239,68,68,.18);
}
.bildirim-icon{
width: 40px; height: 40px;
flex-shrink: 0;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.bildirim-body{
flex: 1;
min-width: 0;
}
.bildirim-meta{
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 4px;
}
.bildirim-tip{
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .5px;
}
.bildirim-time{
font-size: 11.5px;
color: #94a3b8;
font-weight: 500;
}
.bildirim-title{
font-size: 14.5px;
font-weight: 700;
color: #0a0a0a;
margin-bottom: 3px;
line-height: 1.3;
}
.bildirim-msg{
font-size: 13px;
color: #475569;
line-height: 1.5;
font-weight: 500;
word-break: break-word;
}
.bildirim-action{
display: inline-block;
margin-top: 8px;
color: #2fae93;
font-size: 13px;
font-weight: 700;
text-decoration: none;
}
.bildirim-action:active{ opacity: .6; }
/* =====================================================================
* HEADER - Tek görünür buton varsa sağa it (bell yanlış konum fix)
* Sadece btnNotify varsa space-between onu sola atar; flex:1 spacer ekle
* ===================================================================== */
.header-inner::before{
content: '';
flex: 1;
order: -1;
}
.header-inner #btnBack,
.header-inner #btnLocation{
order: -2;
}
.header-inner .header-title{
/* Title zaten position:absolute - flex'ten etkilenmez */
}
.header-inner #btnNotify{
margin-left: auto;
}
/* === YENİ HEADER YAPISI - .header-left / .header-right wrapper'ları ===
* Eski order kuralları .header-inner direkt çocuk içindi.
* Yeni yapıda butonlar .header-left içinde - order kurallarını sıfırla,
* sol grup içinde sırayla: Back → Menu → Konum */
.header-inner::before{ display: none; }
.header-inner > .header-left,
.header-inner > .header-right{
flex: 0 0 auto;
margin: 0;
order: 0;
}
.header-inner > .header-left{ order: 0; }
.header-inner > .header-right{ order: 99; }
/* Sol grup içindeki butonlar - order kuralları */
.header-left #btnBack{ order: 1 !important; }
.header-left #btnMenu{ order: 2 !important; }
.header-left #btnLocation{ order: 3 !important; }
/* =====================================================================
* HAMBURGER MENÜ ANİMASYONU
* Kullanıcı dikkatini çekecek subtle pulse + tıklamada çizgi oyunu
* ===================================================================== */
#btnMenu{
position: relative;
animation: btnMenuPulse 2.8s ease-in-out infinite;
}
/* Glow halkası - sayfa açıldıktan sonra ilk 8 saniye boyunca dikkat çekici */
#btnMenu::after{
content: '';
position: absolute;
inset: -2px;
border-radius: 12px;
box-shadow: 0 0 0 0 rgba(41, 153, 129, .55);
pointer-events: none;
animation: btnMenuRing 2.8s ease-out infinite;
}
/* Hamburger çizgileri - hover'da hafif kayar */
#btnMenu svg line{
transition: transform .25s cubic-bezier(.4, 0, .2, 1), opacity .2s;
transform-origin: center;
}
#btnMenu:hover svg line:nth-child(1){ transform: translateX(-1px); }
#btnMenu:hover svg line:nth-child(3){ transform: translateX(1px); }
/* Tıklamada X'e dönüşme efekti */
#btnMenu:active svg line:nth-child(1){
transform: translateY(6px) rotate(45deg);
}
#btnMenu:active svg line:nth-child(2){
opacity: 0;
transform: scaleX(0);
}
#btnMenu:active svg line:nth-child(3){
transform: translateY(-6px) rotate(-45deg);
}
@keyframes btnMenuPulse{
0%, 60%, 100% { transform: scale(1); }
70% { transform: scale(1.08); }
80% { transform: scale(.97); }
90% { transform: scale(1.03); }
}
@keyframes btnMenuRing{
0% { box-shadow: 0 0 0 0 rgba(41,153,129,.55); }
70% { box-shadow: 0 0 0 12px rgba(41,153,129,0); }
100% { box-shadow: 0 0 0 0 rgba(41,153,129,0); }
}
/* Kullanıcı bir kere tıkladıktan sonra animasyon kapansın (daha az dikkat dağıtıcı) */
#btnMenu.is-seen{
animation: none;
}
#btnMenu.is-seen::after{
animation: none;
display: none;
}
/* Performans / accessibility: animasyon istemeyen kullanıcılar için kapat */
@media (prefers-reduced-motion: reduce){
#btnMenu,
#btnMenu::after{
animation: none !important;
}
}
/* =====================================================================
* ÇEVRİMDIŞI BANNER - tabbar üstünde sabit, kırmızı zemin
* ===================================================================== */
.gh-offline-banner{
position: fixed;
left: 50%;
bottom: calc(var(--tabbar-h, 64px) + var(--safe-bot, 0px) + 12px);
transform: translateX(-50%) translateY(20px);
z-index: 200;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: linear-gradient(135deg, #b91c1c, #dc2626);
color: #fff;
font-size: 13px;
font-weight: 600;
border-radius: 14px;
box-shadow: 0 8px 24px rgba(220, 38, 38, .35);
opacity: 0;
pointer-events: none;
transition: opacity .3s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
max-width: 92vw;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gh-offline-banner.is-show{
opacity: 1;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
}
.gh-offline-banner svg{
flex-shrink: 0;
}
/* =====================================================================
* KURAN ÖĞRENİM MODÜLÜ
* ===================================================================== */
.view[data-view="kuran-ogren"]{
background: #f7f9f8 !important;
padding-bottom: calc(var(--tabbar-h, 64px) + var(--safe-bot, 0px) + 20px);
}
.ko-app{
padding: 14px 14px 0;
display: flex;
flex-direction: column;
gap: 14px;
}
/* Geri butonu */
.ko-back{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px 8px 10px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
color: #475569;
cursor: pointer;
font-family: inherit;
align-self: flex-start;
transition: all .15s;
}
.ko-back:active{ transform: scale(.96); background: #f1f5f9; }
/* Hero - Streak + Hedef */
.ko-hero{
background: linear-gradient(135deg, #1d6f5e 0%, #299981 50%, #2fae93 100%);
border-radius: 22px;
padding: 18px;
color: #fff;
box-shadow: 0 8px 26px rgba(6,77,40,.22);
position: relative;
overflow: hidden;
}
.ko-hero::before{
content: '';
position: absolute;
top: -40px; right: -40px;
width: 180px; height: 180px;
background: radial-gradient(circle, rgba(251,231,158,.2), transparent 70%);
pointer-events: none;
}
.ko-hero-row{
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 12px;
margin-bottom: 14px;
}
.ko-hero-streak{
display: flex;
align-items: center;
gap: 8px;
padding: 12px;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.10);
border-radius: 14px;
backdrop-filter: blur(8px);
}
.ko-hero-streak.is-active .ko-hero-streak-icon{ color: #fbe79e; }
.ko-hero-streak-icon{ color: rgba(255,255,255,.55); flex-shrink: 0; }
.ko-hero-streak-num{ font-size: 24px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.ko-hero-streak-lbl{ font-size: 10.5px; opacity: .85; margin-top: 2px; font-weight: 600; }
.ko-hero-target{
padding: 12px 14px;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.10);
border-radius: 14px;
backdrop-filter: blur(8px);
}
.ko-hero-target.is-done{
background: rgba(251,231,158,.18);
border-color: rgba(251,231,158,.30);
}
.ko-hero-target-num{ font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.ko-hero-target-lbl{ font-size: 10.5px; opacity: .85; margin-top: 4px; font-weight: 600; }
.ko-hero-target-bar{
margin-top: 8px;
height: 4px;
background: rgba(255,255,255,.18);
border-radius: 999px;
overflow: hidden;
}
.ko-hero-target-fill{
height: 100%;
background: linear-gradient(90deg, #fbe79e, #c9a961);
transition: width .5s ease;
}
.ko-hero-progress{
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,.12);
}
.ko-hero-progress-text{
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
font-weight: 600;
margin-bottom: 8px;
opacity: .92;
}
.ko-hero-progress-text strong{ color: #fbe79e; font-weight: 800; }
.ko-hero-progress-bar{
height: 6px;
background: rgba(255,255,255,.14);
border-radius: 999px;
overflow: hidden;
}
.ko-hero-progress-fill{
height: 100%;
background: linear-gradient(90deg, #fbe79e, #c9a961);
border-radius: 999px;
transition: width .8s ease;
}
/* Sıradaki ders kartı */
.ko-next-card{
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
background: #fff;
border: 0;
border-radius: 18px;
cursor: pointer;
font-family: inherit;
text-align: left;
width: 100%;
box-shadow: 0 4px 16px rgba(13,140,74,.10);
transition: all .2s;
}
.ko-next-card:active{ transform: scale(.98); box-shadow: 0 2px 8px rgba(13,140,74,.06); }
.ko-next-icon{
width: 48px; height: 48px;
background: linear-gradient(135deg, #2fae93, #1d6f5e);
color: #fbe79e;
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(13,140,74,.30);
}
.ko-next-body{ flex: 1; min-width: 0; }
.ko-next-label{ font-size: 11px; font-weight: 700; color: #2fae93; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px; }
.ko-next-title{ font-size: 15.5px; font-weight: 800; color: #0a0a0a; }
.ko-next-sub{ font-size: 12px; color: #64748b; margin-top: 1px; font-weight: 500; }
.ko-next-arrow{ color: #94a3b8; flex-shrink: 0; }
.ko-next-done{
text-align: center;
padding: 22px 18px;
background: linear-gradient(135deg, #fefcf3, #f5edd3);
border: 1px solid #e8d8a8;
border-radius: 18px;
color: #1d6f5e;
font-weight: 700;
font-size: 14px;
}
/* Tekrar kartı */
.ko-tekrar-card{
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: linear-gradient(135deg, #dbeafe, #bfdbfe);
border: 1px solid #93c5fd;
border-radius: 14px;
color: #1e3a8a;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
width: 100%;
text-align: left;
transition: all .15s;
}
.ko-tekrar-card:active{ transform: scale(.98); }
.ko-tekrar-card strong{ font-weight: 800; font-size: 16px; }
.ko-tekrar-card svg:last-child{ margin-left: auto; }
/* Section title */
.ko-section-title{
font-size: 13px;
font-weight: 800;
color: #475569;
text-transform: uppercase;
letter-spacing: .6px;
padding: 4px 4px;
margin-top: 4px;
}
.ko-section-title-sm{
font-size: 12px;
font-weight: 800;
color: #475569;
text-transform: uppercase;
letter-spacing: .5px;
margin-bottom: 10px;
}
/* Kategori liste */
.ko-kategori-list{
display: flex;
flex-direction: column;
gap: 10px;
}
.ko-kat-item{
display: flex;
gap: 12px;
align-items: center;
padding: 14px 16px;
background: #fff;
border: 1px solid #e8efeb;
border-radius: 16px;
cursor: pointer;
font-family: inherit;
text-align: left;
width: 100%;
transition: all .15s;
box-shadow: 0 1px 3px rgba(0,0,0,.03);
}
.ko-kat-item.is-locked{
background: #f1f5f9;
border-color: #e2e8f0;
cursor: not-allowed;
opacity: .65;
}
.ko-kat-item.is-unlocked:active{ transform: scale(.985); background: #f8faf9; }
.ko-kat-info{ flex: 1; min-width: 0; }
.ko-kat-meta{
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
}
.ko-kat-seviye{
font-size: 10.5px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .4px;
padding: 2px 8px;
border-radius: 6px;
}
.ko-kat-locked{
font-size: 10.5px;
color: #64748b;
font-weight: 700;
}
.ko-kat-name{
font-size: 15px;
font-weight: 800;
color: #0a0a0a;
margin-bottom: 2px;
}
.ko-kat-desc{
font-size: 12px;
color: #64748b;
line-height: 1.4;
font-weight: 500;
margin-bottom: 8px;
}
.ko-kat-prog{
display: flex;
align-items: center;
gap: 8px;
}
.ko-kat-prog-bar{
flex: 1;
height: 4px;
background: #f1f5f9;
border-radius: 999px;
overflow: hidden;
}
.ko-kat-prog-fill{
height: 100%;
background: linear-gradient(90deg, #2fae93, #1d6f5e);
transition: width .8s ease;
}
.ko-kat-prog-text{
font-size: 11px;
color: #64748b;
font-variant-numeric: tabular-nums;
font-weight: 700;
flex-shrink: 0;
}
.ko-kat-arrow{ color: #94a3b8; flex-shrink: 0; }
/* Kategori head */
.ko-kat-head{
padding: 4px 4px 8px;
}
.ko-kat-head h2{
font-size: 22px;
font-weight: 800;
color: #0a0a0a;
margin: 0 0 4px;
letter-spacing: -.3px;
}
.ko-kat-head p{
font-size: 13px;
color: #64748b;
margin: 0;
font-weight: 500;
}
/* Ders liste */
.ko-ders-list{
display: flex;
flex-direction: column;
gap: 8px;
}
.ko-ders-item{
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: #fff;
border: 1px solid #e8efeb;
border-radius: 14px;
cursor: pointer;
font-family: inherit;
text-align: left;
width: 100%;
transition: all .15s;
}
.ko-ders-item:active{ transform: scale(.985); }
.ko-ders-item.is-tamamlandi{ background: linear-gradient(180deg, #f0fdf4, #fff); border-color: #bbf7d0; }
.ko-ders-item.is-ustalik{ background: linear-gradient(180deg, #fefcf3, #fff); border-color: #e8d8a8; }
.ko-ders-icon{
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
}
.ko-ders-body{ flex: 1; min-width: 0; }
.ko-ders-name{
font-size: 14.5px;
font-weight: 700;
color: #0a0a0a;
margin-bottom: 2px;
}
.ko-ders-meta{
display: flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
color: #64748b;
font-weight: 500;
flex-wrap: wrap;
}
.ko-ders-arabic{
font-family: 'Amiri','Scheherazade New',serif !important;
font-size: 16px;
color: #2fae93;
font-weight: 700;
}
/* Hedef butonu */
.ko-hedef-btn{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
background: transparent;
border: 1px dashed #cbd5e1;
color: #64748b;
font-size: 12.5px;
font-weight: 600;
border-radius: 12px;
cursor: pointer;
font-family: inherit;
margin-top: 6px;
align-self: center;
}
.ko-hedef-btn:active{ background: #f1f5f9; }
/* === DERS EKRANI === */
.ko-ders-card{
background: #fff;
border: 1px solid #e8efeb;
border-radius: 20px;
padding: 22px 18px;
text-align: center;
box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.ko-ders-arabic-big{
font-family: 'Amiri','Scheherazade New',serif !important;
font-size: 56px;
color: #1d6f5e;
line-height: 1.4;
margin-bottom: 16px;
direction: rtl;
font-weight: 500;
}
.ko-ders-title{
font-size: 22px;
font-weight: 800;
color: #0a0a0a;
letter-spacing: -.3px;
margin-bottom: 4px;
}
.ko-ders-okunus{
font-size: 14px;
color: #475569;
font-weight: 600;
font-style: italic;
margin-bottom: 16px;
}
.ko-audio-player{
display: flex;
gap: 10px;
justify-content: center;
margin-top: 12px;
margin-bottom: 14px;
}
.ko-audio-btn{
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: linear-gradient(135deg, #2fae93, #1d6f5e);
color: #fbe79e;
border: 0;
border-radius: 999px;
font-size: 13.5px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
box-shadow: 0 4px 12px rgba(13,140,74,.30);
transition: all .15s;
}
.ko-audio-btn:active{ transform: scale(.96); }
.ko-audio-btn.is-secondary{
background: #f1f5f9;
color: #475569;
box-shadow: none;
}
.ko-ders-anlam{
text-align: left;
background: #fefcf3;
border-left: 3px solid #c9a961;
border-radius: 8px;
padding: 10px 14px;
margin-top: 12px;
font-size: 13px;
color: #475569;
font-weight: 500;
line-height: 1.5;
}
.ko-ders-anlam strong{ color: #1d6f5e; font-weight: 700; }
.ko-ders-desc{
text-align: left;
font-size: 13.5px;
color: #475569;
line-height: 1.6;
margin-top: 12px;
font-weight: 500;
}
.ko-ders-tip{
text-align: left;
background: #eff6ff;
border: 1px solid #bfdbfe;
border-radius: 10px;
padding: 10px 14px;
margin-top: 12px;
font-size: 12.5px;
color: #1e40af;
font-weight: 500;
line-height: 1.5;
}
/* Öz değerlendirme yıldızlar */
.ko-ozdegerlendirme{
background: #fff;
border: 1px solid #e8efeb;
border-radius: 16px;
padding: 16px 18px;
text-align: center;
}
.ko-ozdeg-title{
font-size: 13px;
color: #475569;
font-weight: 600;
margin-bottom: 12px;
}
.ko-yildizlar{
display: flex;
justify-content: center;
gap: 6px;
}
.ko-yildiz{
background: transparent;
border: 0;
font-size: 32px;
cursor: pointer;
color: #cbd5e1;
font-family: inherit;
padding: 4px 8px;
transition: all .15s;
}
.ko-yildiz:active{ transform: scale(1.2); }
.ko-yildiz.is-active{ color: #fbe79e; text-shadow: 0 2px 8px rgba(251,231,158,.50); }
/* Quiz */
.ko-quiz-section{
background: #fff;
border: 1px solid #e8efeb;
border-radius: 16px;
padding: 16px 18px;
}
.ko-quiz-item{
margin-bottom: 18px;
padding-bottom: 18px;
border-bottom: 1px dashed #e2e8f0;
}
.ko-quiz-item:last-child{ margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.ko-quiz-soru{
font-size: 14.5px;
font-weight: 700;
color: #0a0a0a;
margin-bottom: 12px;
line-height: 1.5;
}
.ko-quiz-no{ color: #2fae93; font-weight: 800; margin-right: 4px; }
.ko-quiz-secenekler{
display: flex;
flex-direction: column;
gap: 8px;
}
.ko-quiz-secenek{
padding: 12px 14px;
background: #f8faf9;
border: 1.5px solid #e8efeb;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
color: #1f2937;
text-align: left;
cursor: pointer;
font-family: inherit;
transition: all .15s;
}
.ko-quiz-secenek:not([disabled]):active{ transform: scale(.98); background: #f1f5f9; border-color: #94a3b8; }
.ko-quiz-secenek.is-dogru{ background: #dcfce7; border-color: #16a34a; color: #14532d; }
.ko-quiz-secenek.is-yanlis{ background: #fee2e2; border-color: #dc2626; color: #7f1d1d; }
.ko-quiz-secenek[disabled]{ cursor: default; }
.ko-quiz-aciklama{
margin-top: 10px;
padding: 10px 12px;
background: #f8faf9;
border-radius: 10px;
font-size: 12.5px;
color: #475569;
font-weight: 500;
line-height: 1.5;
}
.ko-quiz-aciklama.is-dogru{ background: #f0fdf4; color: #14532d; }
.ko-quiz-aciklama.is-yanlis{ background: #fef2f2; color: #7f1d1d; }
/* Finish butonu */
.ko-finish-btn{
padding: 16px 24px;
background: linear-gradient(135deg, #2fae93, #1d6f5e);
color: #fff;
border: 0;
border-radius: 16px;
font-size: 15px;
font-weight: 800;
cursor: pointer;
font-family: inherit;
box-shadow: 0 6px 20px rgba(13,140,74,.30);
letter-spacing: .3px;
transition: all .15s;
margin-top: 4px;
}
.ko-finish-btn:active{ transform: scale(.98); box-shadow: 0 3px 10px rgba(13,140,74,.20); }
/* Hedef sheet */
.ko-hedef-sheet{ padding: 4px 0 8px; }
.ko-hedef-sheet p{
font-size: 13.5px;
color: #475569;
margin: 0 0 14px;
font-weight: 500;
}
.ko-hedef-opts{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.ko-hedef-opt{
padding: 12px 8px;
background: #f1f5f9;
border: 2px solid transparent;
border-radius: 12px;
font-size: 13px;
font-weight: 700;
color: #475569;
cursor: pointer;
font-family: inherit;
transition: all .15s;
}
.ko-hedef-opt.is-active{
background: linear-gradient(135deg, #2fae93, #1d6f5e);
color: #fbe79e;
border-color: #fbe79e;
box-shadow: 0 4px 12px rgba(13,140,74,.30);
}
.ko-hedef-opt:active{ transform: scale(.96); }
/* =====================================================================
* HERO VIDEO BACKGROUND
* ===================================================================== */
/* =====================================================================
* ESMA'ÜL HÜSNA - PREMIUM v2.0
* ===================================================================== */
.view[data-view="esma"]{
background: #f7f9f8 !important;
padding-bottom: calc(var(--tabbar-h, 64px) + var(--safe-bot, 0px) + 24px);
}
.esma-app{
padding: 12px 14px 0;
display: flex;
flex-direction: column;
gap: 14px;
}
/* === HERO - Günün İsmi === */
.esma-hero{
position: relative;
border-radius: 24px;
overflow: hidden;
padding: 26px 22px 22px;
color: #fff;
min-height: 240px;
box-shadow: 0 12px 36px rgba(6,77,40,.30);
isolation: isolate;
}
.esma-hero-bg{
position: absolute;
inset: 0;
background:
linear-gradient(135deg, rgba(6,77,40,.92) 0%, rgba(13,140,74,.86) 50%, rgba(6,77,40,.94) 100%),
radial-gradient(circle at 80% 20%, rgba(251,231,158,.28) 0%, transparent 50%),
radial-gradient(circle at 20% 80%, rgba(251,231,158,.12) 0%, transparent 50%);
z-index: -2;
}
.esma-hero-glow{
position: absolute;
top: -60px; right: -60px;
width: 240px; height: 240px;
background: radial-gradient(circle, rgba(251,231,158,.32), transparent 65%);
border-radius: 50%;
pointer-events: none;
z-index: -1;
animation: esmaGlow 8s ease-in-out infinite;
}
@keyframes esmaGlow {
0%, 100% { transform: scale(1); opacity: .85; }
50% { transform: scale(1.15); opacity: 1; }
}
.esma-hero-content{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 6px;
position: relative;
}
.esma-hero-badge{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: rgba(251,231,158,.18);
border: 1px solid rgba(251,231,158,.30);
color: #fbe79e;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
letter-spacing: .3px;
backdrop-filter: blur(8px);
margin-bottom: 8px;
}
.esma-hero-arabic{
font-family: 'Amiri','Scheherazade New',serif !important;
font-size: 64px;
line-height: 1.4;
font-weight: 500;
text-shadow: 0 2px 16px rgba(0,0,0,.30), 0 0 32px rgba(251,231,158,.20);
margin: 4px 0;
direction: rtl;
}
.esma-hero-okunus{
font-size: 22px;
font-weight: 800;
letter-spacing: -.3px;
text-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.esma-hero-anlam{
font-size: 13.5px;
opacity: .92;
font-weight: 500;
line-height: 1.4;
max-width: 280px;
margin-top: 2px;
}
.esma-hero-detail-btn{
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 16px;
padding: 10px 20px 10px 22px;
background: rgba(255,255,255,.18);
border: 1px solid rgba(255,255,255,.25);
border-radius: 999px;
color: #fff;
font-size: 13px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
backdrop-filter: blur(10px);
transition: all .2s;
}
.esma-hero-detail-btn:active{
transform: scale(.96);
background: rgba(255,255,255,.28);
}
/* === SEARCH === */
.esma-search-wrap{
position: relative;
display: flex;
align-items: center;
}
.esma-search-icon{
position: absolute;
left: 14px;
color: #94a3b8;
pointer-events: none;
}
.esma-search{
width: 100%;
padding: 12px 40px 12px 42px;
background: #fff;
border: 1px solid #e8efeb;
border-radius: 14px;
font-size: 14px;
font-weight: 500;
color: #0a0a0a;
font-family: inherit;
outline: none;
transition: border-color .15s, box-shadow .15s;
-webkit-appearance: none;
appearance: none;
}
.esma-search:focus{
border-color: #2fae93;
box-shadow: 0 0 0 3px rgba(13,140,74,.10);
}
.esma-search::placeholder{ color: #94a3b8; font-weight: 500; }
.esma-search-clear{
position: absolute;
right: 8px;
width: 28px; height: 28px;
display: flex; align-items: center; justify-content: center;
background: #f1f5f9;
border: 0;
border-radius: 50%;
color: #64748b;
cursor: pointer;
font-family: inherit;
transition: all .15s;
}
.esma-search-clear:active{ transform: scale(.92); }
/* === FİLTRELER === */
.esma-filters{
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 2px;
scrollbar-width: none;
}
.esma-filters::-webkit-scrollbar{ display: none; }
.esma-filter{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: #fff;
border: 1px solid #e8efeb;
border-radius: 999px;
font-size: 12.5px;
font-weight: 700;
color: #475569;
cursor: pointer;
font-family: inherit;
white-space: nowrap;
transition: all .15s;
}
.esma-filter:active{ transform: scale(.96); }
.esma-filter.is-active{
background: linear-gradient(135deg, #2fae93, #1d6f5e);
color: #fff;
border-color: transparent;
box-shadow: 0 4px 12px rgba(13,140,74,.30);
}
.esma-filter-count{
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 18px;
padding: 0 6px;
background: #f1f5f9;
color: #475569;
border-radius: 999px;
font-size: 10.5px;
font-weight: 800;
font-variant-numeric: tabular-nums;
margin-left: 4px;
}
.esma-filter.is-active .esma-filter-count{
background: rgba(255,255,255,.22);
color: #fff;
}
/* === LİSTE === */
.esma-list{
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 4px;
}
.esma-card{
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: #fff;
border: 1px solid #e8efeb;
border-radius: 16px;
cursor: pointer;
font-family: inherit;
text-align: left;
width: 100%;
transition: all .15s;
box-shadow: 0 1px 2px rgba(0,0,0,.02);
}
.esma-card:active{
transform: scale(.985);
background: #f8faf9;
box-shadow: 0 4px 12px rgba(13,140,74,.08);
}
.esma-card-no{
flex-shrink: 0;
width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #f0fdf4, #dcfce7);
color: #1d6f5e;
border-radius: 10px;
font-size: 13px;
font-weight: 800;
font-variant-numeric: tabular-nums;
letter-spacing: -.3px;
}
.esma-card-body{
flex: 1;
min-width: 0;
}
.esma-card-okunus{
font-size: 15px;
font-weight: 800;
color: #0a0a0a;
letter-spacing: -.2px;
margin-bottom: 2px;
}
.esma-card-anlam{
font-size: 12.5px;
color: #64748b;
font-weight: 500;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.esma-card-arabic{
font-family: 'Amiri','Scheherazade New',serif !important;
font-size: 24px;
color: #2fae93;
font-weight: 600;
flex-shrink: 0;
text-align: right;
direction: rtl;
line-height: 1.4;
padding-right: 4px;
}
.esma-card-fav-mark{
position: absolute;
top: 8px;
right: 8px;
width: 18px; height: 18px;
display: flex; align-items: center; justify-content: center;
color: #ec4899;
}
.esma-empty{
text-align: center;
padding: 48px 20px;
color: #94a3b8;
}
.esma-empty svg{ margin: 0 auto 12px; display: block; }
.esma-empty-title{ font-size: 14px; font-weight: 700; color: #475569; }
/* =====================================================================
* ESMA DETAY SHEET
* ===================================================================== */
.esma-detail{
padding: 4px 0 8px;
display: flex;
flex-direction: column;
gap: 14px;
}
.esma-detail-hero{
position: relative;
border-radius: 22px;
overflow: hidden;
padding: 32px 22px 26px;
color: #fff;
text-align: center;
isolation: isolate;
min-height: 240px;
}
.esma-detail-bg{
position: absolute;
inset: 0;
background:
linear-gradient(160deg, #1d6f5e 0%, #2fae93 55%, #299981 100%);
z-index: -2;
}
.esma-detail-glow{
position: absolute;
top: 50%; left: 50%;
width: 280px; height: 280px;
background: radial-gradient(circle, rgba(251,231,158,.30), transparent 65%);
border-radius: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: -1;
animation: esmaGlow 6s ease-in-out infinite;
}
.esma-detail-no-badge{
display: inline-block;
padding: 5px 14px;
background: rgba(251,231,158,.20);
border: 1px solid rgba(251,231,158,.30);
color: #fbe79e;
border-radius: 999px;
font-size: 11.5px;
font-weight: 800;
letter-spacing: .4px;
font-variant-numeric: tabular-nums;
margin-bottom: 14px;
}
.esma-detail-arabic{
font-family: 'Amiri','Scheherazade New',serif !important;
font-size: 84px;
line-height: 1.3;
font-weight: 500;
text-shadow: 0 2px 20px rgba(0,0,0,.30), 0 0 40px rgba(251,231,158,.18);
margin: 8px 0 12px;
direction: rtl;
}
.esma-detail-okunus{
font-size: 28px;
font-weight: 800;
letter-spacing: -.5px;
text-shadow: 0 2px 6px rgba(0,0,0,.20);
margin-bottom: 6px;
}
.esma-detail-anlam{
font-size: 14px;
opacity: .94;
font-weight: 500;
line-height: 1.55;
max-width: 320px;
margin: 0 auto;
}
/* Aksiyonlar - favori + paylaş */
.esma-detail-actions{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.esma-action-btn{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 16px;
background: #fff;
border: 1px solid #e8efeb;
border-radius: 14px;
color: #475569;
font-size: 13.5px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
transition: all .15s;
}
.esma-action-btn:active{ transform: scale(.97); background: #f8faf9; }
.esma-action-btn.is-active{
background: linear-gradient(135deg, #fce7f3, #fbcfe8);
color: #be185d;
border-color: #f9a8d4;
}
/* Zikir önerisi kartı */
.esma-detail-zikir{
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: linear-gradient(135deg, #fefcf3, #fdf6e3);
border: 1px solid #f3e8b9;
border-radius: 16px;
cursor: pointer;
transition: all .15s;
}
.esma-detail-zikir:active{ transform: scale(.99); }
.esma-detail-zikir-icon{
flex-shrink: 0;
width: 38px; height: 38px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #fbe79e, #c9a961);
color: #1d6f5e;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(201,169,97,.30);
}
.esma-detail-zikir-body{ flex: 1; min-width: 0; }
.esma-detail-zikir-title{
font-size: 13.5px;
font-weight: 800;
color: #1d6f5e;
margin-bottom: 2px;
}
.esma-detail-zikir-sub{
font-size: 12px;
color: #6b5e2a;
line-height: 1.4;
font-weight: 500;
}
.esma-detail-zikir-sub strong{ color: #1d6f5e; font-weight: 800; }
.esma-detail-zikir-btn{
flex-shrink: 0;
width: 30px; height: 30px;
display: flex; align-items: center; justify-content: center;
background: rgba(6,77,40,.10);
border: 0;
border-radius: 50%;
color: #1d6f5e;
cursor: pointer;
font-family: inherit;
}
/* Önceki/Sonraki nav */
.esma-detail-nav{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 4px;
}
.esma-nav-btn{
display: flex;
align-items: center;
gap: 8px;
padding: 12px 14px;
background: #fff;
border: 1px solid #e8efeb;
border-radius: 14px;
cursor: pointer;
font-family: inherit;
text-align: left;
transition: all .15s;
min-width: 0;
}
.esma-nav-btn:active{ transform: scale(.98); background: #f8faf9; }
.esma-nav-next{ flex-direction: row; }
.esma-nav-info{ flex: 1; min-width: 0; }
.esma-nav-next .esma-nav-info{ text-align: right; }
.esma-nav-label{
font-size: 10.5px;
color: #94a3b8;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .4px;
}
.esma-nav-name{
font-size: 13px;
color: #0a0a0a;
font-weight: 800;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 1px;
}
.esma-nav-btn svg{ color: #2fae93; flex-shrink: 0; }
/* =====================================================================
* SMART HOME - Akıllı Ana Sayfa Kartları
* Mevcut hero/vakit yapısının üstüne enjekte edilir
* ===================================================================== */
.sh-wrap{
display: flex;
flex-direction: column;
gap: 10px;
margin: 12px 0 0;
width: 100%;
position: relative;
z-index: 5;
}
/* === SPECIAL DAY BANNER === */
.sh-banner{
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-radius: 16px;
color: #fff;
cursor: pointer;
overflow: hidden;
isolation: isolate;
box-shadow: 0 6px 20px rgba(0,0,0,.18);
border: 1px solid rgba(255,255,255,.12);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.sh-banner-glow{
position: absolute;
top: -40px; right: -40px;
width: 160px; height: 160px;
border-radius: 50%;
pointer-events: none;
z-index: -1;
animation: shGlow 4s ease-in-out infinite;
}
@keyframes shGlow {
0%, 100% { transform: scale(1); opacity: .9; }
50% { transform: scale(1.2); opacity: 1; }
}
.sh-banner-icon{
flex-shrink: 0;
width: 42px; height: 42px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.12);
border-radius: 12px;
backdrop-filter: blur(6px);
}
.sh-banner-body{ flex: 1; min-width: 0; }
.sh-banner-title{
font-size: 15px;
font-weight: 800;
letter-spacing: -.2px;
text-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.sh-banner-sub{
font-size: 12px;
opacity: .92;
margin-top: 2px;
font-weight: 500;
}
/* === SMART CARD - tek satır bağlamsal öneri === */
.sh-smart{
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: rgba(255,255,255,.95);
border: 1px solid rgba(255,255,255,.40);
border-radius: 14px;
cursor: pointer;
font-family: inherit;
text-align: left;
width: 100%;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 4px 14px rgba(0,0,0,.10);
transition: all .15s;
}
.sh-smart:active{
transform: scale(.98);
box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.sh-smart-icon{
flex-shrink: 0;
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
border-radius: 12px;
}
.sh-smart-body{ flex: 1; min-width: 0; }
.sh-smart-title{
font-size: 14px;
font-weight: 800;
color: #0a0a0a;
letter-spacing: -.2px;
}
.sh-smart-sub{
font-size: 11.5px;
color: #475569;
font-weight: 500;
line-height: 1.35;
margin-top: 2px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sh-smart-cta{
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 10px 6px 12px;
background: #f0fdf4;
color: #1d6f5e;
border-radius: 999px;
font-size: 11.5px;
font-weight: 800;
white-space: nowrap;
}
/* === TODAY PICK - somut günlük görev === */
.sh-pick{
position: relative;
padding: 14px 16px;
background: linear-gradient(135deg, rgba(255,252,243,.95), rgba(253,246,227,.92));
border: 1px solid rgba(243,232,185,.60);
border-radius: 14px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 4px 14px rgba(201,169,97,.15);
}
.sh-pick-head{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.sh-pick-label{
font-size: 10.5px;
font-weight: 800;
color: #6b5e2a;
letter-spacing: .8px;
text-transform: uppercase;
}
.sh-pick-streak{
display: inline-flex;
align-items: center;
gap: 3px;
padding: 3px 8px;
background: linear-gradient(135deg, #fef3c7, #fde68a);
color: #d97706;
border-radius: 999px;
font-size: 11.5px;
font-weight: 800;
}
.sh-pick-title{
font-size: 16px;
font-weight: 800;
color: #1d6f5e;
letter-spacing: -.2px;
margin-bottom: 2px;
}
.sh-pick-sub{
font-size: 12px;
color: #6b5e2a;
line-height: 1.4;
font-weight: 500;
}
.sh-pick-count{
display: inline-block;
margin-top: 8px;
padding: 4px 10px;
background: rgba(6,77,40,.08);
color: #1d6f5e;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
}
.sh-pick-count strong{ font-size: 14px; font-weight: 900; }
/* === QUICK ACTIONS - 3 hızlı buton === */
.sh-quick{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.sh-quick-btn{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 12px 6px;
border: 0;
border-radius: 14px;
cursor: pointer;
font-family: inherit;
font-size: 11.5px;
font-weight: 800;
letter-spacing: -.1px;
box-shadow: 0 4px 14px rgba(0,0,0,.12);
transition: all .15s;
text-align: center;
line-height: 1.2;
}
.sh-quick-btn:active{ transform: scale(.96); box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.sh-quick-btn svg{ flex-shrink: 0; }
/* === BODY MODE STILES - özel günlerde global hook === */
body.sh-mode-cuma .vh2-hero-overlay{
background: linear-gradient(180deg, rgba(139, 111, 31, 0.20) 0%, rgba(0, 0, 0, 0.55) 100%) !important;
}
body.sh-mode-kandil .vh2-hero-overlay,
body.sh-mode-kandil-eve .vh2-hero-overlay{
background: linear-gradient(180deg, rgba(91, 33, 182, 0.30) 0%, rgba(15, 23, 42, 0.65) 100%) !important;
}
body.sh-mode-ramazan .vh2-hero-overlay{
background: linear-gradient(180deg, rgba(30, 58, 138, 0.30) 0%, rgba(12, 30, 84, 0.70) 100%) !important;
}
body.sh-mode-bayram .vh2-hero-overlay{
background: linear-gradient(180deg, rgba(13, 140, 74, 0.20) 0%, rgba(6, 77, 40, 0.65) 100%) !important;
}
/* Hicri tarih chip'i de cuma modunda altın olsun */
body.sh-mode-cuma .vh2-hicri{
background: rgba(251,231,158,.20) !important;
color: #fbe79e !important;
border-color: rgba(251,231,158,.30) !important;
}
/* =====================================================================
* KIBLE PUSULASI v3.0 - 2026 PROFESYONEL
* ===================================================================== */
.view[data-view="kible"]{
background: #f7f9f8;
padding-bottom: calc(var(--tabbar-h, 64px) + var(--safe-bot, 0px) + 24px);
}
.qibla-pro-wrap{
padding: 14px 14px 0;
display: flex;
flex-direction: column;
gap: 14px;
}
/* === ÜST BİLGİ KARTI === */
.qibla-info-bar{
display: flex;
align-items: stretch;
background: #fff;
border: 1px solid #e8efeb;
border-radius: 16px;
padding: 14px 8px;
box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.qibla-info-cell{
flex: 1;
text-align: center;
padding: 0 8px;
min-width: 0;
}
.qibla-info-divider{
width: 1px;
background: #e8efeb;
margin: 4px 0;
}
.qibla-info-num{
font-size: 19px;
font-weight: 800;
color: #1d6f5e;
font-variant-numeric: tabular-nums;
letter-spacing: -.5px;
line-height: 1;
}
.qibla-info-num.qibla-decl{ color: #c9a961; font-size: 17px; }
.qibla-info-unit{
font-size: 11px;
font-weight: 700;
margin-left: 2px;
color: #94a3b8;
}
.qibla-info-label{
font-size: 10.5px;
color: #64748b;
font-weight: 600;
margin-top: 4px;
letter-spacing: .2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* === ANLIK YÖN TALİMATI (büyük renkli) === */
.qibla-instruction{
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: linear-gradient(135deg, #f0fdf4, #dcfce7);
border: 1px solid #bbf7d0;
border-radius: 16px;
transition: all .25s;
}
.qibla-instruction[data-type="right"],
.qibla-instruction[data-type="left"]{
background: linear-gradient(135deg, #fef3c7, #fde68a);
border-color: #fcd34d;
}
.qibla-instruction[data-type="aligned"]{
background: linear-gradient(135deg, #dcfce7, #86efac);
border-color: #4ade80;
}
.qibla-instruction[data-type="tilt"],
.qibla-instruction[data-type="jitter"]{
background: linear-gradient(135deg, #fee2e2, #fecaca);
border-color: #f87171;
}
.qibla-instr-icon{
flex-shrink: 0;
width: 38px; height: 38px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.85);
border-radius: 10px;
color: #1d6f5e;
}
.qibla-instruction[data-type="right"] .qibla-instr-icon,
.qibla-instruction[data-type="left"] .qibla-instr-icon{ color: #d97706; }
.qibla-instruction[data-type="aligned"] .qibla-instr-icon{ color: #15803d; }
.qibla-instruction[data-type="tilt"] .qibla-instr-icon,
.qibla-instruction[data-type="jitter"] .qibla-instr-icon{ color: #b91c1c; }
.qibla-instr-text{
font-size: 15px;
font-weight: 800;
color: #0a0a0a;
letter-spacing: -.2px;
}
/* === PUSULA === */
.qibla-compass-pro{
position: relative;
width: 100%;
max-width: 360px;
aspect-ratio: 1;
margin: 8px auto 0;
border-radius: 50%;
background:
radial-gradient(circle at 30% 30%, #fff 0%, #f8faf9 60%, #e8efeb 100%);
box-shadow:
0 0 0 6px rgba(13,140,74,.05),
0 14px 40px rgba(13,140,74,.18),
inset 0 4px 12px rgba(255,255,255,.8),
inset 0 -4px 12px rgba(0,0,0,.04);
}
/* Alignment ring - dış halka */
.qcp-ring{
position: absolute;
inset: -8px;
border-radius: 50%;
border: 4px solid #e8efeb;
pointer-events: none;
transition: border-color .25s, box-shadow .25s;
}
.qcp-ring.is-far{ border-color: #e8efeb; }
.qcp-ring.is-near{
border-color: #fcd34d;
box-shadow: 0 0 24px rgba(252,211,77,.45);
}
.qcp-ring.is-aligned{
border-color: #22c55e;
box-shadow: 0 0 32px rgba(34,197,94,.55);
animation: qcpPulse 1.4s ease-in-out infinite;
}
@keyframes qcpPulse {
0%, 100% { box-shadow: 0 0 32px rgba(34,197,94,.55); }
50% { box-shadow: 0 0 48px rgba(34,197,94,.75); }
}
/* Pusula gülü - döner */
.qcp-rose{
position: absolute;
inset: 14px;
border-radius: 50%;
transition: transform .08s linear;
will-change: transform;
}
.qcp-tick-ring{
position: absolute;
inset: 0;
border-radius: 50%;
}
.qcp-tick{
position: absolute;
top: 0;
left: 50%;
width: 1px;
height: 100%;
margin-left: -.5px;
transform-origin: 50% 50%;
pointer-events: none;
}
.qcp-tick::before{
content: '';
position: absolute;
top: 4px;
left: 0;
width: 1px;
height: 8px;
background: #94a3b8;
}
.qcp-tick.is-mid::before{ height: 10px; background: #64748b; }
.qcp-tick.is-major::before{
height: 14px;
width: 2px;
left: -.5px;
background: #1d6f5e;
}
/* K/D/G/B markerlar */
.qcp-marker{
position: absolute;
font-size: 13px;
font-weight: 900;
color: #1d6f5e;
letter-spacing: -.5px;
}
.qcp-marker.qcp-n{
top: 20px; left: 50%; transform: translateX(-50%);
color: #dc2626;
font-size: 16px;
}
.qcp-marker.qcp-e{ right: 18px; top: 50%; transform: translateY(-50%); }
.qcp-marker.qcp-s{ bottom: 18px; left: 50%; transform: translateX(-50%); }
.qcp-marker.qcp-w{ left: 18px; top: 50%; transform: translateY(-50%); }
/* Cihazın baktığı yön (sabit yukarı kırmızı çizgi) */
.qcp-device-arrow{
position: absolute;
top: 6px;
left: 50%;
width: 4px;
height: 24px;
margin-left: -2px;
z-index: 5;
pointer-events: none;
}
.qcp-device-tip{
position: absolute;
top: 0; left: 50%;
width: 0; height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 12px solid #dc2626;
margin-left: -7px;
filter: drop-shadow(0 2px 4px rgba(220,38,38,.4));
}
/* Kabe oku - merkezden çıkar, dönüyor */
.qcp-qibla-arrow{
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 50%;
transform-origin: 0 0;
transition: transform .08s linear;
will-change: transform;
pointer-events: none;
}
.qcp-qibla-line{
position: absolute;
top: 0;
left: 50%;
width: 3px;
height: calc(100% - 50px);
background: linear-gradient(to top, transparent 0%, #c9a961 60%, #fbe79e 100%);
margin-left: -1.5px;
border-radius: 2px;
box-shadow: 0 0 8px rgba(251,231,158,.5);
}
.qcp-qibla-icon{
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -100%);
filter: drop-shadow(0 4px 8px rgba(0,0,0,.30));
}
/* Merkez nokta */
.qcp-center{
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 14px;
background: #1d6f5e;
border: 3px solid #fbe79e;
border-radius: 50%;
margin: -7px 0 0 -7px;
box-shadow: 0 0 0 2px #1d6f5e, 0 2px 6px rgba(0,0,0,.3);
z-index: 6;
}
/* Hizalandı badge */
.qcp-aligned-badge{
position: absolute;
bottom: 18%;
left: 50%;
transform: translate(-50%, 12px);
display: inline-flex;
align-items: center;
gap: 5px;
padding: 7px 14px;
background: linear-gradient(135deg, #22c55e, #15803d);
color: #fff;
border-radius: 999px;
font-size: 12px;
font-weight: 800;
white-space: nowrap;
opacity: 0;
pointer-events: none;
box-shadow: 0 4px 16px rgba(34,197,94,.45);
transition: all .35s cubic-bezier(.16,1,.3,1);
}
.qcp-aligned-badge.is-show{
opacity: 1;
transform: translate(-50%, 0);
}
/* === DURUM KARTI === */
.qibla-status-pro{
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: #fff;
border: 1px solid #e8efeb;
border-radius: 14px;
transition: all .2s;
}
.qibla-status-pro[data-level="warn"]{
background: #fffbeb;
border-color: #fcd34d;
}
.qibla-status-pro[data-level="error"]{
background: #fef2f2;
border-color: #fca5a5;
}
.qibla-status-pro[data-level="aligned"]{
background: linear-gradient(135deg, #dcfce7, #bbf7d0);
border-color: #4ade80;
}
.qibla-status-pro[data-level="near"]{
background: linear-gradient(135deg, #fef3c7, #fde68a);
border-color: #fcd34d;
}
.qibla-status-pro-icon{
flex-shrink: 0;
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
background: #f1f5f9;
border-radius: 8px;
color: #475569;
}
.qibla-status-pro[data-level="warn"] .qibla-status-pro-icon{
background: #fef3c7; color: #d97706;
}
.qibla-status-pro[data-level="error"] .qibla-status-pro-icon{
background: #fee2e2; color: #b91c1c;
}
.qibla-status-pro[data-level="aligned"] .qibla-status-pro-icon{
background: #fff; color: #15803d;
}
.qibla-status-pro[data-level="near"] .qibla-status-pro-icon{
background: #fff; color: #d97706;
}
.qibla-status-pro-text{ flex: 1; min-width: 0; }
.qibla-status-pro-title{
font-size: 13.5px;
font-weight: 800;
color: #0a0a0a;
letter-spacing: -.2px;
}
.qibla-status-pro-sub{
font-size: 11.5px;
color: #64748b;
font-weight: 500;
margin-top: 2px;
}
/* Yardım butonu */
.qibla-help-btn{
display: inline-flex;
align-items: center;
gap: 5px;
padding: 8px 14px;
background: transparent;
border: 1px dashed #cbd5e1;
border-radius: 999px;
color: #64748b;
font-size: 12px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
align-self: center;
margin-top: 4px;
transition: all .15s;
}
.qibla-help-btn:active{ transform: scale(.96); }
/* === ONBOARDING === */
.qibla-onb{
display: flex;
flex-direction: column;
gap: 14px;
padding: 4px 0 8px;
}
.qibla-onb-step{
display: flex;
gap: 12px;
padding: 14px 16px;
background: #f8faf9;
border: 1px solid #e8efeb;
border-radius: 14px;
}
.qibla-onb-step-num{
flex-shrink: 0;
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #2fae93, #1d6f5e);
color: #fff;
border-radius: 50%;
font-size: 14px;
font-weight: 900;
}
.qibla-onb-step-body{ flex: 1; min-width: 0; }
.qibla-onb-step-title{
font-size: 14px;
font-weight: 800;
color: #0a0a0a;
margin-bottom: 4px;
}
.qibla-onb-step-sub{
font-size: 12.5px;
color: #475569;
line-height: 1.45;
font-weight: 500;
}
.qibla-onb-info{
padding: 12px 14px;
background: #fefcf3;
border: 1px solid #fde68a;
border-radius: 12px;
font-size: 12px;
color: #6b5e2a;
line-height: 1.5;
}
.qibla-onb-info strong{ color: #1d6f5e; font-weight: 800; }
.qibla-onb-btn{
width: 100%;
padding: 14px;
background: linear-gradient(135deg, #2fae93, #1d6f5e);
color: #fff;
border: 0;
border-radius: 14px;
font-size: 14.5px;
font-weight: 800;
cursor: pointer;
font-family: inherit;
margin-top: 4px;
box-shadow: 0 4px 16px rgba(13,140,74,.30);
transition: all .15s;
}
.qibla-onb-btn:active{ transform: scale(.97); }
/* =====================================================================
* QIBLA 2026 - Professional Compass UI
* ===================================================================== */
.view[data-view="kible"]{
background: #f7f9f8 !important;
padding-bottom: calc(var(--tabbar-h, 64px) + var(--safe-bot, 0px) + 24px);
}
/* === ONBOARDING === */
.qb-onboard{
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 24px 24px calc(var(--tabbar-h, 64px) + var(--safe-bot, 0px) + 32px);
background: #f7f9f8;
}
.qb-onboard-step{
display: none;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 320px;
margin: 0 auto;
}
.qb-onboard-step.is-active{ display: flex; animation: qbStepIn .35s ease-out; }
@keyframes qbStepIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.qb-onboard-icon{
width: 120px; height: 120px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #f0fdf4, #dcfce7);
border-radius: 32px;
margin-bottom: 28px;
}
.qb-onboard-title{
font-size: 24px;
font-weight: 800;
color: #0a0a0a;
letter-spacing: -.5px;
margin-bottom: 12px;
}
.qb-onboard-desc{
font-size: 14.5px;
color: #475569;
font-weight: 500;
line-height: 1.55;
margin-bottom: 32px;
}
.qb-onboard-dots{
display: flex; gap: 8px;
margin-top: 8px;
margin-bottom: 28px;
}
.qb-dot{
width: 8px; height: 8px;
border-radius: 50%;
background: #e2e8f0;
transition: all .25s;
}
.qb-dot.is-active{ width: 28px; background: #2fae93; }
.qb-onboard-actions{
width: 100%;
max-width: 320px;
display: grid;
grid-template-columns: 1fr 2fr;
gap: 10px;
}
.qb-onboard-skip{
padding: 14px;
background: #fff;
border: 1px solid #e8efeb;
border-radius: 14px;
color: #64748b;
font-size: 14px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
}
.qb-onboard-next{
padding: 14px;
background: linear-gradient(135deg, #2fae93, #1d6f5e);
border: 0;
border-radius: 14px;
color: #fff;
font-size: 14px;
font-weight: 800;
cursor: pointer;
font-family: inherit;
box-shadow: 0 6px 18px rgba(13,140,74,.30);
}
.qb-onboard-skip:active, .qb-onboard-next:active{ transform: scale(.98); }
/* === ANA UYGULAMA === */
.qb-app{
padding: 14px;
display: flex;
flex-direction: column;
gap: 16px;
}
/* === HERO - mesafe + bilgi === */
.qb-hero{
background: linear-gradient(135deg, #1d6f5e 0%, #2fae93 100%);
border-radius: 20px;
padding: 20px 22px;
color: #fff;
position: relative;
overflow: hidden;
box-shadow: 0 10px 30px rgba(6,77,40,.25);
}
.qb-hero::after{
content: '';
position: absolute;
top: -40px; right: -40px;
width: 180px; height: 180px;
background: radial-gradient(circle, rgba(251,231,158,.20), transparent 65%);
border-radius: 50%;
pointer-events: none;
}
.qb-hero-info{
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 1;
}
.qb-hero-distance{
display: flex; align-items: baseline; gap: 6px;
}
.qb-hero-distance-num{
font-size: 44px;
font-weight: 900;
letter-spacing: -1.5px;
font-variant-numeric: tabular-nums;
text-shadow: 0 2px 12px rgba(0,0,0,.20);
line-height: 1;
}
.qb-hero-distance-unit{
font-size: 18px;
font-weight: 700;
opacity: .85;
}
.qb-hero-meta{
display: flex;
flex-direction: column;
gap: 4px;
text-align: right;
}
.qb-hero-meta-row{ display: flex; gap: 6px; align-items: baseline; justify-content: flex-end; }
.qb-hero-meta-label{ font-size: 11px; opacity: .8; font-weight: 600; }
.qb-hero-meta-val{ font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
/* === PUSULA === */
.qb-compass-wrap{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 28px 0 16px;
background: #fff;
border-radius: 24px;
border: 1px solid #e8efeb;
box-shadow: 0 4px 18px rgba(0,0,0,.06);
}
/* Accuracy badge */
.qb-acc-badge{
position: absolute;
top: 12px; left: 12px;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
background: #f1f5f9;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
color: #475569;
}
.qb-acc-badge[data-level="high"]{ background: #f0fdf4; color: #2fae93; }
.qb-acc-badge[data-level="medium"]{ background: #fef3c7; color: #b45309; }
.qb-acc-badge[data-level="low"]{ background: #fee2e2; color: #991b1b; }
/* Drift alert */
.qb-drift-alert{
position: absolute;
top: 12px; right: 12px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px 6px 12px;
background: #fef3c7;
border: 1px solid #fde68a;
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
color: #92400e;
max-width: 180px;
}
.qb-drift-alert > span{
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qb-drift-cal{
flex-shrink: 0;
background: #b45309;
color: #fff;
border: 0;
padding: 3px 8px;
border-radius: 999px;
font-size: 10px;
font-weight: 800;
cursor: pointer;
font-family: inherit;
}
/* Pusula gövdesi */
.qb-compass{
position: relative;
width: 300px; height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.qb-rose{
position: absolute;
inset: 0;
border-radius: 50%;
transition: transform 0.08s linear;
will-change: transform;
}
/* Tick ring */
.qb-tick-ring{
position: absolute;
inset: 0;
border-radius: 50%;
}
.qb-tick{
position: absolute;
top: 4px;
left: 50%;
width: 1.5px;
height: 8px;
margin-left: -.75px;
background: #cbd5e1;
transform-origin: 50% 146px;
}
.qb-tick.is-major{
height: 14px;
width: 2.5px;
margin-left: -1.25px;
background: #475569;
}
/* Yön harfleri (K, D, G, B) */
.qb-marker{
position: absolute;
top: 50%; left: 50%;
font-size: 16px;
font-weight: 900;
color: #475569;
letter-spacing: -.3px;
}
.qb-marker-n{ color: #ef4444; font-size: 18px; }
/* Kabe ikonu */
.qb-kaaba{
position: absolute;
top: 50%; left: 50%;
transition: transform 0.08s linear;
will-change: transform;
filter: drop-shadow(0 2px 6px rgba(0,0,0,.20));
}
/* Cihaz oku - sabit (yukarı bakar) */
.qb-arrow-device{
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 5;
filter: drop-shadow(0 1px 3px rgba(239,68,68,.30));
}
/* Merkez nokta */
.qb-center{
position: absolute;
top: 50%; left: 50%;
width: 14px; height: 14px;
background: #0a0a0a;
border: 3px solid #fff;
border-radius: 50%;
transform: translate(-50%, -50%);
z-index: 10;
box-shadow: 0 1px 4px rgba(0,0,0,.30);
}
/* Hizalandı state */
.qb-compass.is-aligned{ filter: drop-shadow(0 0 24px rgba(13,140,74,.45)); }
.qb-compass.is-aligned .qb-rose{ animation: qbAlignedPulse 1.5s ease-in-out infinite; }
@keyframes qbAlignedPulse {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.15); }
}
.qb-compass.is-near::before{
content: '';
position: absolute;
inset: -8px;
border: 2px solid #fbe79e;
border-radius: 50%;
pointer-events: none;
opacity: .4;
}
/* Hizalandı badge */
.qb-aligned-badge{
position: absolute;
bottom: -16px;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 14px;
background: linear-gradient(135deg, #2fae93, #1d6f5e);
color: #fff;
border-radius: 999px;
font-size: 12px;
font-weight: 800;
box-shadow: 0 4px 14px rgba(13,140,74,.40);
opacity: 0;
transform: translateX(-50%) scale(.8);
transition: all .25s;
pointer-events: none;
white-space: nowrap;
}
.qb-compass.is-aligned + .qb-aligned-badge,
.qb-compass.is-aligned ~ .qb-aligned-badge{
opacity: 1;
transform: translateX(-50%) scale(1);
}
.qb-compass.is-aligned .qb-aligned-badge{
opacity: 1; transform: translateX(-50%) scale(1);
}
/* Heading display */
.qb-heading-display{
margin-top: 26px;
text-align: center;
display: flex;
align-items: baseline;
justify-content: center;
gap: 2px;
}
.qb-heading-num{
font-size: 28px;
font-weight: 900;
color: #0a0a0a;
font-variant-numeric: tabular-nums;
letter-spacing: -1px;
}
.qb-heading-deg{
font-size: 18px;
color: #94a3b8;
font-weight: 600;
}
/* === AKSIYON BUTONLARI === */
.qb-actions{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.qb-act-btn{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px;
background: linear-gradient(135deg, #2fae93, #1d6f5e);
border: 0;
border-radius: 14px;
color: #fff;
font-size: 14px;
font-weight: 800;
cursor: pointer;
font-family: inherit;
box-shadow: 0 6px 18px rgba(13,140,74,.25);
transition: all .15s;
}
.qb-act-btn:active{ transform: scale(.97); }
.qb-act-btn.is-active{
background: #f0fdf4;
color: #2fae93;
box-shadow: 0 2px 6px rgba(13,140,74,.10);
}
.qb-act-btn.is-active:disabled{ opacity: 1; cursor: default; }
.qb-act-btn-secondary{
background: #fff;
color: #475569;
border: 1px solid #e8efeb;
box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
/* === HARİTA === */
.qb-map-card{
background: #fff;
border: 1px solid #e8efeb;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 4px 14px rgba(0,0,0,.04);
}
.qb-map-head{
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid #e8efeb;
}
.qb-map-title{
font-size: 13px;
font-weight: 800;
color: #0a0a0a;
letter-spacing: -.2px;
}
.qb-map-cal-btn{
background: #f0fdf4;
color: #2fae93;
border: 0;
padding: 5px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
cursor: pointer;
font-family: inherit;
}
.qb-map{
height: 240px;
background: #f1f5f9;
}
.qb-map-hint{
padding: 10px 16px;
font-size: 11.5px;
color: #64748b;
line-height: 1.5;
font-weight: 500;
background: #f8fafc;
border-top: 1px solid #f1f5f9;
}
/* === İPUÇLARI === */
.qb-tips{
display: flex;
flex-direction: column;
gap: 6px;
}
.qb-tip{
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: #fff;
border: 1px solid #f1f5f9;
border-radius: 10px;
font-size: 12px;
color: #475569;
font-weight: 500;
}
.qb-tip svg{ color: #2fae93; flex-shrink: 0; }
/* === HATA === */
.qb-error{
padding: 60px 24px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.qb-error svg{ margin-bottom: 16px; }
.qb-error-title{
font-size: 17px; font-weight: 800; color: #0a0a0a; margin-bottom: 8px;
}
.qb-error-desc{
font-size: 13.5px; color: #475569; max-width: 280px; line-height: 1.55; margin-bottom: 20px;
}
.qb-error-retry{
padding: 12px 24px;
background: linear-gradient(135deg, #2fae93, #1d6f5e);
color: #fff;
border: 0;
border-radius: 12px;
font-size: 13px;
font-weight: 800;
cursor: pointer;
font-family: inherit;
}
/* === KALİBRASYON SHEET === */
.qb-cal-sheet{ padding: 8px 0; text-align: center; }
.qb-cal-anim{ display: flex; justify-content: center; margin-bottom: 16px; }
.qb-cal-title{
font-size: 18px; font-weight: 800; color: #0a0a0a; margin-bottom: 8px;
}
.qb-cal-desc{
font-size: 13.5px; color: #475569; line-height: 1.55; margin-bottom: 16px;
}
.qb-cal-tip{
background: #fef3c7;
border: 1px solid #fde68a;
padding: 10px 12px;
border-radius: 10px;
font-size: 11.5px;
color: #92400e;
text-align: left;
line-height: 1.5;
margin-bottom: 16px;
}
.qb-cal-done{
width: 100%;
padding: 14px;
background: linear-gradient(135deg, #2fae93, #1d6f5e);
color: #fff;
border: 0;
border-radius: 14px;
font-size: 14px;
font-weight: 800;
cursor: pointer;
font-family: inherit;
}
/* === MAP CALIBRATION === */
.qb-mapcal{ padding: 4px 0; }
.qb-mapcal-desc{
font-size: 13.5px; color: #475569; line-height: 1.55; margin-bottom: 12px;
}
.qb-mapcal-map{
height: 280px;
background: #f1f5f9;
border-radius: 14px;
overflow: hidden;
margin-bottom: 10px;
}
.qb-mapcal-hint{
font-size: 11.5px; color: #64748b; text-align: center; margin-bottom: 14px; font-weight: 500;
}
.qb-mapcal-done{
width: 100%;
padding: 14px;
background: linear-gradient(135deg, #2fae93, #1d6f5e);
color: #fff;
border: 0;
border-radius: 14px;
font-size: 14px;
font-weight: 800;
cursor: pointer;
font-family: inherit;
}
/* === PUSULA v4 EK EKLEMELER === */
.qibla-actions{
display: flex;
flex-direction: column;
gap: 8px;
margin: 12px 0 0;
width: 100%;
}
.qibla-recalibrate-btn{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 16px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
color: #475569;
font-size: 13px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
transition: all .15s;
}
.qibla-recalibrate-btn:active{
transform: scale(.97);
background: #f8fafc;
color: #2fae93;
border-color: #2fae93;
}
.qibla-recalibrate-btn svg{ flex-shrink: 0; }
/* =====================================================================
* PUSULA v4.1 - FULL HARİTA ARKA PLAN
* Apple Compass tarzı premium görünüm
* ===================================================================== */
.view[data-view="kible"]{
padding: 0 !important;
background: #0a0a0a !important;
}
.view[data-view="kible"].is-active{
display: flex !important;
flex-direction: column;
position: relative;
overflow: hidden;
min-height: 100dvh;
}
.qibla-fullmap{
position: relative;
width: 100%;
min-height: 100dvh;
padding: 0 !important;
margin: 0 !important;
display: flex;
flex-direction: column;
}
/* Harita arka plan - tüm ekran */
.qibla-map-bg{
position: absolute !important;
top: 0; left: 0; right: 0; bottom: 0;
width: 100% !important;
height: 100% !important;
z-index: 0;
filter: saturate(.85) brightness(.95);
}
/* Üst karanlık gradient - okunabilirlik */
.qibla-overlay-top{
position: absolute;
top: 0; left: 0; right: 0;
height: 220px;
z-index: 1;
background: linear-gradient(180deg, rgba(248,250,252,.96) 0%, rgba(248,250,252,.85) 50%, rgba(248,250,252,0) 100%);
pointer-events: none;
}
/* Alt karanlık gradient */
.qibla-overlay-bottom{
position: absolute;
bottom: 0; left: 0; right: 0;
height: 320px;
z-index: 1;
background: linear-gradient(0deg, rgba(248,250,252,.96) 0%, rgba(248,250,252,.85) 50%, rgba(248,250,252,0) 100%);
pointer-events: none;
}
/* Foreground - tüm UI */
.qibla-fg{
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
padding: 14px 14px calc(var(--tabbar-h, 64px) + var(--safe-bot, 0px) + 24px);
gap: 12px;
min-height: 100dvh;
}
/* Info bar - üstte semi-transparent glass */
.qibla-fg .qibla-info-bar{
background: rgba(255,255,255,.92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 8px 32px rgba(0,0,0,.10);
border: 1px solid rgba(255,255,255,.7);
}
/* Instruction - glass card */
.qibla-fg .qibla-instruction{
background: rgba(255,255,255,.92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 6px 22px rgba(0,0,0,.08);
border: 1px solid rgba(255,255,255,.7);
}
/* Pusula - merkezde, harita arkada gözüksün diye semi-transparent */
.qibla-fg .qibla-compass-pro{
background: rgba(255,255,255,.78);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,.6);
box-shadow: 0 12px 40px rgba(0,0,0,.15), inset 0 0 0 1px rgba(255,255,255,.5);
margin: 8px auto;
}
/* Status card */
.qibla-fg .qibla-status-pro{
background: rgba(255,255,255,.92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 6px 22px rgba(0,0,0,.08);
border: 1px solid rgba(255,255,255,.7);
}
/* Aksiyonlar - margin-top auto ile alta yapışsın */
.qibla-fg .qibla-actions{
margin-top: auto;
padding-top: 4px;
}
.qibla-fg .qibla-start-btn,
.qibla-fg .qibla-recalibrate-btn{
background: rgba(255,255,255,.95);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 6px 22px rgba(0,0,0,.12);
border: 1px solid rgba(255,255,255,.7);
}
.qibla-fg .qibla-start-btn{
background: linear-gradient(135deg, #2fae93, #1d6f5e);
color: #fff;
border-color: transparent;
}
/* Help button - foreground glass tarzı */
.qibla-help-btn-fg{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 14px;
background: rgba(255,255,255,.85);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,.6);
border-radius: 999px;
color: #475569;
font-size: 12.5px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
align-self: center;
margin-top: 4px;
}
.qibla-help-btn-fg:active{ transform: scale(.96); }
/* Vakit ekranındaki gibi, qibla view aktifken header semi-transparent */
.app:has(.view[data-view="kible"].is-active) .header{
background: rgba(255,255,255,.85) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border-bottom: 1px solid rgba(0,0,0,.05);
}
/* Tab bar da aynı şekilde */
.app:has(.view[data-view="kible"].is-active) .tabbar{
background: rgba(255,255,255,.92) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
}
/* Pusula geri butonu - üst sol köşe glass */
.qibla-back-btn{
position: absolute;
top: calc(var(--safe-top, 0px) + 12px);
left: 14px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,.92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,.7);
border-radius: 50%;
color: #0a0a0a;
cursor: pointer;
font-family: inherit;
box-shadow: 0 4px 14px rgba(0,0,0,.10);
z-index: 10;
transition: all .15s;
padding: 0;
}
.qibla-back-btn:active{
transform: scale(.92);
background: #fff;
}
/* =====================================================================
* HADİS-İ ŞERİF v2.0 - PREMIUM
* ===================================================================== */
.view[data-view="hadis"]{
background: #f7f9f8 !important;
padding-bottom: calc(var(--tabbar-h, 64px) + var(--safe-bot, 0px) + 24px);
}
.hp-app{
display: flex;
flex-direction: column;
gap: 14px;
padding: 12px 14px 0;
}
/* === HERO - Günün Hadisi === */
.hp-hero{
position: relative;
border-radius: 22px;
overflow: hidden;
padding: 22px 22px 20px;
color: #fff;
cursor: pointer;
isolation: isolate;
box-shadow: 0 10px 32px rgba(6,77,40,.28);
border: 0;
font-family: inherit;
text-align: left;
width: 100%;
display: block;
}
.hp-hero-bg{
position: absolute;
inset: 0;
background:
linear-gradient(135deg, rgba(6,77,40,.95) 0%, rgba(13,140,74,.92) 50%, rgba(6,77,40,.95) 100%),
radial-gradient(circle at 80% 20%, rgba(251,231,158,.20) 0%, transparent 50%);
z-index: -2;
}
.hp-hero-glow{
position: absolute;
top: -50px; right: -50px;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(251,231,158,.28), transparent 65%);
border-radius: 50%;
pointer-events: none;
z-index: -1;
animation: hpGlow 8s ease-in-out infinite;
}
@keyframes hpGlow {
0%,100% { transform: scale(1); opacity: .85; }
50% { transform: scale(1.18); opacity: 1; }
}
.hp-hero-content{
position: relative;
}
.hp-hero-badge{
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 12px;
background: rgba(251,231,158,.18);
border: 1px solid rgba(251,231,158,.30);
color: #fbe79e;
border-radius: 999px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: .8px;
margin-bottom: 12px;
}
.hp-hero-arabic{
font-family: 'Amiri','Scheherazade New',serif !important;
font-size: 22px;
line-height: 1.5;
font-weight: 500;
margin-bottom: 8px;
opacity: .92;
text-shadow: 0 1px 8px rgba(0,0,0,.20);
direction: rtl;
}
.hp-hero-text{
font-size: 14.5px;
line-height: 1.55;
font-weight: 600;
margin-bottom: 10px;
}
.hp-hero-source{
font-size: 11.5px;
color: rgba(251,231,158,.85);
font-weight: 700;
letter-spacing: .2px;
}
.hp-hero-num{ opacity: .8; }
/* === SEARCH === */
.hp-search-wrap{
position: relative;
display: flex;
align-items: center;
}
.hp-search-icon{
position: absolute;
left: 14px;
color: #94a3b8;
pointer-events: none;
}
.hp-search{
width: 100%;
padding: 12px 40px 12px 42px;
background: #fff;
border: 1px solid #e8efeb;
border-radius: 14px;
font-size: 14px;
font-weight: 500;
color: #0a0a0a;
font-family: inherit;
outline: none;
transition: border-color .15s, box-shadow .15s;
-webkit-appearance: none;
appearance: none;
}
.hp-search:focus{
border-color: #2fae93;
box-shadow: 0 0 0 3px rgba(13,140,74,.10);
}
.hp-search::placeholder{ color: #94a3b8; font-weight: 500; }
.hp-search-clear{
position: absolute;
right: 8px;
width: 28px; height: 28px;
display: flex; align-items: center; justify-content: center;
background: #f1f5f9;
border: 0;
border-radius: 50%;
color: #64748b;
cursor: pointer;
font-family: inherit;
}
.hp-search-clear:active{ transform: scale(.92); }
/* === STATS === */
.hp-stats{
display: flex;
align-items: center;
background: #fff;
border: 1px solid #e8efeb;
border-radius: 14px;
padding: 14px 8px;
box-shadow: 0 1px 2px rgba(0,0,0,.02);
}
.hp-stat{
flex: 1;
text-align: center;
cursor: default;
transition: transform .15s;
}
.hp-stat-fav{
cursor: pointer;
}
.hp-stat-fav:active{ transform: scale(.95); }
.hp-stat-num{
font-size: 18px;
font-weight: 800;
color: #0a0a0a;
letter-spacing: -.3px;
font-variant-numeric: tabular-nums;
}
.hp-stat-fav .hp-stat-num{ color: #ec4899; }
.hp-stat-label{
font-size: 10.5px;
color: #64748b;
font-weight: 700;
letter-spacing: .5px;
text-transform: uppercase;
margin-top: 2px;
}
.hp-stat-divider{
width: 1px;
height: 26px;
background: #e2e8f0;
}
/* === SECTION TITLE === */
.hp-section-title{
display: flex;
align-items: center;
gap: 6px;
padding: 0 4px;
font-size: 11px;
font-weight: 800;
color: #94a3b8;
letter-spacing: .8px;
margin-top: 4px;
}
.hp-section-title svg{ flex-shrink: 0; }
/* === KİTAP KARTLARI === */
.hp-kitaplar{
display: flex;
flex-direction: column;
gap: 8px;
}
.hp-kitap-card{
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: #fff;
border: 1px solid #e8efeb;
border-radius: 16px;
cursor: pointer;
font-family: inherit;
text-align: left;
width: 100%;
transition: all .15s;
box-shadow: 0 1px 2px rgba(0,0,0,.02);
}
.hp-kitap-card:active{
transform: scale(.985);
background: #f8faf9;
box-shadow: 0 4px 12px rgba(13,140,74,.08);
}
.hp-kitap-icon{
flex-shrink: 0;
width: 42px; height: 42px;
display: flex; align-items: center; justify-content: center;
border-radius: 11px;
box-shadow: 0 4px 10px rgba(0,0,0,.10);
}
.hp-kitap-body{
flex: 1;
min-width: 0;
}
.hp-kitap-name{
font-size: 15px;
font-weight: 800;
color: #0a0a0a;
letter-spacing: -.2px;
margin-bottom: 2px;
}
.hp-kitap-ravi{
font-size: 12px;
color: #64748b;
font-weight: 500;
}
.hp-kitap-count{
flex-shrink: 0;
text-align: center;
padding: 0 4px;
}
.hp-kitap-count-num{
font-size: 14px;
font-weight: 800;
color: #2fae93;
font-variant-numeric: tabular-nums;
letter-spacing: -.3px;
}
.hp-kitap-count-label{
font-size: 9.5px;
color: #94a3b8;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .5px;
}
.hp-kitap-chevron{
flex-shrink: 0;
color: #cbd5e1;
}
/* === SEARCH RESULT === */
.hp-search-result:empty{ display: none; }
.hp-search-summary{
font-size: 12px;
color: #64748b;
font-weight: 700;
margin: 4px 0 8px;
padding: 0 4px;
}
.hp-search-list{
display: flex;
flex-direction: column;
gap: 8px;
}
/* === HADIS ROW (liste içinde) === */
.hp-row{
display: flex;
gap: 12px;
padding: 14px 16px;
background: #fff;
border: 1px solid #e8efeb;
border-radius: 14px;
cursor: pointer;
font-family: inherit;
text-align: left;
width: 100%;
transition: all .15s;
align-items: flex-start;
}
.hp-row:active{
transform: scale(.99);
background: #f8faf9;
}
.hp-row-num{
flex-shrink: 0;
width: 28px; height: 28px;
display: flex; align-items: center; justify-content: center;
background: #f0fdf4;
color: #1d6f5e;
border-radius: 8px;
font-size: 11.5px;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.hp-row-content{ flex: 1; min-width: 0; }
.hp-row-source{
font-size: 11px;
color: #64748b;
font-weight: 700;
letter-spacing: .3px;
margin-bottom: 4px;
text-transform: uppercase;
}
.hp-row-text{
font-size: 13.5px;
color: #0a0a0a;
line-height: 1.5;
font-weight: 500;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.hp-row-text mark{
background: #fef3c7;
color: #92400e;
padding: 0 2px;
border-radius: 3px;
font-weight: 700;
}
/* Derece badges */
.hp-derece{
display: inline-block;
padding: 1px 6px;
border-radius: 4px;
font-size: 9.5px;
font-weight: 800;
letter-spacing: .3px;
text-transform: uppercase;
}
.hp-derece-sahih{ background: #dcfce7; color: #1d6f5e; }
.hp-derece-hasen{ background: #dbeafe; color: #1e3a8a; }
.hp-derece-zayif{ background: #fef3c7; color: #92400e; }
.hp-derece-mevdu{ background: #fee2e2; color: #991b1b; }
/* === PAGE HEAD (kitap detay / favori / detay üst bar) === */
.hp-page-head{
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: #fff;
border-bottom: 1px solid #e8efeb;
position: sticky;
top: 0;
z-index: 5;
backdrop-filter: blur(12px);
}
.hp-back-btn{
flex-shrink: 0;
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
background: #f1f5f9;
border: 0;
border-radius: 50%;
color: #0a0a0a;
cursor: pointer;
font-family: inherit;
transition: all .15s;
}
.hp-back-btn:active{ transform: scale(.92); background: #e2e8f0; }
.hp-page-title{
flex: 1;
text-align: center;
min-width: 0;
}
.hp-page-name{
font-size: 15px;
font-weight: 800;
color: #0a0a0a;
letter-spacing: -.2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hp-page-sub{
font-size: 11px;
color: #64748b;
font-weight: 600;
margin-top: 2px;
}
/* === KONU PILL BAR === */
.hp-konu-bar{
display: flex;
gap: 6px;
overflow-x: auto;
padding: 12px 14px 8px;
background: #fff;
border-bottom: 1px solid #e8efeb;
scrollbar-width: none;
position: sticky;
top: 60px;
z-index: 4;
}
.hp-konu-bar::-webkit-scrollbar{ display: none; }
.hp-konu-pill{
flex-shrink: 0;
padding: 7px 14px;
background: #f1f5f9;
border: 0;
border-radius: 999px;
font-size: 12.5px;
font-weight: 700;
color: #475569;
cursor: pointer;
font-family: inherit;
white-space: nowrap;
transition: all .15s;
}
.hp-konu-pill:active{ transform: scale(.96); }
.hp-konu-pill.is-active{
background: linear-gradient(135deg,#2fae93,#1d6f5e);
color: #fff;
box-shadow: 0 3px 8px rgba(13,140,74,.30);
}
/* === KITAP DETAY LISTE === */
.hp-list{
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px 14px;
}
/* === PAGER === */
.hp-pager{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 14px;
margin: 8px 14px 24px;
background: #fff;
border: 1px solid #e8efeb;
border-radius: 14px;
}
.hp-pager-btn{
display: inline-flex;
align-items: center;
gap: 4px;
padding: 8px 14px;
background: #f1f5f9;
border: 0;
border-radius: 10px;
font-size: 12.5px;
font-weight: 700;
color: #0a0a0a;
cursor: pointer;
font-family: inherit;
transition: all .15s;
}
.hp-pager-btn:not(:disabled):active{ transform: scale(.96); background: #e2e8f0; }
.hp-pager-btn:disabled{ opacity: .35; cursor: default; }
.hp-pager-info{
font-size: 13px;
font-weight: 800;
color: #0a0a0a;
font-variant-numeric: tabular-nums;
}
/* === DETAY === */
.hp-detail{
padding: 20px 18px 16px;
background: #fff;
margin: 12px 14px 0;
border-radius: 18px;
border: 1px solid #e8efeb;
box-shadow: 0 2px 6px rgba(0,0,0,.03);
}
.hp-detail-derece{
display: inline-block;
padding: 4px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
letter-spacing: .3px;
margin-bottom: 14px;
}
.hp-detail-arabic{
font-family: 'Amiri','Scheherazade New',serif !important;
font-size: 26px;
line-height: 1.85;
color: #1d6f5e;
font-weight: 500;
text-align: right;
direction: rtl;
margin-bottom: 14px;
}
.hp-detail-divider{
height: 1px;
background: linear-gradient(90deg, transparent, #e8efeb, transparent);
margin: 14px 0;
}
.hp-detail-turkce{
font-size: 16px;
line-height: 1.7;
color: #0a0a0a;
font-weight: 500;
}
.hp-detail-aciklama{
margin-top: 18px;
padding: 14px 16px;
background: linear-gradient(135deg,#fefcf3,#fdf6e3);
border-left: 3px solid #c9a961;
border-radius: 10px;
}
.hp-detail-aciklama-label{
font-size: 10.5px;
font-weight: 800;
color: #6b5e2a;
letter-spacing: .8px;
text-transform: uppercase;
margin-bottom: 6px;
}
.hp-detail-aciklama-text{
font-size: 14px;
color: #3f2f0a;
line-height: 1.55;
}
.hp-detail-kaynak{
display: flex;
align-items: center;
gap: 6px;
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid #e8efeb;
font-size: 12px;
color: #64748b;
font-weight: 600;
}
.hp-detail-kaynak svg{ flex-shrink: 0; color: #94a3b8; }
/* === DETAY AKSIYONLAR === */
.hp-detail-actions{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 14px 14px 0;
}
.hp-action-btn{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 16px;
background: #fff;
border: 1px solid #e8efeb;
border-radius: 14px;
color: #475569;
font-size: 13.5px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
transition: all .15s;
}
.hp-action-btn:active{ transform: scale(.97); background: #f8faf9; }
.hp-action-btn.is-active{
background: linear-gradient(135deg,#fce7f3,#fbcfe8);
color: #be185d;
border-color: #f9a8d4;
}
/* === DETAY NAV === */
.hp-detail-nav{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 14px;
}
.hp-nav-btn{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 12px 14px;
background: #fff;
border: 1px solid #e8efeb;
border-radius: 14px;
color: #0a0a0a;
font-size: 13px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
transition: all .15s;
}
.hp-nav-btn:not(:disabled):active{ transform: scale(.97); background: #f8faf9; }
.hp-nav-btn:disabled{ opacity: .35; cursor: default; }
.hp-nav-btn svg{ color: #2fae93; flex-shrink: 0; }
/* === EMPTY === */
.hp-empty{
text-align: center;
padding: 48px 20px;
color: #94a3b8;
}
.hp-empty svg{ margin: 0 auto 12px; display: block; }
.hp-empty-title{
font-size: 15px;
font-weight: 800;
color: #475569;
margin-bottom: 4px;
}
.hp-empty-sub{
font-size: 12.5px;
color: #94a3b8;
font-weight: 500;
line-height: 1.4;
}
/* =====================================================================
* YAKIN CAMİLER v2.0 - PREMIUM
* ===================================================================== */
.view[data-view="cami"]{
background: #f7f9f8 !important;
padding-bottom: calc(var(--tabbar-h, 64px) + var(--safe-bot, 0px) + 24px);
}
.cm-app{
display: flex;
flex-direction: column;
gap: 12px;
padding: 12px 14px 0;
}
/* === SEGMENTED CONTROL (Apple tarzı) === */
.cm-segment{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 4px;
padding: 4px;
background: #eef2ef;
border-radius: 12px;
}
.cm-seg-btn{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 9px 8px;
background: transparent;
border: 0;
border-radius: 9px;
color: #475569;
font-size: 12.5px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
transition: all .15s;
white-space: nowrap;
position: relative;
}
.cm-seg-btn:active{ transform: scale(.97); }
.cm-seg-btn.is-active{
background: #fff;
color: #1d6f5e;
box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}
.cm-seg-btn svg{ flex-shrink: 0; }
.cm-fav-badge{
display: inline-block;
margin-left: 4px;
padding: 1px 6px;
background: #ec4899;
color: #fff;
border-radius: 999px;
font-size: 10px;
font-weight: 800;
line-height: 1.4;
}
/* === MESAFE PILL BAR === */
.cm-radius-bar{
display: flex;
gap: 6px;
overflow-x: auto;
scrollbar-width: none;
padding: 2px 0;
}
.cm-radius-bar::-webkit-scrollbar{ display: none; }
.cm-radius-pill{
flex-shrink: 0;
padding: 7px 14px;
background: #fff;
border: 1px solid #e8efeb;
border-radius: 999px;
font-size: 12.5px;
font-weight: 700;
color: #475569;
cursor: pointer;
font-family: inherit;
transition: all .15s;
white-space: nowrap;
}
.cm-radius-pill:active{ transform: scale(.96); }
.cm-radius-pill.is-active{
background: linear-gradient(135deg,#2fae93,#1d6f5e);
color: #fff;
border-color: transparent;
box-shadow: 0 3px 8px rgba(13,140,74,.25);
}
.cm-body{ display: flex; flex-direction: column; gap: 10px; }
/* === HERO - EN YAKIN CAMİ === */
.cm-hero{
position: relative;
border-radius: 22px;
overflow: hidden;
padding: 22px 22px 18px;
color: #fff;
cursor: pointer;
isolation: isolate;
box-shadow: 0 10px 32px rgba(6,77,40,.28);
border: 0;
font-family: inherit;
text-align: left;
width: 100%;
display: block;
transition: all .15s;
}
.cm-hero:active{ transform: scale(.99); }
.cm-hero-bg{
position: absolute;
inset: 0;
background:
linear-gradient(135deg, rgba(6,77,40,.95) 0%, rgba(13,140,74,.92) 50%, rgba(6,77,40,.95) 100%),
radial-gradient(circle at 80% 20%, rgba(251,231,158,.20) 0%, transparent 50%);
z-index: -2;
}
.cm-hero-glow{
position: absolute;
top: -50px; right: -50px;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(251,231,158,.30), transparent 65%);
border-radius: 50%;
pointer-events: none;
z-index: -1;
animation: cmGlow 8s ease-in-out infinite;
}
@keyframes cmGlow {
0%,100% { transform: scale(1); opacity: .8; }
50% { transform: scale(1.18); opacity: 1; }
}
.cm-hero-content{ position: relative; }
.cm-hero-badge{
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
background: rgba(251,231,158,.18);
border: 1px solid rgba(251,231,158,.30);
color: #fbe79e;
border-radius: 999px;
font-size: 10px;
font-weight: 800;
letter-spacing: .8px;
margin-bottom: 10px;
}
.cm-hero-name{
font-size: 19px;
font-weight: 800;
letter-spacing: -.3px;
margin-bottom: 4px;
}
.cm-hero-adres{
font-size: 12.5px;
opacity: .80;
font-weight: 500;
margin-bottom: 12px;
line-height: 1.4;
}
.cm-hero-meta{
display: flex;
gap: 16px;
margin-bottom: 14px;
}
.cm-hero-meta-item{
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12.5px;
font-weight: 700;
color: rgba(251,231,158,.95);
}
.cm-hero-meta-item svg{ opacity: .9; flex-shrink: 0; }
.cm-hero-cta{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
background: rgba(255,255,255,.95);
border: 0;
border-radius: 12px;
color: #1d6f5e;
font-size: 13px;
font-weight: 800;
cursor: pointer;
font-family: inherit;
letter-spacing: -.1px;
transition: all .15s;
box-shadow: 0 4px 12px rgba(0,0,0,.10);
}
.cm-hero-cta:active{ transform: scale(.96); background: #fff; }
.cm-hero-cta svg{ flex-shrink: 0; }
/* === LIST HEAD === */
.cm-list-head{
padding: 4px 4px 2px;
margin-top: 6px;
}
.cm-list-title{
font-size: 13px;
font-weight: 800;
color: #0a0a0a;
letter-spacing: -.1px;
}
.cm-list-sub{
font-size: 11.5px;
color: #64748b;
font-weight: 600;
margin-top: 2px;
}
/* === CAMİ KART === */
.cm-list{
display: flex;
flex-direction: column;
gap: 8px;
}
.cm-card{
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: #fff;
border: 1px solid #e8efeb;
border-radius: 16px;
cursor: pointer;
font-family: inherit;
text-align: left;
width: 100%;
transition: all .15s;
box-shadow: 0 1px 2px rgba(0,0,0,.02);
}
.cm-card:active{
transform: scale(.99);
background: #f8faf9;
box-shadow: 0 4px 12px rgba(13,140,74,.08);
}
.cm-card-icon{
flex-shrink: 0;
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #2fae93, #1d6f5e);
color: #fff;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(13,140,74,.20);
}
.cm-card-body{
flex: 1;
min-width: 0;
}
.cm-card-name{
font-size: 14.5px;
font-weight: 800;
color: #0a0a0a;
letter-spacing: -.2px;
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cm-card-adres{
font-size: 11.5px;
color: #64748b;
font-weight: 500;
margin-bottom: 4px;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cm-card-meta{
display: flex;
align-items: center;
gap: 8px;
font-size: 11.5px;
font-weight: 700;
}
.cm-card-distance{
color: #1d6f5e;
font-variant-numeric: tabular-nums;
}
.cm-card-walk{
color: #94a3b8;
font-weight: 600;
}
.cm-card-walk::before{
content: '·';
margin-right: 6px;
opacity: .5;
}
.cm-card-actions{
display: flex;
gap: 4px;
flex-shrink: 0;
}
.cm-card-action{
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
background: #f1f5f9;
border: 0;
border-radius: 50%;
color: #475569;
cursor: pointer;
transition: all .15s;
}
.cm-card-action:active{ transform: scale(.90); }
.cm-card-action.is-active{
background: linear-gradient(135deg, #fbe79e, #c9a961);
color: #1d6f5e;
}
.cm-card-action.cm-card-action-danger:active{
background: #fee2e2;
color: #dc2626;
}
/* === DETAY === */
.cm-detail{ padding: 4px 0; }
.cm-detail-hero{
text-align: center;
margin-bottom: 18px;
}
.cm-detail-icon{
width: 64px; height: 64px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #2fae93, #1d6f5e);
color: #fff;
border-radius: 18px;
margin: 0 auto 12px;
box-shadow: 0 8px 22px rgba(13,140,74,.30);
}
.cm-detail-name{
font-size: 19px;
font-weight: 800;
color: #0a0a0a;
letter-spacing: -.3px;
margin-bottom: 4px;
}
.cm-detail-adres{
font-size: 13px;
color: #64748b;
font-weight: 500;
line-height: 1.4;
}
.cm-detail-stats{
display: flex;
align-items: center;
background: #f8faf9;
border: 1px solid #e8efeb;
border-radius: 14px;
padding: 14px 8px;
margin-bottom: 14px;
}
.cm-detail-stat{
flex: 1;
text-align: center;
}
.cm-detail-stat-num{
font-size: 18px;
font-weight: 800;
color: #1d6f5e;
letter-spacing: -.3px;
font-variant-numeric: tabular-nums;
}
.cm-detail-stat-label{
font-size: 10px;
color: #64748b;
font-weight: 700;
letter-spacing: .5px;
text-transform: uppercase;
margin-top: 2px;
}
.cm-detail-stat-divider{
width: 1px;
height: 26px;
background: #e2e8f0;
}
.cm-detail-actions{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
margin-bottom: 14px;
}
.cm-detail-btn{
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 12px 6px;
background: #fff;
border: 1px solid #e8efeb;
border-radius: 12px;
color: #475569;
font-size: 11.5px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
transition: all .15s;
}
.cm-detail-btn:active{ transform: scale(.97); background: #f8faf9; }
.cm-detail-btn-primary{
background: linear-gradient(135deg, #2fae93, #1d6f5e);
color: #fff;
border-color: transparent;
box-shadow: 0 4px 10px rgba(13,140,74,.25);
}
.cm-detail-contact{
background: #f8faf9;
border: 1px solid #e8efeb;
border-radius: 14px;
margin-bottom: 14px;
overflow: hidden;
}
.cm-detail-contact-row{
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
color: #0a0a0a;
font-size: 13px;
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid #e8efeb;
transition: background .15s;
}
.cm-detail-contact-row:last-child{ border-bottom: 0; }
.cm-detail-contact-row:active{ background: #eef2ef; }
.cm-detail-contact-row svg{ flex-shrink: 0; color: #2fae93; }
.cm-detail-fav-btn{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 13px 16px;
background: #fff;
border: 1px solid #e8efeb;
border-radius: 14px;
color: #475569;
font-size: 13.5px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
transition: all .15s;
}
.cm-detail-fav-btn:active{ transform: scale(.97); }
.cm-detail-fav-btn.is-active{
background: linear-gradient(135deg, #fef3c7, #fde68a);
color: #92400e;
border-color: #fcd34d;
}
/* === HARITA === */
.cm-map{
width: 100%;
height: 65vh;
border-radius: 16px;
overflow: hidden;
border: 1px solid #e8efeb;
box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.cm-user-marker{ position: relative; }
.cm-user-pulse{
position: absolute;
width: 24px; height: 24px;
background: rgba(59,130,246,.28);
border-radius: 50%;
animation: cmPulse 2s ease-out infinite;
}
@keyframes cmPulse {
0% { transform: scale(.5); opacity: .8; }
100% { transform: scale(2.5); opacity: 0; }
}
.cm-user-dot{
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 14px; height: 14px;
background: #3b82f6;
border: 3px solid #fff;
border-radius: 50%;
box-shadow: 0 2px 6px rgba(0,0,0,.30);
}
.cm-cami-marker{ filter: drop-shadow(0 4px 8px rgba(0,0,0,.20)); }
.cm-cami-pin{
width: 32px; height: 38px;
background: linear-gradient(135deg, #2fae93, #1d6f5e);
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.cm-cami-pin svg{ transform: rotate(45deg); }
/* === EMPTY === */
.cm-empty{
text-align: center;
padding: 60px 24px;
color: #94a3b8;
}
.cm-empty svg{ margin: 0 auto 16px; display: block; opacity: .6; }
.cm-empty-title{
font-size: 15.5px;
font-weight: 800;
color: #475569;
margin-bottom: 6px;
}
.cm-empty-sub{
font-size: 12.5px;
color: #94a3b8;
font-weight: 500;
line-height: 1.4;
margin-bottom: 18px;
}
.cm-retry-btn{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 11px 22px;
background: linear-gradient(135deg, #2fae93, #1d6f5e);
color: #fff;
border: 0;
border-radius: 12px;
font-size: 13px;
font-weight: 800;
cursor: pointer;
font-family: inherit;
box-shadow: 0 4px 12px rgba(13,140,74,.25);
transition: all .15s;
}
.cm-retry-btn:active{ transform: scale(.96); }
/* =====================================================================
* ORTAK DUA v2.0 - PREMIUM
* ===================================================================== */
.view[data-view="ortak-dua"]{
background: #f7f9f8 !important;
padding-bottom: calc(var(--tabbar-h, 64px) + var(--safe-bot, 0px) + 24px);
}
.od-app{
display: flex;
flex-direction: column;
gap: 12px;
padding: 12px 14px 0;
}
.od-head{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 4px 4px;
}
.od-head-info{ flex: 1; min-width: 0; }
.od-head-title{
font-size: 16px;
font-weight: 800;
color: #0a0a0a;
letter-spacing: -.2px;
}
.od-head-sub{
font-size: 12px;
color: #64748b;
font-weight: 600;
margin-top: 2px;
}
.od-new-btn{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 14px;
background: linear-gradient(135deg, #2fae93, #1d6f5e);
color: #fff;
border: 0;
border-radius: 12px;
font-size: 13px;
font-weight: 800;
cursor: pointer;
font-family: inherit;
box-shadow: 0 4px 12px rgba(13,140,74,.25);
transition: all .15s;
flex-shrink: 0;
}
.od-new-btn:active{ transform: scale(.96); }
.od-list{
display: flex;
flex-direction: column;
gap: 10px;
}
.od-card{
background: #fff;
border: 1px solid #e8efeb;
border-radius: 16px;
padding: 14px 16px;
transition: all .3s;
box-shadow: 0 1px 2px rgba(0,0,0,.02);
}
.od-card.is-highlight{
border-color: #2fae93;
box-shadow: 0 0 0 3px rgba(13,140,74,.15), 0 8px 22px rgba(13,140,74,.18);
background: #f0fdf4;
animation: odPulse 1.2s ease-in-out 2;
}
@keyframes odPulse {
0%,100% { box-shadow: 0 0 0 3px rgba(13,140,74,.15), 0 8px 22px rgba(13,140,74,.18); }
50% { box-shadow: 0 0 0 6px rgba(13,140,74,.25), 0 8px 26px rgba(13,140,74,.30); }
}
.od-card-head{
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.od-tip-badge{
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: .3px;
text-transform: uppercase;
}
.od-card-author{
font-size: 11.5px;
color: #64748b;
font-weight: 700;
}
.od-card-author::before{
content: '·';
margin-right: 6px;
opacity: .5;
}
.od-card-title{
font-size: 15px;
font-weight: 800;
color: #0a0a0a;
letter-spacing: -.2px;
margin-bottom: 6px;
line-height: 1.35;
}
.od-card-text{
font-size: 14px;
color: #334155;
line-height: 1.55;
margin-bottom: 14px;
white-space: pre-line;
font-weight: 500;
}
.od-card-actions{
display: flex;
align-items: center;
gap: 10px;
}
.od-amin-btn{
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 11px 14px;
background: linear-gradient(135deg, #2fae93, #1d6f5e);
color: #fff;
border: 0;
border-radius: 12px;
font-size: 13.5px;
font-weight: 800;
cursor: pointer;
font-family: inherit;
letter-spacing: -.1px;
box-shadow: 0 3px 10px rgba(13,140,74,.20);
transition: all .15s;
}
.od-amin-btn:not(:disabled):active{ transform: scale(.97); }
.od-amin-btn.is-done{
background: linear-gradient(135deg, #fef3c7, #fde68a);
color: #92400e;
box-shadow: 0 2px 6px rgba(146,64,14,.10);
cursor: default;
}
.od-amin-btn svg{ flex-shrink: 0; }
.od-amin-count{
display: inline-flex;
align-items: center;
gap: 4px;
padding: 8px 12px;
background: #f1f5f9;
border-radius: 10px;
font-size: 13px;
font-weight: 800;
color: #475569;
font-variant-numeric: tabular-nums;
}
.od-amin-count svg{ color: #ec4899; flex-shrink: 0; }
.od-empty{
text-align: center;
padding: 60px 24px;
color: #94a3b8;
}
.od-empty svg{ margin: 0 auto 14px; display: block; opacity: .5; }
.od-empty-title{
font-size: 15px;
font-weight: 800;
color: #475569;
margin-bottom: 4px;
}
.od-empty-sub{
font-size: 12.5px;
color: #94a3b8;
font-weight: 500;
}
/* =====================================================================
* TEFSİR MODÜLÜ v1.0
* ===================================================================== */
.view[data-view="tefsir"]{
background: #f7f9f8 !important;
padding-bottom: calc(var(--tabbar-h, 64px) + var(--safe-bot, 0px) + 24px);
}
.tf-app{
display: flex;
flex-direction: column;
gap: 14px;
padding: 12px 14px 0;
}
/* === KALDIĞI YERDEN DEVAM HERO === */
.tf-devam-hero{
position: relative;
border-radius: 22px;
overflow: hidden;
padding: 20px 22px 18px;
color: #fff;
cursor: pointer;
isolation: isolate;
box-shadow: 0 10px 32px rgba(122,94,26,.32);
border: 0;
font-family: inherit;
text-align: left;
width: 100%;
display: block;
transition: transform .15s;
}
.tf-devam-hero:active{ transform: scale(.99); }
.tf-devam-bg{
position: absolute; inset: 0; z-index: -2;
background:
linear-gradient(135deg, #4a3a18 0%, #6b5121 50%, #4a3a18 100%),
radial-gradient(circle at 80% 20%, rgba(251,231,158,.30), transparent 50%);
}
.tf-devam-glow{
position: absolute;
top: -50px; right: -50px;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(251,231,158,.40), transparent 65%);
border-radius: 50%;
pointer-events: none;
z-index: -1;
animation: tfGlow 8s ease-in-out infinite;
}
@keyframes tfGlow {
0%,100% { transform: scale(1); opacity: .8; }
50% { transform: scale(1.18); opacity: 1; }
}
.tf-devam-content{ position: relative; }
.tf-devam-badge{
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
background: rgba(251,231,158,.20);
border: 1px solid rgba(251,231,158,.32);
color: #fbe79e;
border-radius: 999px;
font-size: 10px;
font-weight: 800;
letter-spacing: .8px;
margin-bottom: 10px;
}
.tf-devam-title{
font-size: 17px;
font-weight: 800;
letter-spacing: -.3px;
margin-bottom: 10px;
line-height: 1.3;
}
.tf-devam-num{ opacity: .5; margin: 0 4px; }
.tf-devam-meta{
display: flex;
gap: 14px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.tf-devam-meta-item{
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 700;
color: rgba(251,231,158,.95);
}
.tf-devam-bar{
height: 5px;
background: rgba(255,255,255,.18);
border-radius: 999px;
overflow: hidden;
margin-bottom: 14px;
}
.tf-devam-bar-fill{
height: 100%;
background: linear-gradient(90deg, #fbe79e, #f5c842);
border-radius: 999px;
transition: width .4s;
}
.tf-devam-cta{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: rgba(255,255,255,.95);
border-radius: 10px;
color: #4a3a18;
font-size: 12.5px;
font-weight: 800;
box-shadow: 0 3px 8px rgba(0,0,0,.12);
}
/* === KİTAP HERO === */
.tf-book-hero{
position: relative;
border-radius: 22px;
overflow: hidden;
padding: 22px 22px 20px;
color: #fff;
isolation: isolate;
box-shadow: 0 10px 32px rgba(6,77,40,.28);
}
.tf-book-bg{
position: absolute; inset: 0; z-index: -2;
background:
linear-gradient(135deg, #1d6f5e 0%, #2fae93 50%, #1d6f5e 100%),
radial-gradient(circle at 80% 20%, rgba(251,231,158,.20), transparent 50%);
}
.tf-book-glow{
position: absolute;
top: -50px; right: -50px;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(251,231,158,.30), transparent 65%);
border-radius: 50%;
pointer-events: none;
z-index: -1;
animation: tfGlow 8s ease-in-out infinite;
}
.tf-book-content{ position: relative; }
.tf-book-badge{
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
background: rgba(251,231,158,.18);
border: 1px solid rgba(251,231,158,.30);
color: #fbe79e;
border-radius: 999px;
font-size: 10px;
font-weight: 800;
letter-spacing: .8px;
margin-bottom: 10px;
}
.tf-book-name{
font-size: 19px;
font-weight: 800;
letter-spacing: -.3px;
margin-bottom: 4px;
}
.tf-book-yazar{
font-size: 12.5px;
opacity: .80;
font-weight: 600;
margin-bottom: 10px;
}
.tf-book-desc{
font-size: 12.5px;
opacity: .85;
font-weight: 500;
line-height: 1.5;
margin-bottom: 14px;
}
.tf-book-stats{
display: inline-flex;
align-items: center;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.16);
border-radius: 12px;
padding: 10px 4px;
backdrop-filter: blur(6px);
}
.tf-book-stat{
flex: 1;
text-align: center;
padding: 0 16px;
min-width: 70px;
}
.tf-book-stat-num{
font-size: 17px;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.tf-book-stat-label{
font-size: 10px;
opacity: .7;
font-weight: 700;
letter-spacing: .5px;
text-transform: uppercase;
margin-top: 2px;
}
.tf-book-stat-divider{
width: 1px; height: 26px;
background: rgba(255,255,255,.20);
}
/* === SECTION TITLE === */
.tf-section-title{
display: flex;
align-items: center;
gap: 6px;
padding: 0 4px;
margin-top: 4px;
font-size: 11px;
font-weight: 800;
color: #94a3b8;
letter-spacing: .8px;
}
.tf-section-sub{
margin-left: auto;
font-size: 10.5px;
color: #94a3b8;
font-weight: 700;
letter-spacing: .3px;
text-transform: none;
}
/* === CILT GRID === */
.tf-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
@media (max-width: 360px){
.tf-grid{ grid-template-columns: repeat(2, 1fr); }
}
.tf-cilt-card{
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
padding: 0;
background: transparent;
border: 0;
cursor: pointer;
font-family: inherit;
text-align: left;
width: 100%;
transition: transform .15s;
}
.tf-cilt-card:active{ transform: scale(.96); }
.tf-cilt-card.is-locked{ cursor: not-allowed; }
.tf-cilt-card.is-locked .tf-cilt-cover{ opacity: .55; }
.tf-cilt-cover{
position: relative;
aspect-ratio: 3 / 4;
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fbe79e;
background: #1d6f5e;
box-shadow: 0 6px 20px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.10);
transition: all .2s;
}
.tf-cilt-cover-img{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.tf-cilt-cover-num-badge{
position: absolute;
top: 6px;
left: 6px;
min-width: 22px;
height: 22px;
padding: 0 7px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #fbe79e, #c9a961);
color: #1d6f5e;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
font-variant-numeric: tabular-nums;
letter-spacing: -.2px;
box-shadow: 0 2px 6px rgba(0,0,0,.25);
z-index: 2;
}
.tf-cilt-cover-bg{
position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(135deg, #1d6f5e 0%, #2fae93 50%, #1d6f5e 100%),
repeating-linear-gradient(90deg, transparent 0, transparent 20px, rgba(0,0,0,.06) 20px, rgba(0,0,0,.06) 21px);
}
.tf-cilt-cover-num{
font-size: 32px;
font-weight: 900;
letter-spacing: -1px;
font-variant-numeric: tabular-nums;
text-shadow: 0 2px 6px rgba(0,0,0,.30);
line-height: 1;
}
.tf-cilt-cover-label{
font-size: 9.5px;
font-weight: 800;
letter-spacing: 1.2px;
margin-top: 4px;
opacity: .85;
}
.tf-cilt-locked-overlay{
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,.35);
color: #fff;
backdrop-filter: blur(2px);
}
.tf-cilt-done-badge{
position: absolute;
top: 6px; right: 6px;
width: 22px; height: 22px;
display: flex; align-items: center; justify-content: center;
background: #10b981;
color: #fff;
border-radius: 50%;
box-shadow: 0 2px 6px rgba(16,185,129,.35);
}
.tf-cilt-card.is-done .tf-cilt-cover{
box-shadow: 0 6px 20px rgba(16,185,129,.30), inset 0 0 0 2px rgba(16,185,129,.45);
}
.tf-cilt-info{ padding: 0 2px; }
.tf-cilt-name{
font-size: 12.5px;
font-weight: 800;
color: #0a0a0a;
letter-spacing: -.1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 1px;
}
.tf-cilt-sure{
font-size: 10.5px;
color: #64748b;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tf-cilt-locked-text{
font-size: 10px;
color: #94a3b8;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .5px;
margin-top: 2px;
}
.tf-cilt-progress{
display: flex;
align-items: center;
gap: 6px;
margin-top: 4px;
}
.tf-cilt-progress-bar{
flex: 1;
height: 4px;
background: #e8efeb;
border-radius: 999px;
overflow: hidden;
}
.tf-cilt-progress-fill{
height: 100%;
background: linear-gradient(90deg, #2fae93, #fbe79e);
border-radius: 999px;
}
.tf-cilt-progress-num{
font-size: 9.5px;
font-weight: 800;
color: #2fae93;
font-variant-numeric: tabular-nums;
}
/* === EMPTY === */
.tf-empty{
text-align: center;
padding: 80px 30px;
color: #94a3b8;
}
.tf-empty svg{ margin: 0 auto 14px; display: block; opacity: .55; }
.tf-empty-title{
font-size: 15px;
font-weight: 800;
color: #475569;
margin-bottom: 6px;
}
.tf-empty-sub{
font-size: 12.5px;
color: #94a3b8;
font-weight: 500;
margin-bottom: 18px;
line-height: 1.4;
}
.tf-retry-btn{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 11px 22px;
background: linear-gradient(135deg, #2fae93, #1d6f5e);
color: #fff;
border: 0;
border-radius: 12px;
font-size: 13px;
font-weight: 800;
cursor: pointer;
font-family: inherit;
box-shadow: 0 4px 12px rgba(13,140,74,.25);
}
/* =====================================================================
* PDF OKUYUCU
* ===================================================================== */
.tf-reader{
display: flex;
flex-direction: column;
height: 100dvh;
width: 100%;
background: #1a1a1a;
position: fixed;
inset: 0;
margin: 0;
z-index: 100;
box-sizing: border-box;
overflow: hidden;
}
.view[data-view="tefsir"]:has(.tf-reader){
padding: 0 !important;
}
.tf-reader-head{
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: rgba(20,20,20,.92);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255,255,255,.08);
padding-top: calc(10px + var(--safe-top, 0px));
}
.tf-reader-back, .tf-reader-action{
flex-shrink: 0;
width: 38px; height: 38px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.08);
border: 0;
border-radius: 50%;
color: #fff;
cursor: pointer;
font-family: inherit;
position: relative;
transition: all .15s;
}
.tf-reader-back:active, .tf-reader-action:active{ transform: scale(.92); background: rgba(255,255,255,.16); }
.tf-reader-action-badge{
position: absolute;
top: -2px; right: -2px;
min-width: 18px; height: 18px;
padding: 0 5px;
display: flex;
align-items: center;
justify-content: center;
background: #ec4899;
color: #fff;
border-radius: 999px;
font-size: 10px;
font-weight: 800;
border: 2px solid rgba(20,20,20,1);
}
.tf-reader-title{
flex: 1; min-width: 0; text-align: center;
}
.tf-reader-name{
font-size: 14px;
font-weight: 800;
color: #fff;
letter-spacing: -.2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tf-reader-sub{
font-size: 11px;
color: rgba(255,255,255,.55);
font-weight: 600;
margin-top: 2px;
}
.tf-canvas-wrap{
flex: 1;
overflow-y: auto;
overflow-x: hidden;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 14px 8px;
background: #2a2a2a;
position: relative;
width: 100%;
box-sizing: border-box;
}
.tf-canvas-loader{
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
color: #fff;
z-index: 5;
}
.tf-canvas-loader-text{
font-size: 12px;
font-weight: 700;
color: rgba(255,255,255,.65);
}
.tf-canvas{
display: block;
max-width: 100%;
height: auto;
background: #fff;
border-radius: 6px;
box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.tf-reader-bottombar{
display: flex;
align-items: center;
gap: 6px;
padding: 10px 12px;
background: rgba(20,20,20,.92);
backdrop-filter: blur(12px);
border-top: 1px solid rgba(255,255,255,.08);
padding-bottom: calc(10px + var(--safe-bot, 0px));
}
.tf-reader-nav{
flex-shrink: 0;
width: 42px; height: 42px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #2fae93, #1d6f5e);
border: 0;
border-radius: 50%;
color: #fff;
cursor: pointer;
font-family: inherit;
transition: all .15s;
box-shadow: 0 3px 10px rgba(13,140,74,.30);
}
.tf-reader-nav:disabled{
background: rgba(255,255,255,.10);
color: rgba(255,255,255,.35);
box-shadow: none;
cursor: default;
}
.tf-reader-nav:not(:disabled):active{ transform: scale(.92); }
.tf-reader-page{
flex: 1;
text-align: center;
padding: 9px 8px;
background: rgba(255,255,255,.08);
border: 0;
border-radius: 999px;
color: #fff;
font-size: 13.5px;
font-weight: 800;
font-variant-numeric: tabular-nums;
cursor: pointer;
font-family: inherit;
letter-spacing: .3px;
transition: all .15s;
min-width: 0;
white-space: nowrap;
}
.tf-reader-page:active{ background: rgba(255,255,255,.16); }
.tf-reader-zoom, .tf-reader-bookmark-toggle{
flex-shrink: 0;
width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.08);
border: 0;
border-radius: 50%;
color: #fff;
cursor: pointer;
font-family: inherit;
transition: all .15s;
}
.tf-reader-zoom:active, .tf-reader-bookmark-toggle:active{ transform: scale(.92); background: rgba(255,255,255,.16); }
.tf-reader-bookmark-toggle.is-active{
background: linear-gradient(135deg, #fbe79e, #c9a961);
color: #1d6f5e;
}
/* Yer imi sheet */
.tf-bm-list{
display: flex;
flex-direction: column;
gap: 6px;
padding: 8px 16px 16px;
}
.tf-bm-row{
display: flex;
align-items: stretch;
gap: 6px;
background: #f8faf9;
border: 1px solid #e8efeb;
border-radius: 12px;
overflow: hidden;
}
.tf-bm-go{
flex: 1;
text-align: left;
padding: 11px 14px;
background: transparent;
border: 0;
cursor: pointer;
font-family: inherit;
transition: background .15s;
}
.tf-bm-go:active{ background: #eef2ef; }
.tf-bm-page{
font-size: 13px;
font-weight: 800;
color: #0a0a0a;
letter-spacing: -.1px;
}
.tf-bm-note{
font-size: 11.5px;
color: #64748b;
font-weight: 500;
margin-top: 2px;
}
.tf-bm-rm{
width: 40px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
border-left: 1px solid #e8efeb;
color: #94a3b8;
cursor: pointer;
font-family: inherit;
transition: all .15s;
}
.tf-bm-rm:active{ color: #dc2626; background: #fef2f2; }
/* === PDF CANVAS NAV OKLARI (sağ-sol) === */
.tf-canvas-arrow{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px; height: 64px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(20,20,20,.55);
border: 0;
border-radius: 12px;
color: #fff;
cursor: pointer;
font-family: inherit;
z-index: 10;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 4px 14px rgba(0,0,0,.35);
transition: all .15s;
opacity: .85;
}
.tf-canvas-arrow:hover{ opacity: 1; }
.tf-canvas-arrow:active{ transform: translateY(-50%) scale(.92); background: rgba(13,140,74,.85); }
.tf-canvas-arrow:disabled{
opacity: .25;
cursor: default;
pointer-events: none;
}
.tf-canvas-arrow-left{ left: 12px; }
.tf-canvas-arrow-right{ right: 12px; }
@media (max-width: 480px){
.tf-canvas-arrow{
width: 40px; height: 56px;
border-radius: 10px;
}
.tf-canvas-arrow-left{ left: 8px; }
.tf-canvas-arrow-right{ right: 8px; }
}
/* === SOSYAL POST - Gümüşpala logo + platform overlay === */
.ssm-post-platform-logo{
position: relative;
background: #fff !important;
padding: 2px;
border: 1px solid #e8efeb;
}
.ssm-post-platform-logo img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}
.ssm-post-platform-overlay{
position: absolute;
bottom: -3px;
right: -3px;
width: 18px; height: 18px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #fff;
border: 2px solid #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.20);
}
.ssm-post-platform-overlay svg{ width: 11px; height: 11px; }
/* === KİTAP HERO - kapak resmi yan yana === */
.tf-book-hero-with-cover .tf-book-content{
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 12px;
}
.tf-book-cover-wrap{
flex-shrink: 0;
width: 92px;
aspect-ratio: 3 / 4;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 8px 22px rgba(0,0,0,.40), 0 0 0 1px rgba(251,231,158,.20);
}
.tf-book-cover{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.tf-book-info{
flex: 1;
min-width: 0;
}
.tf-book-hero-with-cover .tf-book-stats{
margin-top: 10px;
display: flex;
}
.tf-book-hero-with-cover .tf-book-stat{
padding: 0 12px;
min-width: 0;
}
@media (max-width: 360px){
.tf-book-cover-wrap{ width: 78px; }
}
/* =====================================================================
* BAĞIŞ - PayTR KART FORMU
* ===================================================================== */
.bagis-kart-form{
display: flex;
flex-direction: column;
gap: 16px;
padding: 8px 16px 20px;
}
.bagis-kart-form-summary{
background: linear-gradient(135deg, #f0fdf4, #dcfce7);
border: 1px solid #bbf7d0;
border-radius: 14px;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.bagis-kart-form-summary-row{
display: flex;
justify-content: space-between;
align-items: center;
}
.bagis-kart-form-summary-key{
font-size: 12px;
font-weight: 700;
color: #166534;
letter-spacing: .2px;
}
.bagis-kart-form-summary-val{
font-size: 13.5px;
font-weight: 800;
color: #1d6f5e;
text-align: right;
letter-spacing: -.1px;
}
.bagis-kart-form-tutar{
font-size: 18px !important;
color: #1d6f5e;
}
.bagis-kart-form-fields{
display: flex;
flex-direction: column;
gap: 12px;
}
.bagis-kart-form-row{
display: flex;
flex-direction: column;
gap: 6px;
}
.bagis-kart-form-label{
font-size: 12px;
font-weight: 700;
color: #475569;
letter-spacing: .2px;
padding-left: 2px;
}
.bagis-kart-form-req{
color: #dc2626;
font-weight: 800;
}
.bagis-kart-form-input{
width: 100%;
padding: 12px 14px;
background: #f8faf9;
border: 1px solid #e2e8f0;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
color: #0a0a0a;
font-family: inherit;
transition: all .15s;
box-sizing: border-box;
-webkit-appearance: none;
}
.bagis-kart-form-input:focus{
outline: none;
border-color: #2fae93;
background: #fff;
box-shadow: 0 0 0 3px rgba(13,140,74,.12);
}
.bagis-kart-form-input::placeholder{
color: #94a3b8;
font-weight: 500;
}
.bagis-kart-form-secure{
display: flex;
align-items: flex-start;
gap: 8px;
padding: 10px 14px;
background: #eff6ff;
border: 1px solid #bfdbfe;
border-radius: 10px;
font-size: 11.5px;
color: #1e40af;
font-weight: 600;
line-height: 1.5;
}
.bagis-kart-form-secure svg{ flex-shrink: 0; margin-top: 1px; }
.bagis-kart-form-secure strong{ font-weight: 800; }
/* =====================================================================
* SOHBETLER v3.0 - PREMIUM
* ===================================================================== */
.view[data-view="sohbetler"]{
background: #f7f9f8 !important;
padding-bottom: calc(var(--tabbar-h, 64px) + var(--safe-bot, 0px) + 24px);
}
.sb-app{
display: flex;
flex-direction: column;
gap: 14px;
padding: 12px 14px 0;
}
/* === CHANNEL CARD === */
.sb-channel-card{
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: #fff;
border: 1px solid #e8efeb;
border-radius: 16px;
text-decoration: none;
color: inherit;
transition: all .15s;
box-shadow: 0 1px 3px rgba(0,0,0,.03);
}
.sb-channel-card:active{ transform: scale(.99); background: #f8faf9; }
.sb-channel-avatar{
flex-shrink: 0;
width: 44px; height: 44px;
border-radius: 50%;
overflow: hidden;
background: #fff;
border: 2px solid #2fae93;
padding: 2px;
}
.sb-channel-avatar img{
width: 100%; height: 100%;
object-fit: cover;
border-radius: 50%;
}
.sb-channel-info{ flex: 1; min-width: 0; }
.sb-channel-name{
font-size: 14.5px;
font-weight: 800;
color: #0a0a0a;
letter-spacing: -.2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sb-channel-handle{
font-size: 11.5px;
color: #64748b;
font-weight: 600;
margin-top: 2px;
}
.sb-channel-cta{
flex-shrink: 0;
width: 32px; height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #f1f5f9;
color: #475569;
}
/* === FEATURED HERO === */
.sb-featured{
display: block;
background: #fff;
border: 1px solid #e8efeb;
border-radius: 18px;
overflow: hidden;
cursor: pointer;
box-shadow: 0 4px 14px rgba(0,0,0,.06);
transition: all .2s;
border: 0;
padding: 0;
width: 100%;
text-align: left;
font-family: inherit;
}
.sb-featured:active{ transform: scale(.98); }
.sb-featured-thumb-wrap{
position: relative;
aspect-ratio: 16 / 9;
background: #1a1a1a;
overflow: hidden;
}
.sb-featured-thumb{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sb-featured-play{
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 64px; height: 64px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(13,140,74,.92);
color: #fff;
border-radius: 50%;
box-shadow: 0 6px 20px rgba(13,140,74,.40);
backdrop-filter: blur(4px);
}
.sb-featured-play svg{ margin-left: 4px; }
.sb-featured-badge{
position: absolute;
top: 12px; left: 12px;
padding: 4px 10px;
background: #dc2626;
color: #fff;
border-radius: 999px;
font-size: 10px;
font-weight: 800;
letter-spacing: .8px;
box-shadow: 0 2px 8px rgba(220,38,38,.40);
}
.sb-featured-duration{
position: absolute;
bottom: 10px; right: 10px;
padding: 3px 8px;
background: rgba(0,0,0,.85);
color: #fff;
border-radius: 6px;
font-size: 11.5px;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: -.1px;
}
.sb-featured-meta{
padding: 14px 16px;
}
.sb-featured-title{
font-size: 15px;
font-weight: 800;
color: #0a0a0a;
letter-spacing: -.2px;
line-height: 1.35;
margin-bottom: 6px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sb-featured-stats{
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.sb-stat-item{
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: #64748b;
font-weight: 600;
}
/* === SEARCH === */
.sb-search-wrap{
position: relative;
display: flex;
align-items: center;
}
.sb-search-icon{
position: absolute;
left: 14px;
color: #94a3b8;
pointer-events: none;
}
.sb-search-input{
width: 100%;
padding: 11px 40px 11px 38px;
background: #fff;
border: 1px solid #e8efeb;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
color: #0a0a0a;
font-family: inherit;
transition: all .15s;
box-sizing: border-box;
}
.sb-search-input:focus{
outline: 0;
border-color: #2fae93;
box-shadow: 0 0 0 3px rgba(13,140,74,.10);
}
.sb-search-input::placeholder{ color: #94a3b8; font-weight: 500; }
.sb-search-clear{
position: absolute;
right: 8px;
width: 28px; height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: #f1f5f9;
border: 0;
border-radius: 50%;
color: #64748b;
cursor: pointer;
font-family: inherit;
transition: all .15s;
}
.sb-search-clear:active{ transform: scale(.9); background: #e2e8f0; }
/* === TABS === */
.sb-tabs{
display: flex;
gap: 6px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: 2px 0 4px;
scrollbar-width: none;
}
.sb-tabs::-webkit-scrollbar{ display: none; }
.sb-tab{
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 14px;
background: #fff;
border: 1px solid #e8efeb;
border-radius: 999px;
color: #475569;
font-size: 12.5px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
letter-spacing: -.1px;
transition: all .15s;
white-space: nowrap;
}
.sb-tab:active{ transform: scale(.96); }
.sb-tab.is-active{
background: linear-gradient(135deg, #2fae93, #1d6f5e);
color: #fff;
border-color: transparent;
box-shadow: 0 3px 10px rgba(13,140,74,.25);
}
.sb-tab-badge{
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 18px;
padding: 0 6px;
background: rgba(0,0,0,.08);
border-radius: 999px;
font-size: 10.5px;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: #475569;
}
.sb-tab.is-active .sb-tab-badge{
background: rgba(255,255,255,.20);
color: #fff;
}
/* === LIST === */
.sb-list{
display: flex;
flex-direction: column;
gap: 8px;
}
.sb-row{
display: flex;
align-items: stretch;
gap: 10px;
background: #fff;
border: 1px solid #e8efeb;
border-radius: 14px;
overflow: hidden;
cursor: pointer;
font-family: inherit;
text-align: left;
border: 1px solid #e8efeb;
padding: 0;
width: 100%;
transition: all .15s;
}
.sb-row:active{ transform: scale(.99); background: #f8faf9; }
.sb-row-thumb-wrap{
position: relative;
flex-shrink: 0;
width: 130px;
aspect-ratio: 16 / 9;
background: #1a1a1a;
overflow: hidden;
}
.sb-row-thumb{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sb-row-play{
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 36px; height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(13,140,74,.92);
color: #fff;
border-radius: 50%;
box-shadow: 0 3px 10px rgba(13,140,74,.30);
opacity: 0;
transition: opacity .2s;
}
.sb-row:active .sb-row-play{ opacity: 1; }
.sb-row-play svg{ margin-left: 2px; }
.sb-row-duration{
position: absolute;
bottom: 5px; right: 5px;
padding: 2px 5px;
background: rgba(0,0,0,.85);
color: #fff;
border-radius: 4px;
font-size: 10.5px;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: -.1px;
}
.sb-row-short-badge{
position: absolute;
top: 5px; left: 5px;
padding: 2px 6px;
background: linear-gradient(135deg, #ec4899, #be185d);
color: #fff;
border-radius: 4px;
font-size: 9px;
font-weight: 800;
letter-spacing: .5px;
box-shadow: 0 2px 6px rgba(236,72,153,.30);
}
.sb-row-info{
flex: 1;
min-width: 0;
padding: 10px 12px 10px 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.sb-row-title{
font-size: 13.5px;
font-weight: 800;
color: #0a0a0a;
letter-spacing: -.2px;
line-height: 1.35;
margin-bottom: 4px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sb-row-meta{
font-size: 11.5px;
color: #64748b;
font-weight: 600;
display: flex;
gap: 4px;
align-items: center;
}
.sb-row-meta-dot{ opacity: .6; }
.sb-list-empty{
text-align: center;
padding: 40px 24px;
color: #94a3b8;
}
.sb-list-empty svg{ margin: 0 auto 10px; display: block; opacity: .5; }
.sb-list-empty-title{
font-size: 13px;
font-weight: 700;
color: #475569;
}
.sb-empty{
text-align: center;
padding: 80px 30px;
color: #94a3b8;
}
.sb-empty svg{ margin: 0 auto 14px; display: block; opacity: .55; }
.sb-empty-title{
font-size: 15px;
font-weight: 800;
color: #475569;
margin-bottom: 14px;
}
.sb-retry-btn{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 11px 22px;
background: linear-gradient(135deg, #2fae93, #1d6f5e);
color: #fff;
border: 0;
border-radius: 12px;
font-size: 13px;
font-weight: 800;
cursor: pointer;
font-family: inherit;
box-shadow: 0 4px 12px rgba(13,140,74,.25);
}
/* === PLAYER === */
.sb-player{
background: #f7f9f8;
}
.sb-player-head{
position: sticky;
top: 0;
z-index: 10;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: rgba(255,255,255,.92);
backdrop-filter: blur(12px);
border-bottom: 1px solid #e8efeb;
}
.sb-player-back, .sb-player-yt{
flex-shrink: 0;
width: 38px; height: 38px;
display: flex;
align-items: center;
justify-content: center;
background: #f1f5f9;
border: 0;
border-radius: 50%;
color: #475569;
cursor: pointer;
font-family: inherit;
text-decoration: none;
transition: all .15s;
}
.sb-player-back:active, .sb-player-yt:active{ transform: scale(.92); background: #e2e8f0; }
.sb-player-yt{
background: #fef2f2;
color: #dc2626;
}
.sb-player-yt:active{ background: #fee2e2; }
.sb-player-head-title{
flex: 1;
text-align: center;
font-size: 14px;
font-weight: 800;
color: #0a0a0a;
letter-spacing: -.2px;
}
.sb-player-iframe-wrap{
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
}
.sb-player-iframe{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.sb-player-meta{
padding: 16px 16px 12px;
background: #fff;
border-bottom: 8px solid #f1f5f9;
}
.sb-player-title{
font-size: 17px;
font-weight: 800;
color: #0a0a0a;
letter-spacing: -.3px;
line-height: 1.35;
margin: 0 0 10px;
}
.sb-player-stats{
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 1px solid #f1f5f9;
}
.sb-player-stat{
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: #475569;
font-weight: 700;
}
.sb-player-stat svg{ color: #2fae93; flex-shrink: 0; }
.sb-player-desc{
font-size: 13px;
color: #475569;
line-height: 1.55;
font-weight: 500;
white-space: pre-wrap;
margin-bottom: 14px;
max-height: 120px;
overflow-y: auto;
}
.sb-player-actions{
display: flex;
gap: 8px;
}
.sb-player-action{
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 14px;
background: #f1f5f9;
border: 0;
border-radius: 10px;
color: #475569;
font-size: 12.5px;
font-weight: 800;
cursor: pointer;
font-family: inherit;
text-decoration: none;
transition: all .15s;
}
.sb-player-action:active{ transform: scale(.97); background: #e2e8f0; }
.sb-player-action-yt{
background: linear-gradient(135deg, #dc2626, #991b1b);
color: #fff;
box-shadow: 0 3px 10px rgba(220,38,38,.25);
}
.sb-player-action-yt:active{ transform: scale(.97); }
/* Related */
.sb-related{
padding: 14px 14px 24px;
}
.sb-related-title{
font-size: 12px;
font-weight: 800;
color: #94a3b8;
letter-spacing: .8px;
text-transform: uppercase;
margin-bottom: 10px;
padding: 0 4px;
}
.sb-related-list{
display: flex;
flex-direction: column;
gap: 8px;
}
.sb-related-row{
display: flex;
align-items: stretch;
gap: 10px;
background: #fff;
border: 1px solid #e8efeb;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
font-family: inherit;
text-align: left;
padding: 0;
width: 100%;
transition: all .15s;
}
.sb-related-row:active{ transform: scale(.99); background: #f8faf9; }
.sb-related-thumb-wrap{
position: relative;
flex-shrink: 0;
width: 110px;
aspect-ratio: 16 / 9;
background: #1a1a1a;
overflow: hidden;
}
.sb-related-thumb{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sb-related-duration{
position: absolute;
bottom: 4px; right: 4px;
padding: 1.5px 4px;
background: rgba(0,0,0,.85);
color: #fff;
border-radius: 3px;
font-size: 10px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.sb-related-info{
flex: 1;
min-width: 0;
padding: 8px 10px 8px 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.sb-related-row-title{
font-size: 12.5px;
font-weight: 800;
color: #0a0a0a;
letter-spacing: -.2px;
line-height: 1.35;
margin-bottom: 3px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sb-related-row-meta{
font-size: 10.5px;
color: #64748b;
font-weight: 600;
}
/* =====================================================================
* MANEVÎ YOLCULUK v3.0 - Tasavvuf-i Ehl-i Sünnet düzeyi
* Renk paleti: Mahmûd Efendi yeşili + altın işleme + gül kurusu
* ===================================================================== */
.view[data-view="motivation"]{
background: #f7f9f8 !important;
padding-bottom: calc(var(--tabbar-h, 64px) + var(--safe-bot, 0px) + 24px);
}
.ji-app{
display: flex;
flex-direction: column;
gap: 14px;
padding: 12px 14px 0;
}
.ji-loading{
display: flex; flex-direction: column; align-items: center; gap: 12px;
padding: 80px 24px; color: #64748b;
}
.ji-loading-text{
font-size: 13px;
font-weight: 700;
color: #475569;
}
/* === ONBOARDING HERO === */
.ji-onboard-hero{
position: relative;
border-radius: 22px;
overflow: hidden;
padding: 28px 24px 24px;
color: #fff;
text-align: center;
isolation: isolate;
box-shadow: 0 12px 36px rgba(6,77,40,.32);
margin-bottom: 4px;
}
.ji-onboard-bg{
position: absolute; inset: 0; z-index: -2;
background:
linear-gradient(135deg, #1d6f5e 0%, #2fae93 50%, #1d6f5e 100%),
radial-gradient(circle at 80% 20%, rgba(251,231,158,.30), transparent 50%);
}
.ji-onboard-glow{
position: absolute;
top: -60px; right: -60px;
width: 220px; height: 220px;
background: radial-gradient(circle, rgba(251,231,158,.40), transparent 65%);
border-radius: 50%;
pointer-events: none;
z-index: -1;
animation: jiGlow 8s ease-in-out infinite;
}
@keyframes jiGlow {
0%,100% { transform: scale(1); opacity: .85; }
50% { transform: scale(1.18); opacity: 1; }
}
.ji-onboard-content{ position: relative; }
.ji-onboard-emblem{
display: inline-flex;
width: 84px; height: 84px;
align-items: center;
justify-content: center;
background: rgba(255,255,255,.10);
border: 1px solid rgba(251,231,158,.30);
border-radius: 50%;
color: #fbe79e;
margin-bottom: 14px;
backdrop-filter: blur(6px);
}
.ji-onboard-title{
font-size: 22px;
font-weight: 800;
letter-spacing: -.4px;
margin: 0 0 8px;
line-height: 1.25;
}
.ji-onboard-sub{
font-size: 13.5px;
opacity: .92;
font-weight: 500;
line-height: 1.5;
margin: 0;
}
/* === HİKMET (Hadis/Ayet) KARTI === */
.ji-hikmet-card{
position: relative;
background: linear-gradient(135deg, #fefcf3 0%, #fbe79e 100%);
border: 1px solid #c9a961;
border-radius: 16px;
padding: 16px 18px 14px;
box-shadow: 0 4px 14px rgba(122,94,26,.10);
}
.ji-hikmet-tag{
display: inline-block;
padding: 3px 10px;
background: rgba(6,77,40,.92);
color: #fbe79e;
border-radius: 999px;
font-size: 9.5px;
font-weight: 800;
letter-spacing: 1px;
margin-bottom: 10px;
}
.ji-hikmet-metin{
font-size: 14px;
color: #4a3a18;
font-weight: 600;
font-style: italic;
line-height: 1.6;
margin-bottom: 8px;
letter-spacing: -.1px;
}
.ji-hikmet-kaynak{
font-size: 11.5px;
color: #8a6f2a;
font-weight: 700;
text-align: right;
letter-spacing: -.1px;
}
/* === SECTION TITLE === */
.ji-section-title{
font-size: 13px;
font-weight: 800;
color: #1d6f5e;
letter-spacing: -.2px;
padding: 8px 4px 4px;
margin-top: 6px;
border-top: 1px dashed #d4e5d9;
padding-top: 14px;
}
.ji-section-title-sm{
font-size: 10.5px;
font-weight: 800;
color: #94a3b8;
letter-spacing: 1px;
padding: 8px 4px 4px;
margin-top: 4px;
}
/* === PROFİL SEÇİM KARTLARI === */
.ji-profil-card{
display: flex;
align-items: stretch;
gap: 14px;
padding: 16px 18px;
background: #fff;
border: 1px solid #e8efeb;
border-radius: 16px;
cursor: pointer;
font-family: inherit;
text-align: left;
width: 100%;
transition: all .2s;
box-shadow: 0 1px 3px rgba(0,0,0,.03);
}
.ji-profil-card:active{ transform: scale(.99); }
.ji-profil-card:hover{ border-color: #2fae93; box-shadow: 0 6px 18px rgba(13,140,74,.12); }
.ji-profil-card-1 .ji-profil-icon{ background: linear-gradient(135deg, #d1fae5, #6ee7b7); color: #1d6f5e; }
.ji-profil-card-2 .ji-profil-icon{ background: linear-gradient(135deg, #bbf7d0, #34d399); color: #1d6f5e; }
.ji-profil-card-3 .ji-profil-icon{ background: linear-gradient(135deg, #2fae93, #1d6f5e); color: #fbe79e; }
.ji-profil-icon{
flex-shrink: 0;
width: 64px; height: 64px;
display: flex; align-items: center; justify-content: center;
border-radius: 14px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.30);
}
.ji-profil-info{ flex: 1; min-width: 0; }
.ji-profil-baslik{
font-size: 15px;
font-weight: 800;
color: #0a0a0a;
letter-spacing: -.2px;
margin-bottom: 4px;
}
.ji-profil-aciklama{
font-size: 12.5px;
color: #475569;
font-weight: 500;
line-height: 1.45;
margin-bottom: 8px;
}
.ji-profil-ozellik{
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
background: #f1f5f9;
border-radius: 999px;
font-size: 11px;
color: #475569;
font-weight: 700;
}
.ji-profil-ozellik svg{ flex-shrink: 0; color: #2fae93; }
.ji-onboard-footer{
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 11.5px;
color: #94a3b8;
font-weight: 600;
padding: 8px 0 4px;
}
/* === MERTEBE (Level) KARTI === */
.ji-mertebe-card{
position: relative;
border-radius: 22px;
overflow: hidden;
padding: 22px 24px 20px;
color: #fff;
isolation: isolate;
box-shadow: 0 12px 36px rgba(6,77,40,.30);
}
.ji-mertebe-bg{
position: absolute; inset: 0; z-index: -2;
background:
linear-gradient(135deg, #1d6f5e 0%, #0a6638 50%, #1d6f5e 100%),
repeating-linear-gradient(45deg, transparent 0, transparent 30px, rgba(0,0,0,.04) 30px, rgba(0,0,0,.04) 31px);
}
.ji-mertebe-glow{
position: absolute;
top: -50px; right: -50px;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(251,231,158,.30), transparent 65%);
border-radius: 50%;
pointer-events: none;
z-index: -1;
}
.ji-mertebe-content{ position: relative; }
.ji-mertebe-tag{
display: inline-block;
padding: 4px 12px;
background: rgba(251,231,158,.18);
border: 1px solid rgba(251,231,158,.34);
color: #fbe79e;
border-radius: 999px;
font-size: 10px;
font-weight: 800;
letter-spacing: 1.2px;
margin-bottom: 10px;
}
.ji-mertebe-ad{
font-size: 26px;
font-weight: 800;
letter-spacing: -.4px;
line-height: 1.2;
margin-bottom: 6px;
}
.ji-mertebe-ozet{
font-size: 12.5px;
opacity: .85;
font-weight: 600;
margin-bottom: 18px;
}
.ji-mertebe-bar-wrap{
display: flex;
flex-direction: column;
gap: 6px;
}
.ji-mertebe-bar{
height: 8px;
background: rgba(255,255,255,.18);
border-radius: 999px;
overflow: hidden;
position: relative;
}
.ji-mertebe-bar-fill{
height: 100%;
background: linear-gradient(90deg, #fbe79e, #f5c842);
border-radius: 999px;
transition: width .6s cubic-bezier(.4,0,.2,1);
box-shadow: 0 0 10px rgba(251,231,158,.50);
}
.ji-mertebe-bar-text{
display: flex;
justify-content: space-between;
font-size: 10.5px;
font-weight: 700;
opacity: .85;
}
.ji-mertebe-bar-num{
color: #fbe79e;
font-variant-numeric: tabular-nums;
letter-spacing: -.2px;
}
/* === İSTATİSTİK KARTLARI === */
.ji-stats-row{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.ji-stat-card{
background: #fff;
border: 1px solid #e8efeb;
border-radius: 14px;
padding: 14px 8px 12px;
text-align: center;
box-shadow: 0 1px 2px rgba(0,0,0,.02);
}
.ji-stat-icon{
display: inline-flex;
width: 40px; height: 40px;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f0fdf4, #d1fae5);
border-radius: 50%;
color: #1d6f5e;
margin-bottom: 6px;
}
.ji-stat-num{
font-size: 22px;
font-weight: 800;
color: #1d6f5e;
letter-spacing: -.4px;
font-variant-numeric: tabular-nums;
line-height: 1;
margin-bottom: 3px;
}
.ji-stat-label{
font-size: 10.5px;
font-weight: 700;
color: #475569;
letter-spacing: -.1px;
}
/* === MİKRO HİZMET KARTI === */
.ji-mikro-card{
display: flex;
align-items: center;
gap: 14px;
background: #fff;
border: 2px solid #fbe79e;
border-radius: 16px;
padding: 14px 16px;
box-shadow: 0 4px 14px rgba(201,169,97,.15);
}
.ji-mikro-card.is-done{
background: #f0fdf4;
border-color: #10b981;
box-shadow: 0 4px 14px rgba(16,185,129,.15);
}
.ji-mikro-icon{
flex-shrink: 0;
width: 48px; height: 48px;
display: flex; align-items: center; justify-content: center;
border-radius: 14px;
color: #fff;
box-shadow: 0 4px 10px rgba(0,0,0,.10);
}
.ji-mikro-info{ flex: 1; min-width: 0; }
.ji-mikro-tag{
font-size: 9.5px;
font-weight: 800;
letter-spacing: 1px;
color: #c9a961;
margin-bottom: 2px;
}
.ji-mikro-card.is-done .ji-mikro-tag{ color: #10b981; }
.ji-mikro-ad{
font-size: 14.5px;
font-weight: 800;
color: #0a0a0a;
letter-spacing: -.2px;
margin-bottom: 2px;
}
.ji-mikro-aciklama{
font-size: 11.5px;
color: #64748b;
font-weight: 600;
}
.ji-mikro-btn{
flex-shrink: 0;
padding: 9px 14px;
background: linear-gradient(135deg, #c9a961, #92763a);
color: #fff;
border: 0;
border-radius: 10px;
font-size: 12px;
font-weight: 800;
cursor: pointer;
font-family: inherit;
letter-spacing: -.1px;
box-shadow: 0 3px 10px rgba(146,118,58,.30);
transition: all .15s;
}
.ji-mikro-btn:active{ transform: scale(.95); }
/* === SÜLÛK (Heatmap) KARTI === */
.ji-suluk-card,
.ji-sukur-card,
.ji-bugun-card{
background: #fff;
border: 1px solid #e8efeb;
border-radius: 16px;
padding: 16px 18px;
box-shadow: 0 1px 3px rgba(0,0,0,.03);
}
.ji-card-header{ margin-bottom: 12px; }
.ji-card-title{
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13.5px;
font-weight: 800;
color: #1d6f5e;
letter-spacing: -.2px;
margin-bottom: 2px;
}
.ji-card-title svg{ color: #2fae93; flex-shrink: 0; }
.ji-card-sub{
font-size: 11.5px;
color: #64748b;
font-weight: 600;
}
.ji-heatmap{
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
}
.ji-heatmap-cell{
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.ji-heatmap-dot{
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 8px;
background: #f1f5f9;
transition: all .2s;
}
.ji-heatmap-cell[data-level="0"] .ji-heatmap-dot{ background: #f1f5f9; }
.ji-heatmap-cell[data-level="1"] .ji-heatmap-dot{ background: #d1fae5; }
.ji-heatmap-cell[data-level="2"] .ji-heatmap-dot{ background: #34d399; }
.ji-heatmap-cell[data-level="3"] .ji-heatmap-dot{
background: linear-gradient(135deg, #2fae93, #1d6f5e);
box-shadow: 0 2px 8px rgba(13,140,74,.30);
}
.ji-heatmap-day{
font-size: 9.5px;
font-weight: 700;
color: #94a3b8;
letter-spacing: -.2px;
}
/* === ŞÜKÜR KARTI === */
.ji-sukur-list{
display: flex;
flex-direction: column;
gap: 8px;
}
.ji-sukur-item{
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
background: linear-gradient(135deg, #fdf2f8, #fce7f3);
border-radius: 10px;
border-left: 3px solid #ec4899;
}
.ji-sukur-bullet{
flex-shrink: 0;
font-size: 14px;
color: #ec4899;
margin-top: 1px;
line-height: 1;
}
.ji-sukur-text{
font-size: 13px;
color: #831843;
font-weight: 600;
line-height: 1.45;
}
/* === BUGÜN YAPILAN İBADETLER === */
.ji-bugun-list{
display: flex;
flex-direction: column;
gap: 8px;
}
.ji-bugun-item{
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: 10px;
}
.ji-bugun-icon{
flex-shrink: 0;
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
background: #fff;
border-radius: 8px;
color: #1d6f5e;
}
.ji-bugun-text{
flex: 1;
font-size: 13px;
font-weight: 700;
color: #1d6f5e;
letter-spacing: -.1px;
}
.ji-bugun-tik{
flex-shrink: 0;
color: #10b981;
}
.ji-bos-card{
text-align: center;
padding: 28px 20px;
background: #fff;
border: 1px dashed #cbd5e1;
border-radius: 16px;
color: #94a3b8;
}
.ji-bos-icon{
display: inline-flex;
width: 56px; height: 56px;
align-items: center;
justify-content: center;
background: #f1f5f9;
border-radius: 50%;
color: #64748b;
margin-bottom: 10px;
}
.ji-bos-baslik{
font-size: 14px;
font-weight: 800;
color: #475569;
margin-bottom: 4px;
}
.ji-bos-sub{
font-size: 11.5px;
color: #94a3b8;
font-weight: 600;
font-style: italic;
}
/* === HIZLI KAYIT GRID === */
.ji-quick-grid{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.ji-quick-btn{
display: flex;
align-items: center;
gap: 8px;
padding: 13px 14px;
background: #fff;
border: 1px solid #e8efeb;
border-radius: 12px;
cursor: pointer;
font-family: inherit;
font-size: 12.5px;
font-weight: 800;
color: #1d6f5e;
letter-spacing: -.1px;
text-align: left;
transition: all .15s;
box-shadow: 0 1px 3px rgba(0,0,0,.03);
}
.ji-quick-btn:active{ transform: scale(.97); background: #f0fdf4; }
.ji-quick-btn:hover{ border-color: #2fae93; }
.ji-quick-btn svg{ color: #2fae93; flex-shrink: 0; }
.ji-quick-btn.is-loading{ opacity: .55; pointer-events: none; }
/* === ŞÜKÜR BAŞLAT BUTONU === */
.ji-sukur-baslat{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 20px;
background: linear-gradient(135deg, #ec4899, #be185d);
color: #fff;
border: 0;
border-radius: 14px;
font-size: 13.5px;
font-weight: 800;
cursor: pointer;
font-family: inherit;
letter-spacing: -.1px;
box-shadow: 0 6px 18px rgba(236,72,153,.28);
transition: all .15s;
width: 100%;
margin-top: 4px;
}
.ji-sukur-baslat:active{ transform: scale(.98); }
.ji-profil-degis{
background: transparent;
border: 0;
padding: 12px;
font-size: 12px;
font-weight: 700;
color: #94a3b8;
cursor: pointer;
font-family: inherit;
text-decoration: underline;
text-underline-offset: 3px;
}
.ji-footer-dua{
text-align: center;
font-size: 11.5px;
color: #c9a961;
font-weight: 700;
font-style: italic;
padding: 6px 0 12px;
letter-spacing: -.1px;
}
/* === ŞÜKÜR FORM SHEET === */
.ji-sukur-form{
padding: 6px 16px 18px;
}
.ji-sukur-form-hint{
display: flex;
align-items: flex-start;
gap: 8px;
padding: 12px 14px;
background: #fdf2f8;
border: 1px solid #fbcfe8;
border-radius: 12px;
font-size: 12.5px;
color: #831843;
font-weight: 600;
line-height: 1.45;
margin-bottom: 16px;
}
.ji-sukur-form-hint svg{ color: #ec4899; flex-shrink: 0; margin-top: 1px; }
.ji-sukur-label{
display: block;
font-size: 11.5px;
font-weight: 800;
color: #475569;
letter-spacing: .3px;
text-transform: uppercase;
margin-bottom: 6px;
margin-top: 12px;
}
.ji-sukur-label:first-of-type{ margin-top: 0; }
.ji-sukur-input{
width: 100%;
padding: 12px 14px;
background: #fff;
border: 1px solid #e8efeb;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
color: #0a0a0a;
font-family: inherit;
transition: all .15s;
box-sizing: border-box;
}
.ji-sukur-input:focus{
outline: 0;
border-color: #ec4899;
box-shadow: 0 0 0 3px rgba(236,72,153,.10);
}
.ji-sukur-input::placeholder{ color: #94a3b8; font-weight: 500; font-style: italic; }
.ji-sukur-submit{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 13px 20px;
background: linear-gradient(135deg, #ec4899, #be185d);
color: #fff;
border: 0;
border-radius: 12px;
font-size: 13.5px;
font-weight: 800;
cursor: pointer;
font-family: inherit;
letter-spacing: -.1px;
box-shadow: 0 6px 18px rgba(236,72,153,.28);
width: 100%;
margin-top: 18px;
}
.ji-sukur-submit:active{ transform: scale(.98); }
/* === EMPTY === */
.ji-empty{
text-align: center;
padding: 80px 30px;
color: #94a3b8;
}
.ji-empty svg{ margin: 0 auto 14px; display: block; opacity: .55; }
.ji-empty-title{
font-size: 14px;
font-weight: 800;
color: #475569;
margin-bottom: 14px;
}
.ji-retry-btn{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 11px 22px;
background: linear-gradient(135deg, #2fae93, #1d6f5e);
color: #fff;
border: 0;
border-radius: 12px;
font-size: 13px;
font-weight: 800;
cursor: pointer;
font-family: inherit;
box-shadow: 0 4px 12px rgba(13,140,74,.25);
}
/* =====================================================================
* ATVÂR-I SEB'A — 7 NEFİS MERTEBESİ
* Halvetiyye / Sünbül Sinan / Sofyalı Bâlî / Mahmûd Efendi geleneği
* ===================================================================== */
/* ====== Mertebe Kartı (dinamik renk: --m1, --m2 değişkenleri) ====== */
.ji-mertebe-card{
position: relative;
display: block;
width: 100%;
border: 0;
padding: 22px 22px 18px;
border-radius: 22px;
overflow: hidden;
color: #fff;
cursor: pointer;
font-family: inherit;
text-align: left;
isolation: isolate;
box-shadow: 0 12px 36px rgba(0,0,0,.22);
transition: all .2s;
}
.ji-mertebe-card:active{ transform: scale(.99); }
.ji-mertebe-card .ji-mertebe-bg{
position: absolute; inset: 0; z-index: -2;
background:
linear-gradient(135deg, var(--m1, #1d6f5e) 0%, var(--m2, #2fae93) 100%),
repeating-linear-gradient(45deg, transparent 0, transparent 30px, rgba(0,0,0,.05) 30px, rgba(0,0,0,.05) 31px);
}
.ji-mertebe-card .ji-mertebe-glow{
position: absolute;
top: -40px; right: -40px;
width: 180px; height: 180px;
background: radial-gradient(circle, rgba(251,231,158,.32), transparent 65%);
border-radius: 50%;
pointer-events: none;
z-index: -1;
animation: jiGlow 8s ease-in-out infinite;
}
.ji-mertebe-tag{
display: inline-block;
padding: 4px 11px;
background: rgba(251,231,158,.18);
border: 1px solid rgba(251,231,158,.34);
color: #fbe79e;
border-radius: 999px;
font-size: 9.5px;
font-weight: 800;
letter-spacing: 1.2px;
margin-bottom: 12px;
}
.ji-mertebe-ad{
font-size: 26px;
font-weight: 800;
letter-spacing: -.4px;
line-height: 1.15;
margin-bottom: 4px;
}
.ji-mertebe-ozet{
font-size: 12.5px;
opacity: .88;
font-weight: 600;
margin-bottom: 16px;
letter-spacing: -.1px;
}
/* Mertebe zikri — küçük altın kart */
.ji-mertebe-zikir{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 14px;
background: rgba(251,231,158,.14);
border: 1px solid rgba(251,231,158,.28);
border-radius: 12px;
margin-bottom: 16px;
}
.ji-mertebe-zikir-tag{
font-size: 9.5px;
font-weight: 800;
letter-spacing: 1px;
color: rgba(251,231,158,.85);
}
.ji-mertebe-zikir-metin{
font-size: 17px;
font-weight: 800;
color: #fbe79e;
letter-spacing: -.3px;
}
.ji-mertebe-bar-wrap{
display: flex;
flex-direction: column;
gap: 5px;
}
.ji-mertebe-bar{
height: 7px;
background: rgba(255,255,255,.18);
border-radius: 999px;
overflow: hidden;
}
.ji-mertebe-bar-fill{
height: 100%;
background: linear-gradient(90deg, #fbe79e, #f5c842);
border-radius: 999px;
transition: width .6s cubic-bezier(.4,0,.2,1);
box-shadow: 0 0 10px rgba(251,231,158,.50);
}
.ji-mertebe-bar-text{
display: flex;
justify-content: space-between;
font-size: 10px;
font-weight: 700;
opacity: .85;
}
.ji-mertebe-bar-num{
color: #fbe79e;
font-variant-numeric: tabular-nums;
letter-spacing: -.2px;
}
.ji-mertebe-bar-final{
flex-direction: row;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 11.5px;
font-weight: 800;
letter-spacing: .5px;
color: #fbe79e;
padding: 4px 0;
}
.ji-mertebe-detay-cta{
display: flex;
align-items: center;
justify-content: flex-end;
gap: 5px;
margin-top: 10px;
font-size: 10.5px;
font-weight: 700;
color: rgba(251,231,158,.75);
letter-spacing: .3px;
}
/* ====== Yol Haritası — 7 mertebe listesi ====== */
.ji-yol-card{
background: #fff;
border: 1px solid #e8efeb;
border-radius: 16px;
padding: 16px 18px 14px;
box-shadow: 0 1px 3px rgba(0,0,0,.03);
}
.ji-yol-list{
display: flex;
flex-direction: column;
gap: 0;
position: relative;
}
.ji-yol-list::before{
content: '';
position: absolute;
left: 16px;
top: 16px;
bottom: 16px;
width: 2px;
background: repeating-linear-gradient(to bottom, #cbd5e1 0, #cbd5e1 4px, transparent 4px, transparent 8px);
z-index: 0;
}
.ji-yol-item{
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 8px;
background: transparent;
border: 0;
border-radius: 10px;
cursor: pointer;
font-family: inherit;
text-align: left;
width: 100%;
transition: all .15s;
}
.ji-yol-item:active{ background: #f8faf9; transform: scale(.99); }
.ji-yol-no{
flex-shrink: 0;
width: 32px; height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #f1f5f9;
color: #94a3b8;
font-size: 13px;
font-weight: 800;
border: 2px solid #fff;
box-shadow: 0 0 0 1px #e8efeb;
transition: all .2s;
}
.ji-yol-item.is-gecildi .ji-yol-no{
background: linear-gradient(135deg, #10b981, #059669);
color: #fff;
box-shadow: 0 2px 8px rgba(16,185,129,.30), 0 0 0 1px #fff;
border-color: #fff;
}
.ji-yol-item.is-mevcut .ji-yol-no{
background: linear-gradient(135deg, var(--m1, #1d6f5e), var(--m2, #2fae93));
color: #fbe79e;
box-shadow: 0 4px 12px rgba(0,0,0,.18), 0 0 0 3px rgba(251,231,158,.30);
border-color: #fbe79e;
transform: scale(1.08);
}
.ji-yol-info{ flex: 1; min-width: 0; }
.ji-yol-ad{
font-size: 13.5px;
font-weight: 800;
color: #0a0a0a;
letter-spacing: -.2px;
line-height: 1.2;
}
.ji-yol-item.is-gelecek .ji-yol-ad{ color: #94a3b8; }
.ji-yol-item.is-mevcut .ji-yol-ad{ color: #1d6f5e; }
.ji-yol-turkce{
font-size: 11px;
color: #64748b;
font-weight: 600;
margin-top: 1px;
}
.ji-yol-item.is-gelecek .ji-yol-turkce{ color: #cbd5e1; }
.ji-yol-badge{
flex-shrink: 0;
padding: 3px 8px;
background: linear-gradient(135deg, #fbe79e, #c9a961);
color: #4a3a18;
border-radius: 999px;
font-size: 9px;
font-weight: 800;
letter-spacing: 1px;
box-shadow: 0 2px 6px rgba(201,169,97,.30);
}
/* ====== Mertebe Detay Sheet ====== */
.ji-mert-detay{
margin: -6px -16px -16px;
}
.ji-mert-detay-hero{
position: relative;
padding: 26px 24px 22px;
color: #fff;
text-align: center;
overflow: hidden;
}
.ji-mert-detay-hero::after{
content: '';
position: absolute;
top: -40px; right: -40px;
width: 160px; height: 160px;
background: radial-gradient(circle, rgba(251,231,158,.30), transparent 65%);
border-radius: 50%;
pointer-events: none;
}
.ji-mert-detay-no{
display: inline-block;
padding: 4px 12px;
background: rgba(251,231,158,.18);
border: 1px solid rgba(251,231,158,.34);
color: #fbe79e;
border-radius: 999px;
font-size: 10px;
font-weight: 800;
letter-spacing: 1.2px;
margin-bottom: 12px;
}
.ji-mert-detay-ad{
font-size: 26px;
font-weight: 800;
letter-spacing: -.4px;
line-height: 1.15;
margin-bottom: 4px;
}
.ji-mert-detay-turkce{
font-size: 13px;
font-weight: 600;
opacity: .92;
}
.ji-mert-detay-body{
padding: 22px 20px 4px;
background: #fff;
}
.ji-mert-bolum{
margin-bottom: 22px;
}
.ji-mert-bolum:last-child{ margin-bottom: 6px; }
.ji-mert-bolum-tag{
font-size: 10px;
font-weight: 800;
letter-spacing: 1.4px;
color: #94a3b8;
margin-bottom: 8px;
}
.ji-mert-bolum-metin{
font-size: 14px;
color: #475569;
font-weight: 600;
line-height: 1.55;
letter-spacing: -.1px;
}
/* Âyet kartı */
.ji-mert-ayet-card{
background: linear-gradient(135deg, #fefcf3, #fbe79e);
border: 1px solid #c9a961;
border-radius: 14px;
padding: 14px 16px;
}
.ji-mert-ayet-meal{
font-size: 14px;
font-weight: 600;
color: #4a3a18;
font-style: italic;
line-height: 1.55;
margin-bottom: 6px;
letter-spacing: -.1px;
}
.ji-mert-ayet-kaynak{
font-size: 11.5px;
color: #8a6f2a;
font-weight: 800;
text-align: right;
}
/* Zikir kartı (mertebe rengiyle) */
.ji-mert-zikir-card{
border-radius: 16px;
padding: 22px 20px;
text-align: center;
color: #fff;
box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
.ji-mert-zikir-arabic{
font-size: 32px;
font-weight: 800;
color: #fbe79e;
letter-spacing: -.3px;
margin-bottom: 8px;
text-shadow: 0 2px 12px rgba(0,0,0,.20);
}
.ji-mert-zikir-aciklama{
font-size: 11.5px;
font-weight: 600;
opacity: .85;
letter-spacing: -.1px;
}
/* Hâl listesi */
.ji-mert-hal-list{
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.ji-mert-hal-item{
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
color: #1d6f5e;
}
.ji-mert-hal-item svg{ color: #10b981; flex-shrink: 0; }
.ji-mert-detay-footer{
text-align: center;
font-size: 11.5px;
color: #c9a961;
font-weight: 700;
font-style: italic;
padding: 4px 16px 18px;
letter-spacing: -.1px;
background: #fff;
}
/* =====================================================================
* BAĞIŞ TEŞVİK BUBBLE
* Sağ-alt veya sol-alt'tan kayarak çıkar, 4sn sonra kaybolur
* ===================================================================== */
.bgb-bubble{
position: fixed;
bottom: calc(var(--tabbar-h, 64px) + var(--safe-bot, 0px) + 16px);
z-index: 998;
width: calc(100% - 28px);
max-width: 340px;
padding: 14px 38px 14px 14px;
background: #fff;
color: #0a0a0a;
border-radius: 16px;
box-shadow: 0 12px 32px rgba(6,77,40,.18), 0 4px 12px rgba(0,0,0,.08);
border: 1px solid rgba(13,140,74,.14);
cursor: pointer;
transition: transform .35s cubic-bezier(.4,0,.2,1),
opacity .35s cubic-bezier(.4,0,.2,1);
overflow: hidden;
isolation: isolate;
pointer-events: auto;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.bgb-bubble.bgb-sag{
right: 14px;
transform: translateX(calc(100% + 30px));
opacity: 0;
}
.bgb-bubble.bgb-sol{
left: 14px;
transform: translateX(calc(-100% - 30px));
opacity: 0;
}
.bgb-bubble.is-show{
transform: translateX(0);
opacity: 1;
}
.bgb-bubble.is-leaving.bgb-sag{
transform: translateX(calc(100% + 30px));
opacity: 0;
}
.bgb-bubble.is-leaving.bgb-sol{
transform: translateX(calc(-100% - 30px));
opacity: 0;
}
.bgb-bubble:active{
transform: translateX(0) scale(.98);
box-shadow: 0 6px 18px rgba(6,77,40,.22);
}
.bgb-bg{
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(135deg, rgba(13,140,74,.06) 0%, rgba(251,231,158,.10) 100%);
border-radius: 16px;
pointer-events: none;
}
.bgb-close{
position: absolute;
top: 8px;
right: 8px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: #f1f5f9;
border: 0;
border-radius: 50%;
color: #64748b;
cursor: pointer;
font-family: inherit;
z-index: 2;
padding: 0;
transition: all .15s;
}
.bgb-close:active{ transform: scale(.85); background: #e2e8f0; }
.bgb-icon{
position: absolute;
top: 14px;
left: 14px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #2fae93, #1d6f5e);
color: #fff;
border-radius: 10px;
box-shadow: 0 3px 8px rgba(13,140,74,.30);
}
.bgb-content{
margin-left: 46px;
margin-bottom: 8px;
padding-right: 4px;
}
.bgb-title{
font-size: 13px;
font-weight: 800;
color: #1d6f5e;
letter-spacing: -.2px;
margin-bottom: 4px;
}
.bgb-metin{
font-size: 12.5px;
color: #334155;
font-weight: 600;
font-style: italic;
line-height: 1.45;
margin-bottom: 4px;
letter-spacing: -.1px;
}
.bgb-kaynak{
font-size: 10.5px;
color: #94a3b8;
font-weight: 700;
letter-spacing: -.1px;
}
.bgb-cta{
margin-left: 46px;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 10px 5px 12px;
background: linear-gradient(135deg, #2fae93, #1d6f5e);
color: #fff;
border-radius: 999px;
font-size: 11.5px;
font-weight: 800;
letter-spacing: -.1px;
box-shadow: 0 3px 8px rgba(13,140,74,.25);
}
.bgb-cta svg{ flex-shrink: 0; }
.bgb-progress{
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 100%;
background: linear-gradient(90deg, #2fae93, #fbe79e);
transform-origin: left center;
animation: bgbProgress 4s linear forwards;
}
@keyframes bgbProgress {
from { transform: scaleX(1); }
to { transform: scaleX(0); }
}
/* Mobil küçük ekran ayarı */
@media (max-width: 380px){
.bgb-bubble{
max-width: calc(100% - 28px);
}
.bgb-title{ font-size: 12px; }
.bgb-metin{ font-size: 11.5px; }
}
/* =====================================================================
* MODULE-ICON-LOGO (Logo image yerine SVG icon)
* ===================================================================== */
.module-icon-logo{
background: linear-gradient(135deg, #1d6f5e, #2fae93) !important;
display: flex !important;
align-items: center;
justify-content: center;
padding: 8px;
overflow: hidden;
}
.module-icon-logo img{
width: 72%;
height: 72%;
object-fit: contain;
filter: drop-shadow(0 2px 4px rgba(0,0,0,.30));
}
/* =====================================================================
* FAALİYETLER MODÜLÜ
* ===================================================================== */
.view[data-view="faaliyetler"]{
background: #f7f9f8 !important;
padding-bottom: calc(var(--tabbar-h, 64px) + var(--safe-bot, 0px) + 24px);
}
.fa-app{
display: flex;
flex-direction: column;
gap: 14px;
padding: 12px 14px 0;
}
/* === HERO === */
.fa-hero{
position: relative;
border-radius: 22px;
overflow: hidden;
padding: 28px 24px 26px;
color: #fff;
text-align: center;
isolation: isolate;
box-shadow: 0 12px 36px rgba(6,77,40,.30);
}
.fa-hero-bg{
position: absolute; inset: 0; z-index: -2;
background:
linear-gradient(135deg, #1d6f5e 0%, #0a6638 50%, #1d6f5e 100%),
repeating-linear-gradient(45deg, transparent 0, transparent 30px, rgba(0,0,0,.04) 30px, rgba(0,0,0,.04) 31px);
}
.fa-hero-glow{
position: absolute;
top: -50px; right: -50px;
width: 220px; height: 220px;
background: radial-gradient(circle, rgba(251,231,158,.40), transparent 65%);
border-radius: 50%;
pointer-events: none;
z-index: -1;
animation: faHeroGlow 8s ease-in-out infinite;
}
@keyframes faHeroGlow {
0%,100% { transform: scale(1); opacity: .85; }
50% { transform: scale(1.18); opacity: 1; }
}
.fa-hero-content{ position: relative; }
.fa-hero-logo{
width: 72px;
height: 72px;
object-fit: contain;
margin-bottom: 12px;
filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));
}
.fa-hero-baslik{
font-size: 18px;
font-weight: 800;
letter-spacing: -.3px;
line-height: 1.3;
margin-bottom: 6px;
}
.fa-hero-alt{
font-size: 13px;
color: #fbe79e;
font-weight: 700;
font-style: italic;
letter-spacing: -.1px;
opacity: .92;
}
/* === LIST === */
.fa-list{
display: flex;
flex-direction: column;
gap: 14px;
}
/* === KART === */
.fa-kart{
position: relative;
display: flex;
flex-direction: column;
background: #fff;
border: 0;
border-radius: 18px;
overflow: hidden;
cursor: pointer;
font-family: inherit;
text-align: left;
padding: 0;
width: 100%;
box-shadow: 0 4px 14px rgba(0,0,0,.06);
transition: all .25s cubic-bezier(.4,0,.2,1);
}
.fa-kart:active{ transform: scale(.985); }
.fa-kart:hover{
box-shadow: 0 12px 28px rgba(0,0,0,.10);
transform: translateY(-2px);
}
.fa-kart-foto{
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #1a1a1a;
overflow: hidden;
}
.fa-kart-foto img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.fa-kart:hover .fa-kart-foto img,
.fa-kart:active .fa-kart-foto img{
transform: scale(1.05);
}
.fa-kart-foto-overlay{
position: absolute;
inset: 0;
pointer-events: none;
}
.fa-kart-foto-no{
position: absolute;
top: 12px; left: 12px;
width: 32px; height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 14px;
font-weight: 800;
letter-spacing: -.2px;
box-shadow: 0 3px 10px rgba(0,0,0,.20);
font-variant-numeric: tabular-nums;
z-index: 2;
}
.fa-kart-foto-logo{
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.fa-kart-logo-img{
width: 84px;
height: 84px;
object-fit: contain;
filter: drop-shadow(0 6px 16px rgba(0,0,0,.30));
animation: faLogoBob 4s ease-in-out infinite;
}
@keyframes faLogoBob {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
.fa-kart-info{
padding: 14px 16px 14px;
background: #fff;
}
.fa-kart-baslik{
font-size: 15.5px;
font-weight: 800;
color: var(--fa-renk, #1d6f5e);
letter-spacing: -.3px;
line-height: 1.3;
margin-bottom: 5px;
}
.fa-kart-ozet{
font-size: 12.5px;
color: #475569;
font-weight: 600;
line-height: 1.5;
margin-bottom: 10px;
}
.fa-kart-cta{
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 11px 5px 12px;
background: var(--fa-accent, #d1fae5);
color: var(--fa-renk, #1d6f5e);
border-radius: 999px;
font-size: 11.5px;
font-weight: 800;
letter-spacing: -.1px;
transition: all .2s;
}
.fa-kart:hover .fa-kart-cta,
.fa-kart:active .fa-kart-cta{
background: var(--fa-renk);
color: #fff;
}
.fa-footer-dua{
text-align: center;
font-size: 12px;
color: #c9a961;
font-weight: 700;
font-style: italic;
padding: 12px 0;
letter-spacing: -.1px;
}
/* =====================================================================
* FAALİYET DETAY SAYFASI
* ===================================================================== */
.fa-d-app{
display: flex;
flex-direction: column;
}
/* === DETAY HERO === */
.fa-d-hero{
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #1a1a1a;
}
.fa-d-hero-foto{
position: absolute;
inset: 0;
}
.fa-d-hero-foto img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.fa-d-hero-foto-logo{
display: flex;
align-items: center;
justify-content: center;
}
.fa-d-hero-logo{
width: 130px;
height: 130px;
object-fit: contain;
filter: drop-shadow(0 8px 24px rgba(0,0,0,.40));
animation: faLogoBob 4s ease-in-out infinite;
}
.fa-d-hero-overlay{
position: absolute;
inset: 0;
pointer-events: none;
}
.fa-d-back{
position: absolute;
top: 14px; left: 14px;
z-index: 5;
width: 40px; height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,.92);
backdrop-filter: blur(10px);
border: 0;
border-radius: 50%;
color: #1d6f5e;
cursor: pointer;
font-family: inherit;
box-shadow: 0 4px 12px rgba(0,0,0,.18);
transition: all .15s;
}
.fa-d-back:active{ transform: scale(.92); background: #fff; }
.fa-d-hero-content{
position: absolute;
left: 18px; right: 18px; bottom: 18px;
z-index: 4;
color: #fff;
}
.fa-d-hero-baslik{
font-size: 22px;
font-weight: 800;
letter-spacing: -.4px;
line-height: 1.2;
margin-bottom: 6px;
text-shadow: 0 2px 8px rgba(0,0,0,.40);
}
.fa-d-hero-ozet{
font-size: 13px;
font-weight: 600;
opacity: .96;
line-height: 1.45;
text-shadow: 0 1px 4px rgba(0,0,0,.40);
letter-spacing: -.1px;
}
/* === DETAY CONTENT === */
.fa-d-content{
padding: 22px 18px 20px;
background: #fff;
}
.fa-detay-baslik{
font-size: 16px;
font-weight: 800;
color: var(--fa-renk, #1d6f5e);
letter-spacing: -.3px;
margin: 24px 0 10px;
padding-bottom: 6px;
border-bottom: 2px solid var(--fa-accent, #d1fae5);
position: relative;
}
.fa-detay-baslik:first-child,
.fa-d-content > h3:first-child{ margin-top: 0; }
.fa-detay-paragraf{
font-size: 14px;
color: #334155;
font-weight: 500;
line-height: 1.65;
margin: 0 0 14px;
letter-spacing: -.1px;
}
.fa-detay-liste{
list-style: none;
padding: 0;
margin: 0 0 14px;
display: flex;
flex-direction: column;
gap: 8px;
}
.fa-detay-liste li{
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 14px 10px 12px;
background: #f7f9f8;
border-left: 3px solid var(--fa-renk, #2fae93);
border-radius: 8px;
font-size: 13px;
color: #334155;
font-weight: 600;
line-height: 1.5;
}
.fa-liste-tik{
color: var(--fa-renk, #2fae93);
flex-shrink: 0;
margin-top: 2px;
}
.fa-detay-hadis,
.fa-detay-ayet{
position: relative;
padding: 16px 18px 14px;
border-radius: 14px;
margin: 18px 0;
border: 1px solid #c9a961;
}
.fa-detay-hadis{
background: linear-gradient(135deg, #fefcf3 0%, #fbe79e 100%);
}
.fa-detay-ayet{
background: linear-gradient(135deg, #f0f9ff 0%, #bae6fd 100%);
border-color: #0891b2;
}
.fa-detay-hadis-tag,
.fa-detay-ayet-tag{
display: inline-block;
padding: 3px 10px;
background: rgba(6,77,40,.92);
color: #fbe79e;
border-radius: 999px;
font-size: 9.5px;
font-weight: 800;
letter-spacing: 1px;
margin-bottom: 10px;
}
.fa-detay-ayet-tag{
background: rgba(8,145,178,.92);
color: #f0f9ff;
}
.fa-detay-hadis-metin,
.fa-detay-ayet-metin{
font-size: 14px;
color: #4a3a18;
font-weight: 600;
font-style: italic;
line-height: 1.6;
margin-bottom: 8px;
letter-spacing: -.1px;
}
.fa-detay-ayet-metin{ color: #0c4a6e; }
.fa-detay-hadis-kaynak,
.fa-detay-ayet-kaynak{
font-size: 11.5px;
color: #8a6f2a;
font-weight: 700;
text-align: right;
letter-spacing: -.1px;
}
.fa-detay-ayet-kaynak{ color: #0e7490; }
.fa-detay-cta{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 18px;
background: var(--fa-renk, #2fae93);
color: #fff;
border: 0;
border-radius: 12px;
font-size: 13px;
font-weight: 800;
cursor: pointer;
font-family: inherit;
letter-spacing: -.1px;
margin: 4px 0 14px;
box-shadow: 0 4px 12px color-mix(in srgb, var(--fa-renk, #2fae93) 28%, transparent);
transition: all .15s;
}
.fa-detay-cta:active{ transform: scale(.97); }
/* === BAĞIŞ TEŞVİK === */
.fa-d-bagis{
display: flex;
align-items: center;
gap: 12px;
margin: 14px 14px 0;
padding: 14px 16px;
background: linear-gradient(135deg, #f0fdf4, #d1fae5);
border: 1px solid #86efac;
border-radius: 16px;
box-shadow: 0 4px 12px rgba(13,140,74,.10);
}
.fa-d-bagis-icon{
flex-shrink: 0;
width: 44px; height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #2fae93, #1d6f5e);
color: #fff;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(13,140,74,.30);
}
.fa-d-bagis-info{ flex: 1; min-width: 0; }
.fa-d-bagis-baslik{
font-size: 13px;
font-weight: 800;
color: #1d6f5e;
letter-spacing: -.2px;
line-height: 1.35;
margin-bottom: 3px;
}
.fa-d-bagis-aciklama{
font-size: 11.5px;
color: #166534;
font-weight: 600;
line-height: 1.4;
}
.fa-d-bagis-btn{
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 9px 13px 9px 14px;
background: linear-gradient(135deg, #2fae93, #1d6f5e);
color: #fff;
border: 0;
border-radius: 999px;
font-size: 11.5px;
font-weight: 800;
cursor: pointer;
font-family: inherit;
letter-spacing: -.1px;
box-shadow: 0 3px 10px rgba(13,140,74,.30);
transition: all .15s;
}
.fa-d-bagis-btn:active{ transform: scale(.95); }
/* =====================================================================
* KUR'ÂN HERO RESUME KART v3 - Premium
* "Kaldığın yerden devam et" — sayfa, cüz, âyet, ilerleme yüzdesi
* ===================================================================== */
.qr-resume{
position: relative;
border-radius: 22px;
overflow: hidden;
padding: 18px 20px 16px;
color: #fff;
isolation: isolate;
box-shadow: 0 12px 36px rgba(6,77,40,.30);
cursor: pointer;
margin-bottom: 14px;
transition: transform .15s;
}
.qr-resume:active{ transform: scale(.99); }
.qr-resume-bg{
position: absolute; inset: 0; z-index: -2;
background:
linear-gradient(135deg, #1d6f5e 0%, #0a6638 50%, #1d6f5e 100%),
repeating-linear-gradient(45deg, transparent 0, transparent 30px, rgba(0,0,0,.04) 30px, rgba(0,0,0,.04) 31px);
}
.qr-resume-glow{
position: absolute;
top: -50px; right: -50px;
width: 220px; height: 220px;
background: radial-gradient(circle, rgba(251,231,158,.25), transparent 65%);
border-radius: 50%;
pointer-events: none;
z-index: -1;
animation: qrGlow 8s ease-in-out infinite;
}
@keyframes qrGlow {
0%,100% { transform: scale(1); opacity: .85; }
50% { transform: scale(1.15); opacity: 1; }
}
.qr-resume-content{ position: relative; }
.qr-resume-header{
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.qr-resume-tag{
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
background: rgba(251,231,158,.18);
border: 1px solid rgba(251,231,158,.34);
color: #fbe79e;
border-radius: 999px;
font-size: 9.5px;
font-weight: 800;
letter-spacing: 1px;
}
.qr-resume-tag svg{ flex-shrink: 0; }
.qr-resume-zaman{
font-size: 10.5px;
font-weight: 700;
color: rgba(255,255,255,.75);
letter-spacing: -.1px;
white-space: nowrap;
}
/* === SÛRE BİLGİSİ === */
.qr-resume-sure{
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.10);
border-radius: 14px;
margin-bottom: 12px;
backdrop-filter: blur(4px);
}
.qr-resume-no{
flex-shrink: 0;
width: 38px; height: 38px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #fbe79e, #c9a961);
color: #1d6f5e;
border-radius: 10px;
font-size: 14px;
font-weight: 800;
font-variant-numeric: tabular-nums;
letter-spacing: -.4px;
box-shadow: 0 3px 8px rgba(0,0,0,.20);
}
.qr-resume-info{ flex: 1; min-width: 0; }
.qr-resume-ad{
font-size: 16px;
font-weight: 800;
color: #fff;
letter-spacing: -.3px;
line-height: 1.2;
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.qr-resume-okunus{
font-size: 11.5px;
color: rgba(255,255,255,.78);
font-weight: 600;
font-style: italic;
letter-spacing: -.1px;
}
.qr-resume-arabic{
flex-shrink: 0;
font-size: 30px;
color: #fbe79e;
font-family: "Traditional Arabic", "Amiri", "Noto Naskh Arabic", serif;
line-height: 1;
text-shadow: 0 0 12px rgba(251,231,158,.40);
}
/* === KONUM (Âyet / Sayfa / Cüz) === */
.qr-resume-konum{
display: flex;
align-items: stretch;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.10);
border-radius: 12px;
padding: 10px 6px;
margin-bottom: 14px;
backdrop-filter: blur(4px);
}
.qr-resume-konum-item{
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
text-align: center;
}
.qr-resume-konum-label{
font-size: 9.5px;
font-weight: 800;
color: rgba(251,231,158,.75);
letter-spacing: 1.2px;
text-transform: uppercase;
}
.qr-resume-konum-deger{
font-size: 18px;
font-weight: 800;
color: #fff;
font-variant-numeric: tabular-nums;
letter-spacing: -.3px;
line-height: 1;
}
.qr-resume-konum-toplam{
font-size: 11px;
color: rgba(255,255,255,.50);
font-weight: 600;
}
.qr-resume-konum-divider{
width: 1px;
background: rgba(255,255,255,.18);
margin: 4px 0;
}
/* === İLERLEME BAR === */
.qr-resume-progress-wrap{
margin-bottom: 14px;
}
.qr-resume-progress{
height: 6px;
background: rgba(0,0,0,.20);
border-radius: 999px;
overflow: hidden;
position: relative;
box-shadow: inset 0 1px 2px rgba(0,0,0,.30);
}
.qr-resume-progress-fill{
height: 100%;
background: linear-gradient(90deg, #fbe79e, #f5c842);
border-radius: 999px;
transition: width .8s cubic-bezier(.4,0,.2,1);
box-shadow: 0 0 10px rgba(251,231,158,.50);
}
.qr-resume-progress-text{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 7px;
font-size: 11.5px;
font-weight: 700;
color: rgba(255,255,255,.80);
letter-spacing: -.1px;
}
.qr-resume-progress-text strong{
color: #fbe79e;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.qr-resume-yuzde{
color: #fbe79e !important;
font-size: 13px !important;
font-weight: 800 !important;
font-variant-numeric: tabular-nums;
letter-spacing: -.2px;
}
/* === DEVAM BUTONU === */
.qr-resume-btn{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
padding: 12px 18px;
background: linear-gradient(135deg, #fbe79e, #f5c842);
color: #1d6f5e;
border: 0;
border-radius: 12px;
font-size: 13.5px;
font-weight: 800;
cursor: pointer;
font-family: inherit;
letter-spacing: -.1px;
box-shadow: 0 4px 14px rgba(251,231,158,.30);
transition: transform .15s;
}
.qr-resume-btn:active{ transform: scale(.97); }
.qr-resume-btn svg{ flex-shrink: 0; }
/* === BOŞ DURUM (Yeni Başlangıç) === */
.qr-resume-bos{
text-align: center;
padding: 22px 22px 18px;
}
.qr-resume-bos .qr-resume-tag{
margin: 0 auto 10px;
}
.qr-resume-bos-baslik{
font-size: 18px;
font-weight: 800;
color: #fbe79e;
letter-spacing: -.3px;
margin-bottom: 6px;
text-shadow: 0 0 12px rgba(251,231,158,.30);
}
.qr-resume-bos-aciklama{
font-size: 12.5px;
color: rgba(255,255,255,.85);
font-weight: 500;
line-height: 1.55;
margin-bottom: 14px;
}
/* =====================================================================
* KUR'ÂN ÖĞRENİYORUM v2 - Premium Dashboard
* Duolingo + ehl-i sünnet İslâmî estetik
* ===================================================================== */
.view[data-view="kuran-ogren"]{
background: #f7f9f8 !important;
padding-bottom: calc(var(--tabbar-h, 64px) + var(--safe-bot, 0px) + 24px);
}
.ko-app{
display: flex;
flex-direction: column;
gap: 12px;
padding: 12px 14px 0;
}
/* ============ HERO v2 ============ */
.ko-hero-v2{
position: relative;
border-radius: 22px;
overflow: hidden;
padding: 18px 20px 18px;
color: #fff;
isolation: isolate;
box-shadow: 0 12px 36px rgba(6,77,40,.30);
}
.ko-hero-bg{
position: absolute; inset: 0; z-index: -2;
background:
linear-gradient(135deg, #1d6f5e 0%, #0a6638 50%, #1d6f5e 100%),
repeating-linear-gradient(45deg, transparent 0, transparent 30px, rgba(0,0,0,.04) 30px, rgba(0,0,0,.04) 31px);
}
.ko-hero-glow{
position: absolute;
top: -50px; right: -50px;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(251,231,158,.30), transparent 65%);
border-radius: 50%;
pointer-events: none;
z-index: -1;
animation: koHeroGlow 8s ease-in-out infinite;
}
@keyframes koHeroGlow {
0%,100% { transform: scale(1); opacity: .85; }
50% { transform: scale(1.18); opacity: 1; }
}
.ko-hero-row-top{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.ko-hero-greeting{
display: flex;
align-items: center;
gap: 10px;
}
.ko-hero-bismillah{
font-size: 26px;
color: #fbe79e;
line-height: 1;
font-family: "Traditional Arabic", "Amiri", "Noto Naskh Arabic", serif;
text-shadow: 0 0 12px rgba(251,231,158,.40);
}
.ko-hero-merhaba{
font-size: 12px;
font-weight: 700;
color: rgba(255,255,255,.85);
letter-spacing: -.1px;
font-style: italic;
}
.ko-hero-rozet{
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
background: rgba(251,231,158,.18);
border: 1px solid rgba(251,231,158,.34);
color: #fbe79e;
border-radius: 999px;
font-size: 12px;
font-weight: 800;
cursor: pointer;
font-family: inherit;
letter-spacing: -.1px;
transition: all .15s;
}
.ko-hero-rozet:active{ transform: scale(.95); }
.ko-hero-rozet svg{ flex-shrink: 0; }
/* === STATS (3 kolon) === */
.ko-hero-stats{
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 8px;
margin-bottom: 16px;
}
.ko-hero-stat{
text-align: center;
padding: 10px 6px;
}
.ko-hero-stat-icon{
display: inline-flex;
width: 36px; height: 36px;
align-items: center;
justify-content: center;
background: rgba(255,255,255,.12);
border-radius: 50%;
margin-bottom: 6px;
color: rgba(255,255,255,.85);
}
.ko-hero-stat.is-active-streak .ko-hero-stat-icon{
background: linear-gradient(135deg, #fbe79e, #f5c842);
color: #1d6f5e;
animation: koFlame 1.5s ease-in-out infinite;
}
@keyframes koFlame {
0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(251,231,158,.4); }
50% { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(251,231,158,0); }
}
.ko-hero-stat-num{
font-size: 20px;
font-weight: 800;
letter-spacing: -.4px;
font-variant-numeric: tabular-nums;
line-height: 1;
margin-bottom: 3px;
}
.ko-hero-stat-lbl{
font-size: 10px;
font-weight: 700;
color: rgba(255,255,255,.78);
letter-spacing: .3px;
text-transform: uppercase;
}
/* === DAİRESEL HEDEF === */
.ko-hero-target-circle{
position: relative;
width: 96px;
height: 96px;
margin: 0 auto;
}
.ko-hero-circle-svg{
width: 100%; height: 100%;
display: block;
}
.ko-hero-circle-fill{
transition: stroke-dashoffset 1s cubic-bezier(.4,0,.2,1);
}
.ko-hero-circle-content{
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.ko-hero-circle-num{
font-size: 22px;
font-weight: 800;
letter-spacing: -.3px;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.ko-hero-circle-toplam{
font-size: 12px;
color: rgba(255,255,255,.55);
font-weight: 600;
}
.ko-hero-circle-lbl{
font-size: 9.5px;
font-weight: 700;
color: rgba(255,255,255,.78);
letter-spacing: .4px;
text-transform: uppercase;
margin-top: 2px;
}
.ko-hero-target-circle.is-done .ko-hero-circle-tik{
color: #fbe79e;
filter: drop-shadow(0 0 8px rgba(251,231,158,.50));
}
/* === GENEL İLERLEME BAR === */
.ko-hero-progress-v2{
background: rgba(0,0,0,.20);
border: 1px solid rgba(255,255,255,.10);
border-radius: 14px;
padding: 12px 14px;
}
.ko-hero-progress-text{
display: flex;
justify-content: space-between;
font-size: 11.5px;
font-weight: 800;
letter-spacing: -.1px;
margin-bottom: 7px;
color: rgba(255,255,255,.85);
}
.ko-hero-progress-yuzde{
color: #fbe79e !important;
font-size: 13px !important;
font-variant-numeric: tabular-nums;
}
.ko-hero-progress-bar{
height: 6px;
background: rgba(0,0,0,.30);
border-radius: 999px;
overflow: hidden;
}
.ko-hero-progress-fill{
height: 100%;
background: linear-gradient(90deg, #fbe79e, #f5c842);
border-radius: 999px;
transition: width .8s cubic-bezier(.4,0,.2,1);
box-shadow: 0 0 10px rgba(251,231,158,.50);
}
.ko-hero-progress-detay{
font-size: 11px;
color: rgba(255,255,255,.65);
font-weight: 600;
margin-top: 6px;
}
/* ============ SIRADAKİ DERS v2 ============ */
.ko-next-card-v2{
position: relative;
padding: 0;
border: 0;
border-radius: 18px;
overflow: hidden;
cursor: pointer;
font-family: inherit;
text-align: left;
width: 100%;
isolation: isolate;
box-shadow: 0 8px 22px rgba(13,140,74,.22);
transition: transform .2s;
}
.ko-next-card-v2:active{ transform: scale(.985); }
.ko-next-bg-v2{
position: absolute; inset: 0; z-index: -1;
background: linear-gradient(135deg, #fff 0%, #f0fdf4 100%);
border: 2px solid #2fae93;
border-radius: 18px;
}
.ko-next-content-v2{
padding: 16px 18px 14px;
}
.ko-next-tag{
display: inline-block;
padding: 3px 9px;
background: linear-gradient(135deg, #2fae93, #1d6f5e);
color: #fff;
border-radius: 999px;
font-size: 9.5px;
font-weight: 800;
letter-spacing: 1px;
margin-bottom: 8px;
}
.ko-next-title-v2{
font-size: 17px;
font-weight: 800;
color: #1d6f5e;
letter-spacing: -.3px;
line-height: 1.3;
margin-bottom: 6px;
}
.ko-next-meta{
display: flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
color: #475569;
font-weight: 600;
margin-bottom: 12px;
}
.ko-next-meta-item{
display: inline-flex;
align-items: center;
gap: 4px;
}
.ko-next-meta-divider{ opacity: .5; }
.ko-next-meta svg{ color: #2fae93; }
.ko-next-cta{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 16px;
background: linear-gradient(135deg, #2fae93, #1d6f5e);
color: #fff;
border-radius: 999px;
font-size: 12.5px;
font-weight: 800;
letter-spacing: -.1px;
box-shadow: 0 3px 10px rgba(13,140,74,.30);
}
.ko-next-cta svg{ flex-shrink: 0; }
.ko-next-done-v2{
text-align: center;
padding: 24px 22px 20px;
background: linear-gradient(135deg, #fefcf3 0%, #fbe79e 100%);
border: 1px solid #c9a961;
border-radius: 18px;
}
.ko-next-done-icon{
font-size: 36px;
color: #c9a961;
line-height: 1;
margin-bottom: 8px;
filter: drop-shadow(0 2px 6px rgba(201,169,97,.30));
}
.ko-next-done-baslik{
font-size: 16px;
font-weight: 800;
color: #4a3a18;
margin-bottom: 4px;
}
.ko-next-done-aciklama{
font-size: 12.5px;
color: #6b5524;
font-weight: 600;
line-height: 1.5;
}
/* ============ TEKRAR v2 ============ */
.ko-tekrar-v2{
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: linear-gradient(135deg, #fef3c7, #fde68a);
border: 1px solid #f59e0b;
border-radius: 14px;
cursor: pointer;
font-family: inherit;
text-align: left;
width: 100%;
box-shadow: 0 4px 12px rgba(245,158,11,.18);
transition: all .15s;
}
.ko-tekrar-v2:active{ transform: scale(.99); }
.ko-tekrar-icon{
flex-shrink: 0;
width: 38px; height: 38px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f59e0b, #d97706);
color: #fff;
border-radius: 10px;
box-shadow: 0 3px 8px rgba(245,158,11,.30);
}
.ko-tekrar-info{ flex: 1; min-width: 0; }
.ko-tekrar-baslik{
font-size: 13px;
font-weight: 700;
color: #78350f;
letter-spacing: -.1px;
line-height: 1.3;
}
.ko-tekrar-baslik strong{ font-weight: 800; }
.ko-tekrar-aciklama{
font-size: 11px;
color: #92400e;
font-weight: 600;
margin-top: 2px;
}
/* ============ ROZETLER ============ */
.ko-rozet-stripe{
background: #fff;
border: 1px solid #e8efeb;
border-radius: 14px;
padding: 14px 4px 12px;
box-shadow: 0 1px 3px rgba(0,0,0,.03);
}
.ko-rozet-stripe-title{
font-size: 11px;
font-weight: 800;
color: #94a3b8;
letter-spacing: 1px;
text-transform: uppercase;
padding: 0 14px;
margin-bottom: 10px;
}
.ko-rozet-stripe-list{
display: flex;
gap: 4px;
overflow-x: auto;
padding: 0 12px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.ko-rozet-stripe-list::-webkit-scrollbar{ display: none; }
.ko-rozet-stripe-item{
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 8px 4px;
width: 64px;
border-radius: 10px;
opacity: .35;
transition: all .2s;
}
.ko-rozet-stripe-item.is-won{
opacity: 1;
}
.ko-rozet-stripe-icon{
width: 36px; height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: #f1f5f9;
border-radius: 50%;
font-size: 18px;
font-weight: 800;
}
.ko-rozet-stripe-item.is-won .ko-rozet-stripe-icon{
background: linear-gradient(135deg, var(--r-color), color-mix(in srgb, var(--r-color) 70%, #000 30%));
color: #fff;
box-shadow: 0 4px 10px color-mix(in srgb, var(--r-color) 30%, transparent);
}
.ko-rozet-stripe-ad{
font-size: 9.5px;
font-weight: 700;
color: #475569;
letter-spacing: -.1px;
text-align: center;
line-height: 1.2;
}
/* === ROZET SHEET === */
.ko-rozet-sheet{ padding: 4px 16px 18px; }
.ko-rozet-sheet-info{
font-size: 12.5px;
color: #64748b;
font-weight: 600;
font-style: italic;
text-align: center;
margin-bottom: 16px;
}
.ko-rozet-sheet-grid{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.ko-rozet-sheet-item{
text-align: center;
padding: 16px 10px 14px;
background: #f8faf9;
border: 1px solid #e8efeb;
border-radius: 14px;
opacity: .55;
}
.ko-rozet-sheet-item.is-won{
opacity: 1;
background: #fff;
border-color: var(--r-color);
box-shadow: 0 4px 10px color-mix(in srgb, var(--r-color) 15%, transparent);
}
.ko-rozet-sheet-icon{
display: inline-flex;
width: 50px; height: 50px;
align-items: center;
justify-content: center;
background: #f1f5f9;
border-radius: 50%;
font-size: 22px;
margin-bottom: 8px;
font-weight: 800;
}
.ko-rozet-sheet-item.is-won .ko-rozet-sheet-icon{
background: linear-gradient(135deg, var(--r-color), color-mix(in srgb, var(--r-color) 70%, #000 30%));
color: #fff;
}
.ko-rozet-sheet-ad{
font-size: 13px;
font-weight: 800;
color: #0a0a0a;
margin-bottom: 4px;
}
.ko-rozet-sheet-durum{
font-size: 10.5px;
font-weight: 700;
color: #94a3b8;
letter-spacing: .3px;
text-transform: uppercase;
}
.ko-rozet-sheet-item.is-won .ko-rozet-sheet-durum{ color: var(--r-color); }
/* ============ KATEGORİ YOL HARİTASI v2 ============ */
.ko-section-title-v2{
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 8px 4px 4px;
margin-top: 6px;
font-size: 14px;
font-weight: 800;
color: #1d6f5e;
letter-spacing: -.2px;
}
.ko-section-sub{
font-size: 11px;
font-weight: 600;
color: #94a3b8;
font-style: italic;
}
.ko-kategori-list{
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
}
.ko-kategori-list::before{
content: '';
position: absolute;
left: 33px;
top: 16px;
bottom: 16px;
width: 2px;
background: linear-gradient(to bottom, transparent, #e8efeb 5%, #e8efeb 95%, transparent);
z-index: 0;
}
.ko-kat-v2{
position: relative;
z-index: 1;
display: flex;
align-items: stretch;
gap: 12px;
background: #fff;
border: 1px solid #e8efeb;
border-radius: 14px;
padding: 0;
cursor: pointer;
font-family: inherit;
text-align: left;
width: 100%;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
transition: all .15s;
}
.ko-kat-v2:active{ transform: scale(.99); }
.ko-kat-v2:hover{
border-color: var(--ks-color, #2fae93);
box-shadow: 0 6px 14px rgba(0,0,0,.06);
}
.ko-kat-v2.is-locked{
opacity: .55;
cursor: not-allowed;
background: #f8faf9;
}
.ko-kat-v2.is-complete{
background: #f0fdf4;
border-color: #10b981;
}
.ko-kat-step{
flex-shrink: 0;
width: 50px;
display: flex;
align-items: center;
justify-content: center;
background: var(--ks-color, #2fae93);
color: #fff;
font-size: 18px;
font-weight: 800;
font-variant-numeric: tabular-nums;
letter-spacing: -.3px;
border-radius: 14px 0 0 14px;
}
.ko-kat-v2.is-complete .ko-kat-step{
background: linear-gradient(135deg, #10b981, #059669);
}
.ko-kat-v2.is-locked .ko-kat-step{
background: #cbd5e1;
}
.ko-kat-info-v2{
flex: 1;
min-width: 0;
padding: 12px 8px 12px 0;
}
.ko-kat-meta-v2{
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 4px;
}
.ko-kat-seviye-v2{
display: inline-block;
padding: 2px 8px;
background: color-mix(in srgb, var(--ks-color, #2fae93) 12%, transparent);
color: var(--ks-color, #2fae93);
border-radius: 999px;
font-size: 10px;
font-weight: 800;
letter-spacing: -.1px;
}
.ko-kat-locked-v2{
font-size: 10px;
color: #94a3b8;
font-weight: 700;
letter-spacing: -.1px;
}
.ko-kat-tamam-v2{
font-size: 10px;
color: #10b981;
font-weight: 800;
letter-spacing: -.1px;
}
.ko-kat-name-v2{
font-size: 14px;
font-weight: 800;
color: #0a0a0a;
letter-spacing: -.2px;
line-height: 1.3;
margin-bottom: 2px;
}
.ko-kat-desc-v2{
font-size: 11.5px;
color: #64748b;
font-weight: 600;
line-height: 1.4;
margin-bottom: 6px;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ko-kat-prog-v2{
display: flex;
align-items: center;
gap: 6px;
}
.ko-kat-prog-bar-v2{
flex: 1;
height: 4px;
background: #f1f5f9;
border-radius: 999px;
overflow: hidden;
}
.ko-kat-prog-fill-v2{
height: 100%;
background: linear-gradient(90deg, var(--ks-color, #2fae93), color-mix(in srgb, var(--ks-color, #2fae93) 70%, #000 30%));
border-radius: 999px;
transition: width .6s ease;
}
.ko-kat-prog-text-v2{
font-size: 10.5px;
font-weight: 800;
color: var(--ks-color, #2fae93);
font-variant-numeric: tabular-nums;
letter-spacing: -.1px;
white-space: nowrap;
}
.ko-kat-arrow-v2{
flex-shrink: 0;
align-self: center;
margin-right: 12px;
color: #94a3b8;
}
/* === HEDEF DEĞİŞTİR (v2) === */
.ko-hedef-btn-v2{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 11px 16px;
background: #fff;
color: #475569;
border: 1px dashed #cbd5e1;
border-radius: 12px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
letter-spacing: -.1px;
transition: all .15s;
margin-top: 4px;
}
.ko-hedef-btn-v2:active{ transform: scale(.98); }
.ko-hedef-btn-v2:hover{ border-color: #2fae93; color: #1d6f5e; }
.ko-hedef-btn-v2 svg{ color: #2fae93; flex-shrink: 0; }
.ko-footer-dua{
text-align: center;
font-size: 11.5px;
color: #c9a961;
font-weight: 700;
font-style: italic;
padding: 12px 8px 8px;
letter-spacing: -.1px;
line-height: 1.5;
}
/* =====================================================================
* KUR'ÂN YER İMLERİ + CÜZ SHEET FIX
* ===================================================================== */
/* Yer imi satırı - div role=button (iç içe button sorunu çözüldü) */
.kuran-bm-row{
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: #fff;
border: 1px solid #e8efeb;
border-radius: 14px;
cursor: pointer;
width: 100%;
text-align: left;
font-family: inherit;
margin-bottom: 8px;
transition: all .15s;
-webkit-tap-highlight-color: transparent;
}
.kuran-bm-row:focus{
outline: 2px solid #2fae93;
outline-offset: 2px;
}
.kuran-bm-row:hover{
border-color: #2fae93;
box-shadow: 0 4px 10px rgba(13,140,74,.08);
}
.kuran-bm-row:active{ transform: scale(.99); }
.kuran-bm-row .kuran-sure-no{
flex-shrink: 0;
width: 36px; height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #2fae93, #1d6f5e);
color: #fff;
border-radius: 10px;
font-size: 13px;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.kuran-bm-row .kuran-sure-info{ flex: 1; min-width: 0; }
.kuran-bm-row .kuran-sure-name{
font-size: 13.5px;
font-weight: 800;
color: #0a0a0a;
letter-spacing: -.2px;
line-height: 1.3;
margin-bottom: 2px;
}
.kuran-bm-row .kuran-sure-meta{
font-size: 11.5px;
color: #64748b;
font-weight: 600;
font-style: italic;
}
.kuran-bm-rm{
flex-shrink: 0;
width: 28px; height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: #f1f5f9;
border: 0;
border-radius: 50%;
color: #64748b;
cursor: pointer;
font-family: inherit;
padding: 0;
transition: all .15s;
}
.kuran-bm-rm:hover{
background: #fee2e2;
color: #dc2626;
}
.kuran-bm-rm:active{ transform: scale(.85); }
/* === CÜZ SHEET === */
.kuran-cuz-sheet{
padding: 6px 16px 18px;
}
.kuran-cuz-header{
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 1px solid #e8efeb;
}
.kuran-cuz-header-no{
flex-shrink: 0;
width: 56px; height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #2fae93, #1d6f5e);
color: #fff;
border-radius: 14px;
font-size: 22px;
font-weight: 800;
font-variant-numeric: tabular-nums;
letter-spacing: -.5px;
box-shadow: 0 4px 12px rgba(13,140,74,.25);
}
.kuran-cuz-header-info{ flex: 1; min-width: 0; }
.kuran-cuz-header-baslik{
font-size: 16px;
font-weight: 800;
color: #1d6f5e;
letter-spacing: -.3px;
line-height: 1.2;
margin-bottom: 3px;
}
.kuran-cuz-header-meta{
font-size: 12px;
color: #64748b;
font-weight: 600;
letter-spacing: -.1px;
}
.kuran-cuz-aciklama{
background: #f7f9f8;
padding: 10px 14px;
border-radius: 10px;
font-size: 12px;
color: #475569;
font-weight: 600;
font-style: italic;
line-height: 1.45;
margin-bottom: 12px;
border-left: 3px solid #c9a961;
}
.kuran-cuz-sure-list{
display: flex;
flex-direction: column;
gap: 8px;
}
.kuran-cuz-sure-btn{
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: #fff;
border: 1px solid #e8efeb;
border-radius: 14px;
cursor: pointer;
font-family: inherit;
text-align: left;
width: 100%;
transition: all .15s;
-webkit-tap-highlight-color: transparent;
}
.kuran-cuz-sure-btn:hover{
border-color: #2fae93;
background: #f0fdf4;
box-shadow: 0 4px 10px rgba(13,140,74,.08);
}
.kuran-cuz-sure-btn:active{ transform: scale(.99); }
.kuran-cuz-sure-no{
flex-shrink: 0;
width: 32px; height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #2fae93, #1d6f5e);
color: #fff;
border-radius: 50%;
font-size: 12px;
font-weight: 800;
font-variant-numeric: tabular-nums;
}
.kuran-cuz-sure-info{ flex: 1; min-width: 0; }
.kuran-cuz-sure-ad{
font-size: 14px;
font-weight: 800;
color: #0a0a0a;
letter-spacing: -.2px;
line-height: 1.3;
margin-bottom: 2px;
}
.kuran-cuz-sure-meta{
font-size: 11.5px;
color: #64748b;
font-weight: 600;
font-style: italic;
}
.kuran-cuz-sure-btn svg{
flex-shrink: 0;
color: #2fae93;
}
/* === KURAN PANE GİZLEME FIX ===
* .kuran-list ve .kuran-grid CSS'inde display !important var.
* hidden attribute / [style*="display:none"] bunu override etmeli. */
.kuran-list[hidden],
.kuran-grid[hidden],
.view[data-view="kuran"] [data-pane][hidden],
.view[data-view="kuran"] [data-pane][style*="display: none"],
.view[data-view="kuran"] [data-pane][style*="display:none"]{
display: none !important;
}
/* ============================================================
* CANLI YAYIN PRO v3 — auto-appended
* ============================================================ */
/* =====================================================================
* Canlı Yayın Modülü v3 — Profesyonel Tasarım
* Mevcut .canli-* class'larını override eder.
* app.css'in SONUNA eklenmeli (cascade için).
* ===================================================================== */
/* ----------- TAB BAR ----------- */
.canli-tabs {
display: flex;
gap: 8px;
padding: 12px 16px 14px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
background: var(--c-surface, #fff);
border-bottom: 1px solid var(--c-border, #e5e7eb);
}
.canli-tabs::-webkit-scrollbar { display: none; }
.canli-tab {
flex: 0 0 auto;
padding: 9px 16px;
border-radius: 22px;
background: var(--c-surface-2, #f3f4f6);
color: var(--c-text-2, #4b5563);
border: 1px solid transparent;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all .18s ease;
white-space: nowrap;
}
.canli-tab:hover {
background: var(--c-surface-3, #e5e7eb);
}
.canli-tab.is-active {
background: var(--c-primary, #0d6e3a);
color: #fff;
border-color: var(--c-primary, #0d6e3a);
box-shadow: 0 2px 8px rgba(13,110,58,.25);
}
/* ----------- PLAYER FRAME ----------- */
.canli-player {
padding: 0;
background: #000;
}
.canli-player-frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
overflow: hidden;
}
.canli-player-frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
/* Loading overlay */
.canli-frame-loading {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #0a1f15 0%, #000 100%);
z-index: 1;
transition: opacity .3s;
pointer-events: none;
}
.canli-spinner {
width: 44px;
height: 44px;
border: 3px solid rgba(255,255,255,.15);
border-top-color: #16a34a;
border-radius: 50%;
animation: canliSpin 0.9s linear infinite;
}
@keyframes canliSpin {
to { transform: rotate(360deg); }
}
.canli-noembed {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
color: #94a3b8;
text-align: center;
padding: 20px;
}
/* ----------- INFO BAR ----------- */
.canli-info {
padding: 14px 16px 12px;
background: var(--c-surface, #fff);
border-bottom: 1px solid var(--c-border, #e5e7eb);
}
.canli-info-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.canli-live-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: linear-gradient(135deg, #ef4444, #dc2626);
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: .8px;
border-radius: 4px;
text-transform: uppercase;
box-shadow: 0 1px 3px rgba(220,38,38,.3);
}
.canli-live-dot {
width: 7px;
height: 7px;
background: #fff;
border-radius: 50%;
animation: canliLiveBlink 1.2s infinite;
}
@keyframes canliLiveBlink {
0%, 100% { opacity: 1; }
50% { opacity: .25; }
}
.canli-actions {
display: flex;
gap: 4px;
}
.canli-action-btn {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: var(--c-surface-2, #f3f4f6);
color: var(--c-text-2, #4b5563);
border: 0;
cursor: pointer;
transition: all .15s;
}
.canli-action-btn:hover {
background: var(--c-primary, #0d6e3a);
color: #fff;
transform: scale(1.05);
}
.canli-action-btn:active {
transform: scale(.95);
}
.canli-title {
font-size: 17px;
font-weight: 700;
color: var(--c-text-1, #111827);
margin-top: 2px;
}
.canli-desc {
font-size: 13px;
color: var(--c-text-3, #6b7280);
margin-top: 4px;
line-height: 1.5;
}
/* ----------- KAYNAK SWITCH ----------- */
.canli-sources {
padding: 12px 16px 16px;
background: var(--c-surface, #fff);
}
.canli-sources-label {
font-size: 12px;
color: var(--c-text-3, #6b7280);
margin-bottom: 8px;
font-weight: 500;
}
.canli-sources-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.canli-source-btn {
padding: 8px 14px;
border-radius: 8px;
background: var(--c-surface-2, #f3f4f6);
color: var(--c-text-2, #4b5563);
border: 1px solid var(--c-border, #e5e7eb);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all .15s;
}
.canli-source-btn:hover {
background: var(--c-surface-3, #e5e7eb);
border-color: var(--c-primary, #0d6e3a);
}
.canli-source-btn.is-active {
background: var(--c-primary, #0d6e3a);
color: #fff;
border-color: var(--c-primary, #0d6e3a);
box-shadow: 0 2px 6px rgba(13,110,58,.25);
}
.canli-source-btn:active {
transform: scale(.97);
}
/* ----------- TAM EKRAN ----------- */
.canli-player-frame:fullscreen {
background: #000;
}
.canli-player-frame:fullscreen iframe {
width: 100vw;
height: 100vh;
}
/* ----------- DARK MODE UYUMU ----------- */
html[data-tema="dark"] .canli-tabs,
html[data-tema="dark"] .canli-info,
html[data-tema="dark"] .canli-sources {
background: var(--c-surface, #1f2937);
border-color: var(--c-border, #374151);
}
html[data-tema="dark"] .canli-tab {
background: var(--c-surface-2, #374151);
color: var(--c-text-2, #d1d5db);
}
html[data-tema="dark"] .canli-source-btn {
background: var(--c-surface-2, #374151);
border-color: var(--c-border, #4b5563);
color: var(--c-text-2, #d1d5db);
}
html[data-tema="dark"] .canli-action-btn {
background: var(--c-surface-2, #374151);
color: var(--c-text-2, #d1d5db);
}
/* === ZEKAT IOS PRO v2.1 === */
/* =====================================================================
* ZEKAT MODÜLÜ — iOS-tarzı Premium UI v2
* Apple Human Interface Guidelines uyumlu
* Mevcut .zk-* class'larını override eder. JS değişmedi.
* app.css'in EN SONUNA eklenir.
* ===================================================================== */
/* iOS sistem font stack */
[data-view="zekat"] {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: -0.01em;
}
/* ----------- WRAPPER ----------- */
.zk-wrap {
padding: 12px 16px calc(110px + env(safe-area-inset-bottom, 0)) !important;
background: linear-gradient(180deg, #f8faf6 0%, #f1f5ef 100%);
min-height: calc(100vh - 56px);
}
/* ----------- HERO (Nisâb kartı) ----------- */
.zk-hero {
position: relative;
border-radius: 24px !important;
overflow: hidden;
margin-bottom: 16px !important;
padding: 24px 22px 18px !important;
background: linear-gradient(135deg, #0d6e3a 0%, #16a34a 50%, #0a5128 100%) !important;
box-shadow:
0 1px 2px rgba(13, 110, 58, .08),
0 8px 24px rgba(13, 110, 58, .25),
inset 0 1px 0 rgba(255, 255, 255, .15);
isolation: isolate;
}
/* Hero içi parlama efekti */
.zk-hero::before {
content: '';
position: absolute;
top: -40%;
right: -20%;
width: 70%;
height: 140%;
background: radial-gradient(ellipse, rgba(255, 255, 255, .18), transparent 60%);
pointer-events: none;
z-index: 0;
}
/* Üst sağ küçük süs */
.zk-hero::after {
content: '';
position: absolute;
top: 14px; right: 14px;
width: 80px; height: 80px;
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,.12), transparent 70%),
radial-gradient(circle at 70% 70%, rgba(255,255,255,.06), transparent 70%);
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
.zk-hero-bg { display: none !important; }
.zk-hero-content {
position: relative;
z-index: 1;
text-align: center;
color: #fff;
}
.zk-hero-label {
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
opacity: .85 !important;
margin-bottom: 8px !important;
}
.zk-hero-amount {
font-size: 38px !important;
font-weight: 800 !important;
letter-spacing: -1.2px !important;
line-height: 1.1 !important;
margin-bottom: 6px !important;
text-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.zk-hero-sub {
font-size: 13px !important;
font-weight: 500 !important;
opacity: .92 !important;
margin-bottom: 18px !important;
}
/* iOS Segmented Control */
.zk-hero-toggle {
display: inline-flex !important;
background: rgba(255, 255, 255, .15) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 12px !important;
padding: 3px !important;
gap: 2px !important;
border: 1px solid rgba(255, 255, 255, .12);
}
.zk-toggle {
background: transparent !important;
color: rgba(255, 255, 255, .9) !important;
border: 0 !important;
padding: 8px 22px !important;
border-radius: 10px !important;
font-size: 13px !important;
font-weight: 600 !important;
cursor: pointer;
transition: all .25s cubic-bezier(.4, 0, .2, 1) !important;
letter-spacing: -.2px;
min-width: 80px;
}
.zk-toggle:active { transform: scale(.96); }
.zk-toggle.is-on {
background: #fff !important;
color: #084a25 !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
font-weight: 700 !important;
}
/* ----------- INFO BANNER ----------- */
.zk-info {
background: linear-gradient(135deg, #fef9e7, #fef3c7) !important;
border: none !important;
border-radius: 16px !important;
padding: 14px 16px !important;
font-size: 13px !important;
color: #6b4d12 !important;
line-height: 1.5 !important;
margin-bottom: 18px !important;
box-shadow:
0 1px 2px rgba(184, 137, 61, .08),
inset 0 0 0 1px rgba(184, 137, 61, .15);
position: relative;
}
.zk-info strong {
color: #4a3107 !important;
font-weight: 700 !important;
}
/* ----------- KATEGORİ TAB'LARI ----------- */
.zk-tabs {
display: flex !important;
gap: 10px !important;
overflow-x: auto;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
padding: 4px 0 12px !important;
margin-bottom: 14px !important;
scrollbar-width: none;
}
.zk-tabs::-webkit-scrollbar { display: none; }
.zk-tab {
scroll-snap-align: start;
flex: 0 0 auto !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
width: 88px !important;
height: 88px !important;
background: #fff !important;
border: 0 !important;
border-radius: 18px !important;
padding: 12px 8px !important;
cursor: pointer;
transition: all .2s cubic-bezier(.4, 0, .2, 1) !important;
box-shadow:
0 1px 3px rgba(0, 0, 0, .06),
0 1px 2px rgba(0, 0, 0, .04);
position: relative;
}
.zk-tab:active { transform: scale(.95); }
.zk-tab-ico {
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center;
justify-content: center;
color: var(--c, #64748b) !important;
background: color-mix(in srgb, var(--c, #64748b) 12%, transparent);
border-radius: 10px;
transition: all .2s ease;
}
.zk-tab-ico svg {
width: 20px; height: 20px;
stroke: currentColor;
}
.zk-tab-ad {
font-size: 11px !important;
font-weight: 600 !important;
color: #475569 !important;
letter-spacing: -.1px;
line-height: 1.1;
text-align: center;
}
.zk-tab.is-active {
background: var(--c, #16a34a) !important;
box-shadow:
0 1px 2px color-mix(in srgb, var(--c, #16a34a) 25%, transparent),
0 8px 20px color-mix(in srgb, var(--c, #16a34a) 35%, transparent);
transform: translateY(-1px);
}
.zk-tab.is-active .zk-tab-ico {
background: rgba(255, 255, 255, .25) !important;
color: #fff !important;
}
.zk-tab.is-active .zk-tab-ad {
color: #fff !important;
}
/* ----------- FORM KARTI ----------- */
.zk-form-card {
background: #fff !important;
border-radius: 18px !important;
padding: 18px !important;
margin-bottom: 18px !important;
box-shadow:
0 1px 3px rgba(0, 0, 0, .04),
0 4px 16px rgba(0, 0, 0, .04);
border: 1px solid rgba(0, 0, 0, .03);
}
.zk-form {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
}
.zk-row { display: flex; flex-direction: column; gap: 8px; }
.zk-row > label {
font-size: 12px !important;
font-weight: 700 !important;
color: #6b7280 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
margin-bottom: 2px;
}
/* iOS-tarzı input */
.zk-input {
background: #f3f4f6 !important;
border: 1.5px solid transparent !important;
border-radius: 12px !important;
padding: 14px 16px !important;
font-size: 16px !important;
font-weight: 500 !important;
color: #111827 !important;
width: 100%;
transition: all .2s ease !important;
-webkit-appearance: none;
appearance: none;
font-family: inherit;
letter-spacing: -.2px;
}
.zk-input::placeholder {
color: #9ca3af;
font-weight: 400;
}
.zk-input:focus {
outline: none !important;
background: #fff !important;
border-color: #16a34a !important;
box-shadow: 0 0 0 4px rgba(22, 163, 74, .12) !important;
}
/* Select için ek ok */
select.zk-input {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 14px center !important;
background-size: 16px 16px !important;
background-color: #f3f4f6 !important;
padding-right: 40px !important;
cursor: pointer;
}
select.zk-input:focus {
background-color: #fff !important;
}
/* iOS-tarzı radio grup */
.zk-radio-row {
display: flex !important;
gap: 8px !important;
background: #f3f4f6;
padding: 4px;
border-radius: 12px;
}
.zk-radio {
flex: 1;
display: flex !important;
align-items: center !important;
justify-content: center;
cursor: pointer;
position: relative;
}
.zk-radio input[type="radio"] {
position: absolute;
opacity: 0;
width: 0; height: 0;
}
.zk-radio span {
flex: 1;
text-align: center;
padding: 10px 14px;
border-radius: 9px;
font-size: 14px;
font-weight: 600;
color: #6b7280;
transition: all .2s ease;
letter-spacing: -.1px;
}
.zk-radio input[type="radio"]:checked + span {
background: #fff;
color: #084a25;
box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}
/* Sepete Ekle butonu */
.zk-add-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
background: linear-gradient(180deg, #16a34a, #0d6e3a) !important;
color: #fff !important;
border: 0 !important;
border-radius: 14px !important;
padding: 16px 18px !important;
font-size: 16px !important;
font-weight: 700 !important;
cursor: pointer;
letter-spacing: -.2px;
margin-top: 4px !important;
box-shadow:
0 1px 2px rgba(13, 110, 58, .15),
0 4px 12px rgba(13, 110, 58, .25);
transition: all .15s cubic-bezier(.4, 0, .2, 1) !important;
-webkit-tap-highlight-color: transparent;
min-height: 50px;
}
.zk-add-btn:active {
transform: scale(.97);
box-shadow: 0 1px 4px rgba(13, 110, 58, .2);
}
.zk-add-btn .zk-icon-sm svg {
width: 18px; height: 18px;
}
.zk-form-not {
background: #fef9e7 !important;
border: 1px solid #fde68a !important;
border-left: 3px solid #d97706 !important;
border-radius: 10px !important;
padding: 12px 14px !important;
font-size: 13px !important;
color: #6b4d12 !important;
line-height: 1.5 !important;
}
.zk-form-not strong { color: #4a3107 !important; }
/* ----------- SEPET ----------- */
.zk-sepet {
background: #fff !important;
border-radius: 18px !important;
padding: 16px !important;
margin-bottom: 16px !important;
box-shadow:
0 1px 3px rgba(0, 0, 0, .04),
0 4px 16px rgba(0, 0, 0, .04);
border: 1px solid rgba(0, 0, 0, .03);
}
.zk-sepet-baslik {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
margin-bottom: 12px !important;
padding-bottom: 12px;
border-bottom: 1px solid #f1f5f9;
}
.zk-sepet-baslik > span:first-child {
font-size: 14px !important;
font-weight: 700 !important;
color: #111827 !important;
letter-spacing: -.1px;
}
.zk-sepet-temizle {
background: rgba(220, 38, 38, .1) !important;
color: #dc2626 !important;
border: 0 !important;
padding: 6px 12px !important;
border-radius: 8px !important;
font-size: 12px !important;
font-weight: 700 !important;
cursor: pointer;
transition: all .15s ease;
letter-spacing: -.1px;
}
.zk-sepet-temizle:active { transform: scale(.95); }
.zk-sepet-bos {
text-align: center !important;
padding: 32px 16px !important;
color: #9ca3af !important;
font-size: 13px !important;
font-weight: 500 !important;
}
.zk-sepet-list {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
/* ----------- ANA BUTON (Hesapla) ----------- */
.zk-hesapla-btn {
width: 100%;
background: linear-gradient(180deg, #16a34a, #0a5128) !important;
color: #fff !important;
border: 0 !important;
border-radius: 16px !important;
padding: 18px 20px !important;
font-size: 17px !important;
font-weight: 700 !important;
cursor: pointer;
letter-spacing: -.3px;
margin-bottom: 14px !important;
min-height: 56px;
box-shadow:
0 1px 2px rgba(13, 110, 58, .2),
0 8px 24px rgba(13, 110, 58, .3);
transition: all .15s cubic-bezier(.4, 0, .2, 1) !important;
-webkit-tap-highlight-color: transparent;
}
.zk-hesapla-btn:active:not(:disabled) {
transform: scale(.98);
box-shadow: 0 2px 8px rgba(13, 110, 58, .25);
}
.zk-hesapla-btn:disabled {
background: #d1d5db !important;
color: #9ca3af !important;
cursor: not-allowed;
box-shadow: none !important;
}
/* ----------- GEÇMİŞ LİNK ----------- */
.zk-gecmis-link {
width: 100%;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
background: #fff !important;
color: #475569 !important;
border: 1.5px solid #e5e7eb !important;
border-radius: 14px !important;
padding: 14px 16px !important;
font-size: 14px !important;
font-weight: 600 !important;
cursor: pointer;
letter-spacing: -.1px;
transition: all .15s ease !important;
-webkit-tap-highlight-color: transparent;
}
.zk-gecmis-link:active {
background: #f3f4f6 !important;
transform: scale(.99);
}
.zk-gecmis-link .zk-icon-sm svg { width: 16px; height: 16px; }
/* ----------- SEPET ITEM ----------- */
.zk-sepet-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: #f9fafb;
border-radius: 12px;
transition: background .15s ease;
}
.zk-sepet-item-ico {
width: 40px; height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
flex-shrink: 0;
}
.zk-sepet-item-ico svg { width: 20px; height: 20px; }
.zk-sepet-item-info { flex: 1; min-width: 0; }
.zk-sepet-item-ad {
font-size: 14px;
font-weight: 600;
color: #111827;
letter-spacing: -.1px;
}
.zk-sepet-item-detay {
font-size: 12px;
color: #6b7280;
margin-top: 2px;
}
.zk-sepet-item-tutar {
font-size: 14px;
font-weight: 700;
color: #084a25;
letter-spacing: -.2px;
text-align: right;
white-space: nowrap;
}
.zk-sepet-item-sil {
background: transparent !important;
border: 0 !important;
color: #9ca3af;
cursor: pointer;
padding: 6px;
border-radius: 8px;
flex-shrink: 0;
}
.zk-sepet-item-sil:active {
background: rgba(220, 38, 38, .1) !important;
color: #dc2626;
}
/* ----------- DARK MODE ----------- */
html[data-tema="dark"] .zk-wrap {
background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%) !important;
}
html[data-tema="dark"] .zk-form-card,
html[data-tema="dark"] .zk-sepet,
html[data-tema="dark"] .zk-tab {
background: #1e293b !important;
border-color: #334155 !important;
}
html[data-tema="dark"] .zk-input {
background: #334155 !important;
color: #f9fafb !important;
}
html[data-tema="dark"] .zk-input:focus { background: #475569 !important; }
html[data-tema="dark"] .zk-tab-ad { color: #cbd5e1 !important; }
html[data-tema="dark"] .zk-row > label { color: #94a3b8 !important; }
html[data-tema="dark"] .zk-sepet-baslik > span:first-child { color: #f9fafb !important; }
html[data-tema="dark"] .zk-radio-row { background: #334155; }
html[data-tema="dark"] .zk-radio input[type="radio"]:checked + span {
background: #1e293b;
color: #4ade80;
}
/* ----------- iPhone notch/safe-area ----------- */
@supports (padding: max(0px)) {
.zk-wrap {
padding-bottom: max(110px, calc(110px + env(safe-area-inset-bottom))) !important;
}
}
/* === KURAN ÖĞRENİYORUM PRO v2.1 === */
/* =====================================================================
* KURAN ÖĞRENİYORUM — Premium iOS Tasarım v2
* Mevcut .ko-* class'larını override eder. JS değişmedi.
* app.css'in EN SONUNA eklenir.
* ===================================================================== */
[data-view="kuran-ogren"], .ko-app {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: -0.01em;
}
.ko-app {
background: linear-gradient(180deg, #f8faf6 0%, #f1f5ef 100%) !important;
min-height: calc(100vh - 56px);
padding: 12px 16px calc(110px + env(safe-area-inset-bottom, 0)) !important;
}
/* ============== GERİ BUTONU ============== */
.ko-back {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
background: #fff !important;
border: 1.5px solid #e5e7eb !important;
color: #475569 !important;
padding: 10px 16px 10px 12px !important;
border-radius: 999px !important;
font-size: 14px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all .15s ease !important;
margin-bottom: 16px !important;
box-shadow: 0 1px 2px rgba(0,0,0,.04);
letter-spacing: -.1px;
-webkit-tap-highlight-color: transparent;
}
.ko-back:active {
background: #f3f4f6 !important;
transform: scale(.97);
}
/* ============== DERS KARTI (ANA) ============== */
.ko-ders-card {
background: #fff !important;
border-radius: 24px !important;
padding: 32px 24px 26px !important;
text-align: center !important;
margin-bottom: 16px !important;
box-shadow:
0 1px 3px rgba(0, 0, 0, .04),
0 8px 32px rgba(13, 110, 58, .08) !important;
border: 1px solid rgba(13, 110, 58, .06) !important;
position: relative;
overflow: hidden;
}
/* Üst ince yeşil çizgi */
.ko-ders-card::before {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 60px; height: 4px;
background: linear-gradient(90deg, #16a34a, #0d6e3a);
border-radius: 0 0 4px 4px;
}
/* ============== ARAPÇA HARF (BÜYÜK) ============== */
.ko-ders-arabic-big {
font-size: 96px !important;
font-family: 'Amiri', 'Scheherazade New', 'Noto Naskh Arabic', serif !important;
color: #084a25 !important;
line-height: 1.2 !important;
margin: 8px 0 20px !important;
font-weight: 600 !important;
text-shadow: 0 2px 12px rgba(13, 110, 58, .12);
letter-spacing: 0;
}
/* ============== DERS BAŞLIK ============== */
.ko-ders-title {
font-size: 28px !important;
font-weight: 800 !important;
color: #111827 !important;
letter-spacing: -.6px !important;
margin-bottom: 4px !important;
}
.ko-ders-okunus {
font-size: 15px !important;
color: #6b7280 !important;
font-style: italic !important;
font-weight: 500 !important;
margin-bottom: 18px !important;
letter-spacing: -.1px;
}
/* ============== SES BUTONLARI ============== */
.ko-audio-player {
display: flex !important;
gap: 10px !important;
justify-content: center !important;
margin: 18px 0 !important;
}
.ko-audio-btn {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
background: linear-gradient(180deg, #16a34a, #0d6e3a) !important;
color: #fff !important;
border: 0 !important;
padding: 13px 26px !important;
border-radius: 999px !important;
font-size: 15px !important;
font-weight: 700 !important;
cursor: pointer !important;
letter-spacing: -.2px;
box-shadow:
0 1px 2px rgba(13, 110, 58, .2),
0 6px 16px rgba(13, 110, 58, .25);
transition: all .15s cubic-bezier(.4, 0, .2, 1) !important;
-webkit-tap-highlight-color: transparent;
min-height: 46px;
}
.ko-audio-btn:active {
transform: scale(.96);
box-shadow: 0 1px 4px rgba(13, 110, 58, .2);
}
.ko-audio-btn svg {
width: 18px !important;
height: 18px !important;
}
.ko-audio-btn.is-secondary {
background: #fff !important;
color: #475569 !important;
border: 1.5px solid #e5e7eb !important;
box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
}
.ko-audio-btn.is-secondary:active {
background: #f3f4f6 !important;
}
/* ============== ANLAM ============== */
.ko-ders-anlam {
font-size: 15px !important;
color: #475569 !important;
line-height: 1.6 !important;
margin: 16px 0 !important;
font-weight: 500 !important;
padding: 0 8px;
letter-spacing: -.1px;
}
/* ============== İPUCU KUTUSU ============== */
.ko-ders-desc {
background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
border: 1px solid rgba(59, 130, 246, .15) !important;
border-radius: 14px !important;
padding: 12px 16px !important;
font-size: 13px !important;
color: #1e40af !important;
line-height: 1.5 !important;
margin: 16px 0 4px !important;
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
text-align: left !important;
font-weight: 500;
}
.ko-ders-desc strong {
color: #1e3a8a !important;
font-weight: 700 !important;
}
/* ============== ÖZ DEĞERLENDİRME ============== */
.ko-ozdegerlendirme {
background: #fff !important;
border-radius: 20px !important;
padding: 22px 20px !important;
text-align: center !important;
margin-bottom: 16px !important;
box-shadow:
0 1px 3px rgba(0, 0, 0, .04),
0 4px 16px rgba(0, 0, 0, .04) !important;
border: 1px solid rgba(0, 0, 0, .03);
}
.ko-ozdeg-title {
font-size: 14px !important;
font-weight: 600 !important;
color: #475569 !important;
margin-bottom: 14px !important;
letter-spacing: -.1px;
}
/* Yıldızlar */
.ko-yildizlar {
display: flex !important;
justify-content: center !important;
gap: 8px !important;
}
.ko-yildiz {
background: transparent !important;
border: 0 !important;
color: #d1d5db !important;
font-size: 36px !important;
cursor: pointer !important;
transition: all .2s cubic-bezier(.4, 0, .2, 1) !important;
padding: 4px 6px !important;
line-height: 1 !important;
-webkit-tap-highlight-color: transparent;
}
.ko-yildiz:hover {
color: #fbbf24 !important;
transform: scale(1.15);
}
.ko-yildiz:active {
transform: scale(1.25) !important;
}
.ko-yildiz.is-active {
color: #f59e0b !important;
text-shadow: 0 4px 12px rgba(245, 158, 11, .35);
filter: drop-shadow(0 2px 4px rgba(245, 158, 11, .3));
}
/* ============== MİNİ QUIZ BÖLÜMÜ ============== */
.ko-quiz-section {
background: #fff !important;
border-radius: 20px !important;
padding: 20px !important;
margin-bottom: 16px !important;
box-shadow:
0 1px 3px rgba(0, 0, 0, .04),
0 4px 16px rgba(0, 0, 0, .04) !important;
border: 1px solid rgba(0, 0, 0, .03);
}
.ko-section-title-sm {
font-size: 12px !important;
font-weight: 700 !important;
color: #16a34a !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
margin-bottom: 14px !important;
}
.ko-quiz-item {
margin-bottom: 18px !important;
padding-bottom: 18px !important;
border-bottom: 1px solid #f1f5f9 !important;
}
.ko-quiz-item:last-child {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-bottom: 0 !important;
}
.ko-quiz-soru {
font-size: 15px !important;
font-weight: 700 !important;
color: #111827 !important;
margin-bottom: 12px !important;
letter-spacing: -.2px;
line-height: 1.4;
}
.ko-quiz-no {
display: inline-block;
width: 24px; height: 24px;
background: linear-gradient(135deg, #16a34a, #0d6e3a);
color: #fff;
border-radius: 50%;
text-align: center;
line-height: 24px;
font-size: 12px;
font-weight: 800;
margin-right: 8px;
letter-spacing: 0;
}
.ko-quiz-secenekler {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
.ko-quiz-secenek {
background: #f9fafb !important;
border: 1.5px solid #e5e7eb !important;
color: #374151 !important;
padding: 14px 18px !important;
border-radius: 12px !important;
font-size: 15px !important;
font-weight: 600 !important;
cursor: pointer !important;
text-align: left !important;
transition: all .15s cubic-bezier(.4, 0, .2, 1) !important;
letter-spacing: -.1px;
width: 100%;
-webkit-tap-highlight-color: transparent;
position: relative;
}
.ko-quiz-secenek:hover {
border-color: #16a34a !important;
background: #f0fdf4 !important;
}
.ko-quiz-secenek:active {
transform: scale(.99);
}
.ko-quiz-secenek.is-correct,
.ko-quiz-secenek.correct {
background: linear-gradient(135deg, #dcfce7, #bbf7d0) !important;
border-color: #16a34a !important;
color: #084a25 !important;
font-weight: 700 !important;
}
.ko-quiz-secenek.is-wrong,
.ko-quiz-secenek.wrong {
background: linear-gradient(135deg, #fee2e2, #fecaca) !important;
border-color: #dc2626 !important;
color: #7f1d1d !important;
}
.ko-quiz-aciklama {
margin-top: 10px !important;
padding: 10px 14px !important;
background: #fef3c7 !important;
border-left: 3px solid #f59e0b !important;
border-radius: 8px !important;
font-size: 13px !important;
color: #6b4d12 !important;
line-height: 1.5;
}
/* ============== "DERS TAMAMLA" BUTONU ============== */
.ko-finish-btn {
width: 100% !important;
background: linear-gradient(180deg, #16a34a, #0a5128) !important;
color: #fff !important;
border: 0 !important;
padding: 18px 20px !important;
border-radius: 16px !important;
font-size: 17px !important;
font-weight: 700 !important;
cursor: pointer !important;
letter-spacing: -.3px;
margin-top: 10px !important;
min-height: 56px;
box-shadow:
0 1px 2px rgba(13, 110, 58, .2),
0 8px 24px rgba(13, 110, 58, .3) !important;
transition: all .15s cubic-bezier(.4, 0, .2, 1) !important;
-webkit-tap-highlight-color: transparent;
}
.ko-finish-btn:active:not(:disabled) {
transform: scale(.98);
box-shadow: 0 2px 8px rgba(13, 110, 58, .25) !important;
}
.ko-finish-btn:disabled {
background: #d1d5db !important;
color: #9ca3af !important;
cursor: not-allowed !important;
box-shadow: none !important;
}
/* ============== FOOTER DUA ============== */
.ko-footer-dua {
text-align: center !important;
padding: 20px 16px !important;
font-style: italic !important;
color: #6b7280 !important;
font-size: 13px !important;
font-family: 'Amiri', serif !important;
line-height: 1.7;
}
/* ============== SECTION TITLE ============== */
.ko-section-title-v2 {
font-size: 18px !important;
font-weight: 800 !important;
color: #111827 !important;
letter-spacing: -.4px !important;
margin: 18px 0 10px !important;
}
.ko-section-sub {
font-size: 13px !important;
color: #6b7280 !important;
margin-bottom: 14px !important;
font-weight: 500;
}
/* ============== KATEGORİ KARTLARI ============== */
.ko-kategori-list {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
margin-bottom: 18px !important;
}
.ko-kat-v2 {
background: #fff !important;
border-radius: 18px !important;
padding: 16px !important;
box-shadow:
0 1px 3px rgba(0, 0, 0, .04),
0 4px 16px rgba(0, 0, 0, .04) !important;
border: 1px solid rgba(0, 0, 0, .04) !important;
cursor: pointer !important;
transition: all .2s cubic-bezier(.4, 0, .2, 1) !important;
-webkit-tap-highlight-color: transparent;
}
.ko-kat-v2:active { transform: scale(.99); }
.ko-kat-v2.is-complete {
background: linear-gradient(135deg, #f0fdf4, #dcfce7) !important;
border-color: rgba(22, 163, 74, .25) !important;
}
.ko-kat-head {
display: flex !important;
align-items: center !important;
gap: 14px !important;
margin-bottom: 12px !important;
}
.ko-kat-name-v2 {
font-size: 16px !important;
font-weight: 800 !important;
color: #111827 !important;
letter-spacing: -.3px;
}
.ko-kat-meta-v2,
.ko-kat-seviye-v2 {
font-size: 12px !important;
color: #6b7280 !important;
font-weight: 600 !important;
}
.ko-kat-prog-bar-v2 {
height: 8px !important;
background: #e5e7eb !important;
border-radius: 999px !important;
overflow: hidden;
margin-top: 8px;
}
.ko-kat-prog-fill-v2 {
height: 100% !important;
background: linear-gradient(90deg, #16a34a, #22c55e) !important;
border-radius: 999px !important;
transition: width .3s ease;
}
.ko-kat-prog-text-v2 {
font-size: 11px !important;
color: #16a34a !important;
font-weight: 700 !important;
margin-top: 4px;
}
.ko-kat-tamam-v2 {
color: #16a34a !important;
font-weight: 700 !important;
}
/* Kilitli kategori */
.ko-kat-locked-v2 {
opacity: .55 !important;
pointer-events: none !important;
position: relative;
}
.ko-kat-locked-v2::after {
content: '🔒';
position: absolute;
top: 50%; right: 16px;
transform: translateY(-50%);
font-size: 18px;
}
/* ============== DERS LİSTESİ ============== */
.ko-ders-list {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
.ko-ders-item {
background: #fff !important;
border-radius: 14px !important;
padding: 14px !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
cursor: pointer !important;
transition: all .15s ease !important;
border: 1px solid rgba(0, 0, 0, .04) !important;
box-shadow: 0 1px 2px rgba(0,0,0,.03);
-webkit-tap-highlight-color: transparent;
}
.ko-ders-item:active { transform: scale(.99); }
.ko-ders-item.is-tamamlandi {
background: linear-gradient(135deg, #f0fdf4, #ffffff) !important;
}
.ko-ders-icon {
width: 44px !important;
height: 44px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: linear-gradient(135deg, #f0fdf4, #dcfce7) !important;
color: #16a34a !important;
border-radius: 12px !important;
font-weight: 800 !important;
font-size: 16px !important;
flex-shrink: 0;
}
.ko-ders-name {
font-size: 15px !important;
font-weight: 700 !important;
color: #111827 !important;
letter-spacing: -.2px;
}
.ko-ders-tip {
font-size: 12px !important;
color: #6b7280 !important;
margin-top: 2px;
font-weight: 500;
}
/* ============== HERO (ANA SAYFA) ============== */
.ko-hero-v2 {
position: relative;
background: linear-gradient(135deg, #0d6e3a 0%, #16a34a 50%, #0a5128 100%) !important;
border-radius: 24px !important;
padding: 22px !important;
color: #fff !important;
overflow: hidden;
margin-bottom: 16px !important;
box-shadow:
0 8px 24px rgba(13, 110, 58, .25),
inset 0 1px 0 rgba(255,255,255,.15);
isolation: isolate;
}
.ko-hero-bg {
position: absolute !important;
inset: 0 !important;
background: radial-gradient(ellipse at top right, rgba(255,255,255,.18), transparent 60%) !important;
pointer-events: none !important;
z-index: 0 !important;
}
.ko-hero-glow {
position: absolute !important;
top: -40% !important;
left: -20% !important;
width: 60% !important;
height: 100% !important;
background: radial-gradient(circle, rgba(251,191,36,.12), transparent 60%) !important;
pointer-events: none !important;
z-index: 0 !important;
}
/* Tüm hero içeriği overlay'lerin üstünde olsun */
.ko-hero-v2 > *:not(.ko-hero-bg):not(.ko-hero-glow) {
position: relative !important;
z-index: 1 !important;
}
.ko-hero-row-top {
display: flex !important;
justify-content: space-between !important;
align-items: flex-start !important;
margin-bottom: 12px !important;
}
.ko-hero-greeting {
flex: 1;
}
.ko-hero-merhaba { font-size: 15px !important; opacity: .95 !important; font-weight: 500 !important; color: #fff !important; }
.ko-hero-bismillah {
font-family: 'Amiri', serif !important;
font-size: 28px !important;
margin-bottom: 6px !important;
opacity: .98 !important;
direction: rtl;
color: #fef3c7 !important;
text-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.ko-hero-rozet {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
background: rgba(255,255,255,.18) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.2) !important;
color: #fff !important;
padding: 8px 14px !important;
border-radius: 999px !important;
font-size: 13px !important;
font-weight: 700 !important;
cursor: pointer !important;
transition: all .15s ease !important;
-webkit-tap-highlight-color: transparent;
}
.ko-hero-rozet:active { transform: scale(.95); }
/* İSTATİSTİK BLOKLARI (3'lü) */
.ko-hero-stats {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 8px !important;
margin: 16px 0 !important;
}
.ko-hero-stat {
background: rgba(255,255,255,.12) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.15) !important;
border-radius: 14px !important;
padding: 12px 8px !important;
text-align: center !important;
color: #fff !important;
}
.ko-hero-stat.is-active-streak {
background: linear-gradient(135deg, rgba(251,191,36,.3), rgba(245,158,11,.25)) !important;
border-color: rgba(251,191,36,.4) !important;
}
.ko-hero-stat-icon {
display: flex !important;
justify-content: center;
margin-bottom: 4px !important;
color: #fef3c7 !important;
}
.ko-hero-stat-num {
font-size: 22px !important;
font-weight: 800 !important;
letter-spacing: -.4px !important;
color: #fff !important;
}
.ko-hero-stat-lbl {
font-size: 10px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
opacity: .85 !important;
color: #fff !important;
margin-top: 2px !important;
}
/* DAİRESEL İLERLEME (varsa) */
.ko-hero-circle-svg { display: block; margin: 0 auto; }
.ko-hero-circle-fill { stroke: #fbbf24 !important; }
.ko-hero-circle-content { color: #fff !important; }
.ko-hero-circle-num { font-size: 28px !important; font-weight: 800 !important; }
.ko-hero-circle-toplam { font-size: 14px !important; opacity: .85 !important; }
.ko-hero-circle-lbl { font-size: 11px !important; opacity: .85 !important; text-transform: uppercase; letter-spacing: 1px; }
.ko-hero-circle-tik { color: #4ade80 !important; }
/* GENEL İLERLEME BARI */
.ko-hero-progress-v2 {
background: rgba(255,255,255,.12) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.15) !important;
border-radius: 16px !important;
padding: 14px 16px !important;
margin-top: 8px !important;
}
.ko-hero-progress-bar {
height: 8px !important;
background: rgba(255,255,255,.2) !important;
border-radius: 999px !important;
overflow: hidden !important;
margin: 8px 0 !important;
}
.ko-hero-progress-fill {
height: 100% !important;
background: linear-gradient(90deg, #fbbf24, #f59e0b) !important;
border-radius: 999px !important;
}
.ko-hero-progress-text { font-size: 13px !important; opacity: .95 !important; color: #fff !important; font-weight: 600; }
.ko-hero-progress-yuzde { font-size: 24px !important; font-weight: 800 !important; letter-spacing: -.5px; color: #fff !important; }
.ko-hero-progress-detay { font-size: 12px !important; opacity: .85 !important; color: #fff !important; }
/* ============== DEVAM ET CTA KARTI ============== */
.ko-next-card-v2 {
background: #fff !important;
border-radius: 20px !important;
padding: 18px !important;
margin-bottom: 16px !important;
position: relative !important;
overflow: hidden !important;
box-shadow:
0 1px 3px rgba(0, 0, 0, .04),
0 8px 24px rgba(13, 110, 58, .1) !important;
border: 1px solid rgba(13, 110, 58, .08) !important;
}
.ko-next-tag {
display: inline-block !important;
background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
color: #fff !important;
padding: 4px 12px !important;
border-radius: 999px !important;
font-size: 10px !important;
font-weight: 800 !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
margin-bottom: 8px !important;
box-shadow: 0 2px 6px rgba(245, 158, 11, .3);
}
.ko-next-title-v2 {
font-size: 20px !important;
font-weight: 800 !important;
color: #111827 !important;
letter-spacing: -.4px !important;
margin-bottom: 4px !important;
}
.ko-next-cta {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
background: linear-gradient(180deg, #16a34a, #0d6e3a) !important;
color: #fff !important;
border: 0 !important;
padding: 12px 22px !important;
border-radius: 999px !important;
font-size: 14px !important;
font-weight: 700 !important;
cursor: pointer !important;
margin-top: 14px !important;
box-shadow: 0 4px 12px rgba(13, 110, 58, .25) !important;
transition: all .15s ease !important;
-webkit-tap-highlight-color: transparent;
}
.ko-next-cta:active { transform: scale(.97); }
/* ============== ROZETLER ============== */
.ko-rozet-stripe {
background: #fff !important;
border-radius: 16px !important;
padding: 16px !important;
margin-bottom: 16px !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, .04), 0 4px 16px rgba(0, 0, 0, .04) !important;
border: 1px solid rgba(0, 0, 0, .03);
}
.ko-rozet-stripe-list {
display: flex !important;
gap: 10px !important;
overflow-x: auto !important;
scrollbar-width: none;
padding: 4px 0;
}
.ko-rozet-stripe-list::-webkit-scrollbar { display: none; }
.ko-rozet-stripe-item {
flex: 0 0 auto !important;
width: 72px !important;
text-align: center;
opacity: .35;
transition: all .2s ease;
}
.ko-rozet-stripe-item.is-won {
opacity: 1;
}
.ko-rozet-stripe-icon {
width: 56px !important;
height: 56px !important;
border-radius: 50% !important;
background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
display: flex !important;
align-items: center;
justify-content: center;
font-size: 28px;
margin: 0 auto 4px !important;
box-shadow: 0 2px 6px rgba(245, 158, 11, .15);
}
.ko-rozet-stripe-item.is-won .ko-rozet-stripe-icon {
background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
box-shadow: 0 4px 12px rgba(245, 158, 11, .35);
}
.ko-rozet-stripe-ad {
font-size: 11px !important;
font-weight: 600 !important;
color: #6b7280 !important;
letter-spacing: -.1px;
}
/* ============== TEKRAR KARTI ============== */
.ko-tekrar-v2 {
background: linear-gradient(135deg, #fff7ed, #fed7aa) !important;
border-radius: 18px !important;
padding: 16px !important;
margin-bottom: 16px !important;
display: flex !important;
align-items: center !important;
gap: 14px !important;
border: 1px solid rgba(249, 115, 22, .15) !important;
cursor: pointer;
transition: all .15s ease;
}
.ko-tekrar-v2:active { transform: scale(.99); }
.ko-tekrar-icon {
width: 48px !important;
height: 48px !important;
background: linear-gradient(135deg, #fb923c, #f97316) !important;
border-radius: 14px !important;
display: flex !important;
align-items: center;
justify-content: center;
color: #fff;
font-size: 22px;
flex-shrink: 0;
}
.ko-tekrar-baslik {
font-size: 15px !important;
font-weight: 800 !important;
color: #7c2d12 !important;
}
.ko-tekrar-aciklama {
font-size: 12px !important;
color: #9a3412 !important;
font-weight: 500;
}
/* ============== HEDEF SHEET ============== */
.ko-hedef-btn-v2 {
background: #fff !important;
border: 1.5px solid #e5e7eb !important;
color: #475569 !important;
padding: 12px 18px !important;
border-radius: 12px !important;
font-weight: 600 !important;
font-size: 14px !important;
cursor: pointer !important;
transition: all .15s ease !important;
-webkit-tap-highlight-color: transparent;
}
.ko-hedef-btn-v2:active { transform: scale(.97); }
/* ============== DARK MODE ============== */
html[data-tema="dark"] .ko-app {
background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%) !important;
}
html[data-tema="dark"] .ko-ders-card,
html[data-tema="dark"] .ko-ozdegerlendirme,
html[data-tema="dark"] .ko-quiz-section,
html[data-tema="dark"] .ko-kat-v2,
html[data-tema="dark"] .ko-ders-item,
html[data-tema="dark"] .ko-rozet-stripe,
html[data-tema="dark"] .ko-next-card-v2 {
background: #1e293b !important;
border-color: #334155 !important;
}
html[data-tema="dark"] .ko-ders-title,
html[data-tema="dark"] .ko-quiz-soru,
html[data-tema="dark"] .ko-kat-name-v2,
html[data-tema="dark"] .ko-ders-name,
html[data-tema="dark"] .ko-section-title-v2,
html[data-tema="dark"] .ko-next-title-v2 {
color: #f9fafb !important;
}
html[data-tema="dark"] .ko-quiz-secenek {
background: #334155 !important;
border-color: #475569 !important;
color: #e2e8f0 !important;
}
html[data-tema="dark"] .ko-ders-arabic-big {
color: #4ade80 !important;
}
/* ============== iPhone safe-area ============== */
@supports (padding: max(0px)) {
.ko-app {
padding-bottom: max(110px, calc(110px + env(safe-area-inset-bottom))) !important;
}
}
/* =====================================================================
* PDF Revizyonu (Mayıs 2026) — Cemaat geri bildirimi
* - Onboarding: büyük logo, sade fon, geliştirici altyazısı
* - Şehir picker: sadece şehir listesi (ilçe yok), prefix arama
* - Vakitler ekranı: sade tarih/hicri sırası
* ===================================================================== */
/* Onboarding — Hoş geldiniz */
.onb-logo-wrap{
display: flex;
justify-content: center;
margin: 4px 0 22px;
}
.onb-logo{
width: 200px;
max-width: 80%;
height: auto;
object-fit: contain;
mix-blend-mode: multiply; /* beyaz png zemini hoşgeldin fonuna karışır */
filter: drop-shadow(0 8px 24px rgba(41,153,129,.18));
}
.onb-dev-credit{
margin-top: 18px;
text-align: center;
font-size: 12px;
color: var(--c-text-3);
letter-spacing: .3px;
}
/* Onboarding — Şehir picker (ilçe yok, prefix arama) */
.onb-city-search{
margin-top: 4px;
}
.onb-city-search .form-input{
margin-bottom: 8px;
}
.onb-city-list{
max-height: 220px;
overflow-y: auto;
border: 1px solid var(--c-fill-2);
border-radius: 10px;
background: #fff;
-webkit-overflow-scrolling: touch;
}
.onb-city-row{
padding: 11px 14px;
font-size: 14px;
color: var(--c-text-1);
cursor: pointer;
border-bottom: 1px solid var(--c-fill-1);
transition: background .15s;
}
.onb-city-row:last-child{ border-bottom: 0; }
.onb-city-row:hover,
.onb-city-row:active{ background: var(--c-fill-1); }
.onb-city-row.is-selected{
background: rgba(41,153,129,.10);
color: var(--brand);
font-weight: 600;
}
.onb-city-empty{
padding: 24px 16px;
text-align: center;
color: var(--c-text-3);
font-size: 13px;
}
/* Vakitler — sade üst kısım sırası: şehir → hicri (vurgulu) → miladi (küçük) */
.vh2-top .vh2-hicri{
font-size: 15px;
font-weight: 700;
color: #0a2e1c;
margin-top: 4px;
letter-spacing: .3px;
}
.vh2-top .vh2-date{
font-size: 12px;
font-weight: 500;
color: #64748b;
margin-top: 2px;
letter-spacing: .1px;
}
/* Vakit ekranında ses butonu (varsa eski cache'ten) tamamen gizli */
.vh-sound-btn,
#vhSoundBtn{ display: none !important; }
/* =====================================================================
* Fetva Modülü v1.0 — Premium UI
* - Light tema (PDF kuralı: dark yok)
* - Premium kart stilleri, mikro-animasyonlar
* ===================================================================== */
[data-view="fetva"] {
overflow-y: auto;
background: #f8f7f4;
min-height: calc(100vh - 56px - 64px);
}
.fetva-wrap{
padding: 14px 14px 0;
}
/* HERO */
.fetva-hero{
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
background: linear-gradient(135deg, #299981 0%, #1d6f5e 100%);
color: #fff;
border-radius: 16px;
margin-bottom: 14px;
box-shadow: 0 8px 20px rgba(41, 153, 129, .22);
}
.fetva-hero-icon{
width: 48px; height: 48px;
background: rgba(255,255,255,.16);
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
color: #fbe79e;
flex-shrink: 0;
overflow: hidden;
}
.fetva-hero-icon-logo{
background: rgba(255,255,255,.95);
padding: 4px;
box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.fetva-hero-icon-logo img{
width: 100%; height: 100%;
object-fit: contain;
}
.fetva-hero-text{ flex: 1; min-width: 0; }
.fetva-hero-baslik{ font-size: 18px; font-weight: 800; letter-spacing: .2px; }
.fetva-hero-altbaslik{ font-size: 12px; opacity: .92; margin-top: 2px; }
.fetva-hero-btn{
background: #fff !important;
color: #299981 !important;
padding: 8px 14px !important;
font-size: 13px !important;
font-weight: 700 !important;
border-radius: 10px !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
width: auto !important;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.fetva-hero-btn:active{ transform: scale(.96); }
/* ARAMA */
.fetva-search-wrap{
position: relative;
margin-bottom: 18px;
}
.fetva-search-icon{
position: absolute;
left: 14px; top: 50%;
transform: translateY(-50%);
color: var(--c-text-3);
pointer-events: none;
}
.fetva-search-input{
width: 100%;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 12px;
padding: 12px 42px 12px 42px;
font-size: 14px;
font-family: inherit;
color: var(--c-text-1);
outline: none;
transition: border-color .15s, box-shadow .15s;
}
.fetva-search-input:focus{
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(41, 153, 129, .10);
}
.fetva-search-clear{
position: absolute;
right: 8px; top: 50%;
transform: translateY(-50%);
width: 28px; height: 28px;
border: 0;
background: rgba(0,0,0,.06);
color: var(--c-text-2);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background .15s, color .15s;
}
.fetva-search-clear:hover{
background: rgba(0,0,0,.12);
color: var(--c-text-1);
}
.fetva-search-clear:active{
transform: translateY(-50%) scale(.9);
}
/* Arama sonuç başlığı */
.fetva-arama-head{
padding: 14px 16px;
background: rgba(41,153,129,.05);
border-radius: 10px;
margin-bottom: 14px;
border-left: 3px solid var(--brand);
}
.fetva-arama-head-baslik{
font-size: 14px;
font-weight: 700;
color: var(--c-text-1);
line-height: 1.3;
}
.fetva-arama-head-alt{
font-size: 12px;
color: var(--brand);
font-weight: 600;
margin-top: 3px;
}
/* BÖLÜM (Öne çıkanlar / Yeni / Popüler / Kategoriler) */
.fetva-bolum{
margin-bottom: 22px;
}
.fetva-bolum-baslik{
font-size: 13px;
font-weight: 700;
color: var(--c-text-2);
text-transform: uppercase;
letter-spacing: .8px;
margin: 0 4px 10px;
display: flex; align-items: center; gap: 6px;
}
/* ÖNE ÇIKAN KARTLAR — yatay scroll */
.fetva-one-cikar{
display: flex;
gap: 12px;
overflow-x: auto;
padding-bottom: 6px;
margin: 0 -14px;
padding-left: 14px; padding-right: 14px;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.fetva-one-cikar::-webkit-scrollbar{ display: none; }
.fetva-one-cikar-kart{
flex: 0 0 280px;
background: #fff;
border: 1px solid #ececec;
border-radius: 14px;
padding: 14px;
text-align: left;
cursor: pointer;
scroll-snap-align: start;
position: relative;
transition: transform .15s, box-shadow .15s;
font-family: inherit;
}
.fetva-one-cikar-kart:active{ transform: scale(.98); }
.fetva-one-cikar-kart:hover{ box-shadow: 0 8px 22px rgba(0,0,0,.08); }
.fetva-video-badge{
position: absolute; top: 10px; right: 10px;
background: #dc2626;
color: #fff;
font-size: 10px; font-weight: 700;
padding: 3px 7px;
border-radius: 6px;
letter-spacing: .3px;
}
.fetva-one-cikar-kategori{
display: inline-block;
font-size: 11px; font-weight: 600;
color: var(--brand);
background: rgba(41,153,129,.08);
padding: 3px 8px;
border-radius: 6px;
margin-bottom: 8px;
}
.fetva-one-cikar-baslik{
font-size: 15px; font-weight: 700;
color: var(--c-text-1);
line-height: 1.35;
margin-bottom: 6px;
display: -webkit-box;
-webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.fetva-one-cikar-ozet{
font-size: 12.5px;
color: var(--c-text-2);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
}
/* LİSTE KARTLARI */
.fetva-liste{
display: flex; flex-direction: column;
gap: 8px;
}
.fetva-kart{
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border: 1px solid #ececec;
border-radius: 12px;
padding: 12px 12px 12px 14px;
cursor: pointer;
transition: background .15s, transform .15s;
text-align: left;
font-family: inherit;
width: 100%;
}
.fetva-kart:active{ transform: scale(.99); }
.fetva-kart:hover{ background: #fafafa; }
.fetva-kart-icerik{ flex: 1; min-width: 0; }
.fetva-kart-meta{
display: flex; align-items: center; gap: 6px;
font-size: 11px;
color: var(--c-text-3);
margin-bottom: 4px;
flex-wrap: wrap;
}
.fetva-kart-kategori{
color: var(--brand);
font-weight: 600;
background: rgba(41,153,129,.06);
padding: 2px 6px;
border-radius: 5px;
}
.fetva-kart-tarih,
.fetva-kart-okunma{
color: var(--c-text-3);
}
.fetva-kart-okunma::before{
content: '·';
margin-right: 6px;
color: var(--c-text-3);
}
.fetva-kart-baslik{
font-size: 14.5px;
font-weight: 600;
color: var(--c-text-1);
line-height: 1.4;
margin-bottom: 2px;
}
.fetva-kart-ozet{
font-size: 12.5px;
color: var(--c-text-2);
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
/* KATEGORİ GRİDİ — kompakt, mobile-first */
.fetva-kategori-grid{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
@media (min-width: 480px){
.fetva-kategori-grid{ grid-template-columns: repeat(3, 1fr); }
}
.fetva-kategori-kart{
background: #fff;
border: 1px solid #ececec;
border-radius: 12px;
padding: 11px 12px;
cursor: pointer;
text-align: left;
font-family: inherit;
transition: transform .15s, box-shadow .15s, border-color .15s, background .15s;
min-height: 56px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
.fetva-kategori-kart:not(.is-empty):active{ transform: scale(.97); }
.fetva-kategori-kart:not(.is-empty):hover{
border-color: var(--brand);
background: rgba(41,153,129,.03);
box-shadow: 0 4px 12px rgba(41,153,129,.08);
}
.fetva-kategori-kart.is-empty{
opacity: .45;
cursor: not-allowed;
background: #fafafa;
}
.fetva-kategori-kart-ad{
font-size: 13.5px;
font-weight: 700;
color: var(--c-text-1);
margin-bottom: 2px;
line-height: 1.3;
}
.fetva-kategori-kart-sayi{
font-size: 11px;
color: var(--c-text-3);
font-weight: 500;
}
.fetva-kategori-kart:not(.is-empty) .fetva-kategori-kart-sayi{
color: var(--brand);
font-weight: 600;
}
/* DETAY EKRANI */
.fetva-detay-head{
position: sticky;
top: 0; z-index: 50;
background: rgba(255,255,255,.92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid #eee;
display: flex; align-items: center; gap: 8px;
padding: 8px 12px;
min-height: 52px;
}
.fetva-back-btn{
background: rgba(0,0,0,.04);
border: 0;
width: 38px; height: 38px;
border-radius: 10px;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: var(--c-text-1);
transition: background .15s;
padding: 0;
flex-shrink: 0;
}
.fetva-back-btn:active{ background: rgba(0,0,0,.10); }
.fetva-detay-head-text{ flex: 1; min-width: 0; }
.fetva-detay-head-baslik{
font-size: 15px; font-weight: 700;
color: var(--c-text-1);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fetva-detay-head-alt{
font-size: 11px; color: var(--c-text-3);
margin-top: 1px;
}
.fetva-detay-head-kategori{
font-size: 12px; font-weight: 600;
color: var(--brand);
text-transform: uppercase;
letter-spacing: .5px;
}
.fetva-detay{
padding: 16px 18px 0;
max-width: 720px;
margin: 0 auto;
}
.fetva-detay-video{
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
border-radius: 12px;
overflow: hidden;
margin-bottom: 18px;
}
.fetva-detay-video iframe{
position: absolute; inset: 0;
width: 100%; height: 100%;
border: 0;
}
.fetva-detay-baslik{
font-size: 22px;
font-weight: 800;
line-height: 1.3;
color: var(--c-text-1);
margin: 4px 0 8px;
letter-spacing: -.3px;
}
.fetva-detay-meta{
display: flex; gap: 8px; align-items: center;
font-size: 12.5px;
color: var(--c-text-3);
margin-bottom: 18px;
flex-wrap: wrap;
}
.fetva-detay-label{
font-size: 11px;
font-weight: 700;
color: var(--brand);
text-transform: uppercase;
letter-spacing: .8px;
margin-bottom: 6px;
}
.fetva-detay-soru,
.fetva-detay-cevap{
margin-bottom: 22px;
}
.fetva-detay-soru{
background: rgba(41,153,129,.04);
border-left: 3px solid var(--brand);
padding: 12px 14px;
border-radius: 0 10px 10px 0;
}
.fetva-detay-soru-metin,
.fetva-detay-cevap-metin{
font-size: 15px;
line-height: 1.75;
color: var(--c-text-1);
}
.fetva-detay-soru-metin p,
.fetva-detay-cevap-metin p{
margin: 0 0 12px;
}
.fetva-detay-soru-metin p:last-child,
.fetva-detay-cevap-metin p:last-child{ margin-bottom: 0; }
.fetva-detay-kaynak{
font-size: 13px;
color: var(--c-text-2);
padding: 12px 14px;
background: #f6f6f4;
border-radius: 10px;
margin-top: 8px;
}
.fetva-detay-kaynak strong{ color: var(--c-text-1); }
.fetva-kategori-aciklama{
background: #fff;
border: 1px solid #ececec;
border-radius: 12px;
padding: 12px 14px;
font-size: 13.5px;
color: var(--c-text-2);
line-height: 1.55;
margin-bottom: 14px;
}
/* FETVA SOR FORM — Premium SaaS form
Sheet içinde izole class'lar (.fs-*) ile yazıldı çünkü global .form-row/.input yok */
.fs-form{
padding: 4px 2px 4px;
display: flex;
flex-direction: column;
gap: 16px;
}
/* Bilgi banner — yeşil tonlu, hafif */
.fs-info{
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
background: rgba(41,153,129,.06);
border: 1px solid rgba(41,153,129,.14);
border-radius: 12px;
font-size: 13px;
line-height: 1.55;
color: var(--c-text-2);
}
.fs-info-icon{
color: var(--brand);
flex-shrink: 0;
margin-top: 1px;
}
/* Form satırı */
.fs-field{
display: flex;
flex-direction: column;
gap: 6px;
}
/* Label — input üstünde, ASLA çakışmaz */
.fs-label{
display: block;
font-size: 13px;
font-weight: 600;
color: var(--c-text-1);
line-height: 1.3;
padding: 0;
margin: 0;
}
.fs-req{
color: #dc2626;
font-weight: 700;
margin-left: 2px;
}
.fs-opt{
font-size: 11px;
font-weight: 500;
color: var(--c-text-3);
margin-left: 4px;
text-transform: lowercase;
}
/* Input / Textarea / Select — ortak premium stil */
.fs-input{
-webkit-appearance: none;
appearance: none;
width: 100%;
box-sizing: border-box;
background: #fff;
border: 1px solid #d4d4d4;
border-radius: 10px;
padding: 12px 14px;
font-size: 15px;
font-family: inherit;
color: var(--c-text-1);
line-height: 1.4;
outline: none;
transition: border-color .15s, box-shadow .15s, background .15s;
min-height: 46px;
}
.fs-input::placeholder{
color: var(--c-text-3);
opacity: 1;
}
.fs-input:hover{
border-color: #b5b5b5;
}
.fs-input:focus{
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(41,153,129,.12);
background: #fff;
}
.fs-input:disabled{
background: #f5f5f5;
color: var(--c-text-3);
cursor: not-allowed;
}
/* Textarea */
.fs-textarea{
resize: vertical;
min-height: 120px;
padding: 12px 14px;
line-height: 1.55;
font-size: 15px;
}
/* Char sayacı */
.fs-char{
font-size: 11.5px;
font-weight: 500;
color: var(--c-text-3);
text-align: right;
padding: 0 2px;
transition: color .15s;
font-variant-numeric: tabular-nums;
}
.fs-char.is-low{
color: #dc2626;
font-weight: 600;
}
.fs-char.is-ok{
color: #16a34a;
font-weight: 600;
}
.fs-char.is-near{
color: #d97706;
font-weight: 600;
}
/* Select — özel ok ikonu, default browser ok'unu kaldırır */
.fs-select-wrap{
position: relative;
}
.fs-select{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: 40px;
cursor: pointer;
background-color: #fff;
}
.fs-select::-ms-expand{ display: none; }
.fs-select-arrow{
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--c-text-3);
pointer-events: none;
}
/* 2 sütun grid (Telefon + Şehir) */
.fs-grid-2{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
/* Submit button — premium yeşil, gradient + shadow */
.fs-submit{
-webkit-appearance: none;
appearance: none;
width: 100%;
min-height: 52px;
background: linear-gradient(135deg, #299981 0%, #075a30 100%);
color: #fff;
border: 0;
border-radius: 12px;
font-size: 15px;
font-weight: 700;
letter-spacing: .2px;
font-family: inherit;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 6px 16px rgba(41,153,129,.28);
transition: transform .12s, box-shadow .15s, opacity .15s;
margin-top: 6px;
}
.fs-submit:active{
transform: scale(.985);
box-shadow: 0 3px 10px rgba(41,153,129,.22);
}
.fs-submit:disabled,
.fs-submit.is-loading{
opacity: .7;
cursor: not-allowed;
transform: none;
}
.fs-submit.is-loading svg{
animation: fsSpin 1s linear infinite;
}
@keyframes fsSpin{ from{ transform: rotate(0) } to{ transform: rotate(360deg) } }
/* KVKK — küçük, gri, ortalanmış */
.fs-kvkk{
display: flex;
align-items: flex-start;
gap: 6px;
font-size: 11.5px;
color: var(--c-text-3);
line-height: 1.5;
text-align: left;
padding: 4px 2px 8px;
}
/* Sheet body içinde fetva sor formu için ekstra padding yoksa ekle */
.sheet .sheet-body{
padding-bottom: max(20px, env(safe-area-inset-bottom));
}
/* Tab bar yüksekliği için altta boşluk */
[data-view="fetva"] .fetva-wrap:last-child,
[data-view="fetva"] .fetva-detay{
padding-bottom: 80px;
}
/* =====================================================================
* FAALİYETLER - GALERİ BÖLÜMÜ v2.0 (Premium SaaS)
* Faaliyetler tab altında, kartlardan sonra, dua'dan önce
* Tek karta da, 20 karta da güzel duracak şekilde
* ===================================================================== */
.fa-galeri-bolum{
margin: 36px 16px 28px;
}
.fa-galeri-loader{
display: flex; justify-content: center; align-items: center;
padding: 40px;
color: var(--c-text-3);
}
/* Galeri başlığı - klasik tezhip */
.fa-galeri-baslik{
text-align: center;
margin-bottom: 22px;
padding: 8px 0 0;
}
.fa-galeri-baslik-text{ display: inline-block; }
.fa-galeri-baslik-ust{
font-size: 11px;
font-weight: 700;
color: #b8923f;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 6px;
}
.fa-galeri-baslik-alt{
font-size: 26px;
font-weight: 800;
color: #1a1a1a;
letter-spacing: -.4px;
line-height: 1.1;
}
.fa-galeri-baslik-cizgi{
margin: 10px auto 0;
height: 1px;
width: 70px;
background: linear-gradient(90deg, transparent, #d4a857, transparent);
position: relative;
}
.fa-galeri-baslik-cizgi::after{
content: '';
position: absolute;
left: 50%; top: -2.5px;
width: 6px; height: 6px;
background: #d4a857;
border-radius: 50%;
transform: translateX(-50%);
}
/* === KATEGORİ GRID — adaptive (1, 2, 3+ karta göre) === */
.fa-galeri-kategoriler{
display: grid;
gap: 14px;
}
/* Tek kart: ortala, max 420px - sayfada yalnız kalmasın */
.fa-galeri-kategoriler[data-count="1"]{
grid-template-columns: minmax(0, 420px);
justify-content: center;
}
/* 2 kart: yan yana 2 sütun */
.fa-galeri-kategoriler[data-count="2"]{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* 3+ kart: responsive grid */
.fa-galeri-kategoriler{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 600px){
.fa-galeri-kategoriler{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fa-galeri-kategoriler[data-count="1"]{ grid-template-columns: minmax(0, 420px); }
.fa-galeri-kategoriler[data-count="2"]{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px){
.fa-galeri-kategoriler{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* === KART === */
.fa-galeri-kat-kart{
position: relative;
border: 0;
padding: 0;
background: transparent;
cursor: pointer;
font-family: inherit;
border-radius: 16px;
overflow: hidden;
box-shadow:
0 1px 2px rgba(0,0,0,.04),
0 6px 16px rgba(0,0,0,.06);
transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s;
isolation: isolate;
}
.fa-galeri-kat-kart:hover{
transform: translateY(-3px);
box-shadow:
0 2px 4px rgba(0,0,0,.06),
0 12px 28px rgba(0,0,0,.14);
}
.fa-galeri-kat-kart:active{
transform: translateY(-1px) scale(.99);
}
/* Foto alanı - kapsayıcı (tüm kart aspect ratio'lu) */
.fa-galeri-kat-foto{
position: relative;
aspect-ratio: 4 / 5;
background: linear-gradient(135deg, #299981, #1d6f5e);
overflow: hidden;
}
.fa-galeri-kat-foto img{
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .6s cubic-bezier(.4,0,.2,1), filter .3s;
}
.fa-galeri-kat-kart:hover .fa-galeri-kat-foto img{
transform: scale(1.08);
}
/* Gradient overlay - alttan üste koyulaşan */
.fa-galeri-kat-gradient{
position: absolute; inset: 0;
background:
linear-gradient(180deg,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 35%,
rgba(0,0,0,.45) 70%,
rgba(0,0,0,.85) 100%);
transition: background .3s;
}
.fa-galeri-kat-kart:hover .fa-galeri-kat-gradient{
background:
linear-gradient(180deg,
rgba(41,153,129,.1) 0%,
rgba(0,0,0,.2) 35%,
rgba(0,0,0,.55) 70%,
rgba(0,0,0,.92) 100%);
}
/* Foto sayısı badge - sağ üstte */
.fa-galeri-kat-badge{
position: absolute;
top: 10px; right: 10px;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 9px;
background: rgba(255,255,255,.94);
color: #1a1a1a;
font-size: 11.5px;
font-weight: 700;
border-radius: 999px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.fa-galeri-kat-badge svg{ color: var(--brand); }
/* Alt content - başlık + CTA */
.fa-galeri-kat-content{
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 16px 14px 14px;
color: #fff;
text-align: left;
}
.fa-galeri-kat-ad{
font-size: 15px;
font-weight: 800;
line-height: 1.25;
letter-spacing: -.1px;
margin-bottom: 6px;
text-shadow: 0 2px 8px rgba(0,0,0,.5);
display: -webkit-box;
-webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.fa-galeri-kat-cta{
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 600;
color: #fbe79e;
letter-spacing: .3px;
opacity: .92;
transition: opacity .2s, transform .2s;
}
.fa-galeri-kat-kart:hover .fa-galeri-kat-cta{
opacity: 1;
transform: translateX(2px);
}
.fa-galeri-kat-cta svg{ flex-shrink: 0; }
/* Tek kart durumunda mobil: portrait yerine biraz daha kısa */
.fa-galeri-kategoriler[data-count="1"] .fa-galeri-kat-foto{
aspect-ratio: 16 / 10;
}
@media (min-width: 600px){
.fa-galeri-kategoriler[data-count="1"] .fa-galeri-kat-foto{ aspect-ratio: 16 / 10; }
}
/* ============================
* GALERİ KATEGORİ DETAY SAYFASI
* ============================ */
.fa-galeri-head{
position: sticky;
top: 0;
z-index: 50;
background: rgba(255,255,255,.94);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid #eee;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
min-height: 56px;
}
.fa-galeri-back{
background: rgba(0,0,0,.04);
border: 0; width: 40px; height: 40px;
border-radius: 10px; cursor: pointer; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
color: var(--c-text-1);
padding: 0;
transition: background .15s;
}
.fa-galeri-back:active{ background: rgba(0,0,0,.10); }
.fa-galeri-head-text{ flex: 1; min-width: 0; }
.fa-galeri-head-baslik{
font-size: 16px;
font-weight: 700;
color: var(--c-text-1);
line-height: 1.2;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fa-galeri-head-alt{
font-size: 11.5px;
color: var(--c-text-3);
margin-top: 2px;
font-weight: 500;
}
.fa-galeri-aciklama{
padding: 14px 18px;
font-size: 13.5px;
color: var(--c-text-2);
line-height: 1.6;
background: rgba(41,153,129,.04);
border-bottom: 1px solid rgba(41,153,129,.08);
}
/* Foto grid - daha büyük, az sütun, premium görünüm */
.fa-galeri-grid{
padding: 16px 14px 0;
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
@media (min-width: 480px){
.fa-galeri-grid{ grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (min-width: 900px){
.fa-galeri-grid{ grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (min-width: 1400px){
.fa-galeri-grid{ grid-template-columns: repeat(4, 1fr); }
}
.fa-galeri-foto{
position: relative;
aspect-ratio: 4 / 5;
border-radius: 14px;
overflow: hidden;
cursor: pointer;
background: var(--c-fill-2);
border: 0;
padding: 0;
font-family: inherit;
transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .25s;
box-shadow:
0 1px 2px rgba(0,0,0,.04),
0 4px 12px rgba(0,0,0,.06);
}
.fa-galeri-foto:hover{
transform: translateY(-2px);
box-shadow:
0 2px 4px rgba(0,0,0,.06),
0 10px 24px rgba(0,0,0,.12);
}
.fa-galeri-foto:active{ transform: translateY(0) scale(.98); }
.fa-galeri-foto img{
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.fa-galeri-foto:hover img{ transform: scale(1.06); }
/* Foto altyazı - daha kalın gradient, modern */
.fa-galeri-foto-baslik{
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 28px 14px 12px;
font-size: 13px;
font-weight: 600;
color: #fff;
text-align: left;
background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.7) 100%);
line-height: 1.3;
text-shadow: 0 1px 4px rgba(0,0,0,.4);
display: -webkit-box;
-webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.fa-galeri-empty{
padding: 60px 24px;
text-align: center;
color: var(--c-text-3);
font-size: 14px;
}
/* ============================
* LIGHTBOX (full-screen)
* ============================ */
.fa-lightbox{
position: fixed;
inset: 0;
z-index: 10000;
display: none;
animation: faLightboxIn .2s ease;
}
.fa-lightbox.is-open{ display: block; }
@keyframes faLightboxIn{ from{opacity:0} to{opacity:1} }
.fa-lightbox-bg{
position: absolute; inset: 0;
background: rgba(0,0,0,.94);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.fa-lightbox-content{
position: absolute;
inset: 0;
z-index: 1;
padding: 70px 80px 90px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
box-sizing: border-box;
pointer-events: none;
}
.fa-lightbox-content > *{ pointer-events: auto; }
.fa-lightbox-img{
display: block;
max-width: 100%;
max-height: calc(100vh - 200px);
width: auto;
height: auto;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 12px 48px rgba(0,0,0,.7);
}
@media (max-width: 600px){
.fa-lightbox-content{ padding: 60px 16px 80px; }
.fa-lightbox-img{ max-height: calc(100vh - 160px); }
}
.fa-lightbox-caption{
text-align: center;
color: #fff;
max-width: 600px;
padding: 0 12px;
}
.fa-lightbox-baslik{
font-size: 16px;
font-weight: 700;
margin-bottom: 4px;
}
.fa-lightbox-aciklama{
font-size: 13px;
color: rgba(255,255,255,.78);
line-height: 1.5;
}
.fa-lightbox-counter{
font-size: 12px;
color: rgba(255,255,255,.6);
font-weight: 500;
letter-spacing: .5px;
}
.fa-lightbox-close,
.fa-lightbox-nav{
position: absolute;
z-index: 2;
width: 44px; height: 44px;
background: rgba(255,255,255,.12);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 0;
border-radius: 50%;
cursor: pointer;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: background .15s, transform .15s;
}
.fa-lightbox-close:hover,
.fa-lightbox-nav:hover{ background: rgba(255,255,255,.22); }
.fa-lightbox-close:active,
.fa-lightbox-nav:active{ transform: scale(.92); }
.fa-lightbox-close{ top: 18px; right: 18px; }
.fa-lightbox-nav{ top: 50%; transform: translateY(-50%); }
.fa-lightbox-nav.prev{ left: 18px; }
.fa-lightbox-nav.next{ right: 18px; }
@media (max-width: 600px){
.fa-lightbox-nav{ width: 40px; height: 40px; }
.fa-lightbox-nav.prev{ left: 10px; }
.fa-lightbox-nav.next{ right: 10px; }
.fa-lightbox-close{ top: 12px; right: 12px; }
}
/* =====================================================================
* MÂRÛF MODÜLÜ — Emr-i bi'l-Mâ'rûf ve Nehy-i ani'l-Münker
* ===================================================================== */
.maruf-view {
background: linear-gradient(180deg, #faf6e8 0%, #f4efe6 100%);
min-height: 100%;
position: relative;
}
.maruf-view .mr-wrap {
max-width: 720px;
margin: 0 auto;
padding: 16px;
padding-top: 64px;
padding-bottom: 90px;
}
/* GLOBAL GERİ BUTONU - sabit üst sol */
.maruf-view .mr-global-back {
position: fixed;
top: 14px;
left: 14px;
z-index: 100;
width: 44px;
height: 44px;
background: #fff;
border: 1px solid #e5dec5;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #1d7363;
box-shadow: 0 4px 14px rgba(0,0,0,.12);
transition: transform .15s;
}
.maruf-view .mr-global-back:active { transform: scale(.92); }
/* HERO */
.maruf-view .mr-hero {
position: relative;
background: linear-gradient(135deg, #1d7363 0%, #2d9379 100%);
color: #fff;
padding: 36px 24px 32px;
border-radius: 20px;
margin-bottom: 22px;
overflow: hidden;
text-align: center;
box-shadow: 0 8px 28px rgba(29, 115, 99, .28);
}
.maruf-view .mr-hero-close {
position: absolute;
top: 14px; right: 14px;
width: 36px; height: 36px;
background: rgba(255,255,255,.18);
color: #fff;
border: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 3;
backdrop-filter: blur(6px);
transition: background .15s;
}
.maruf-view .mr-hero-close:hover { background: rgba(255,255,255,.3); }
.maruf-view .mr-hero-pattern {
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(255,255,255,.08) 0%, transparent 40%),
radial-gradient(circle at 80% 70%, rgba(201,165,87,.18) 0%, transparent 40%);
opacity: .9;
pointer-events: none;
}
.maruf-view .mr-hero-icon {
width: 72px; height: 72px;
margin: 0 auto 14px;
color: #fbe79e;
position: relative;
}
.maruf-view .mr-hero-icon svg { width: 100%; height: 100%; }
.maruf-view .mr-hero-baslik {
font-size: 30px;
font-weight: 800;
letter-spacing: 1px;
margin-bottom: 8px;
position: relative;
}
.maruf-view .mr-hero-arap {
font-size: 17px;
margin-bottom: 8px;
opacity: .9;
font-family: 'Traditional Arabic', 'Amiri', serif;
position: relative;
direction: rtl;
}
.maruf-view .mr-hero-alt {
font-size: 13px;
opacity: .85;
position: relative;
}
/* HEAD (alt ekranlar) */
.maruf-view .mr-head {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 4px 18px;
margin-bottom: 8px;
}
.maruf-view .mr-head-back {
width: 40px; height: 40px;
background: #fff;
border: 1px solid #e5dec5;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #1d7363;
box-shadow: 0 2px 6px rgba(0,0,0,.04);
transition: transform .15s, box-shadow .15s;
}
.maruf-view .mr-head-back:active { transform: scale(.92); }
.maruf-view .mr-head-baslik {
flex: 1;
font-size: 18px;
font-weight: 800;
color: #1f1f1f;
}
.maruf-view .mr-head-spacer { width: 40px; }
/* 5 BÖLÜM KARTI */
.maruf-view .mr-bolumler {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 24px;
}
.maruf-view .mr-bolum-kart {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 18px;
background: #fff;
border: 1px solid #ece4d0;
border-left: 4px solid var(--mr-c, #1d7363);
border-radius: 14px;
cursor: pointer;
text-align: left;
font-family: inherit;
width: 100%;
position: relative;
transition: transform .15s, box-shadow .15s, border-color .15s;
box-shadow: 0 2px 8px rgba(0,0,0,.03);
}
.maruf-view .mr-bolum-kart:hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(0,0,0,.08);
}
.maruf-view .mr-bolum-kart:active { transform: translateY(0); }
.maruf-view .mr-bolum-icon {
width: 52px; height: 52px;
border-radius: 12px;
background: linear-gradient(135deg, var(--mr-c2) 0%, var(--mr-c) 100%);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.maruf-view .mr-bolum-icon svg { width: 32px; height: 32px; }
.maruf-view .mr-bolum-text { flex: 1; min-width: 0; }
.maruf-view .mr-bolum-baslik {
font-size: 16px;
font-weight: 800;
color: #1f1f1f;
margin-bottom: 3px;
}
.maruf-view .mr-bolum-ozet {
font-size: 12.5px;
color: #6a6a6a;
line-height: 1.4;
}
.maruf-view .mr-bolum-ok {
color: #cfc7b1;
flex-shrink: 0;
}
/* ÂYET BLOĞU */
.maruf-view .mr-ayet {
background: linear-gradient(135deg, rgba(201,165,87,.08) 0%, rgba(29,115,99,.06) 100%);
border: 1px dashed #d4c89e;
border-radius: 14px;
padding: 18px 20px;
margin-top: 18px;
text-align: center;
}
.maruf-view .mr-ayet-metin {
font-size: 14.5px;
color: #4a4a4a;
line-height: 1.55;
font-style: italic;
margin-bottom: 8px;
}
.maruf-view .mr-ayet-kaynak {
font-size: 12px;
font-weight: 700;
color: #8b6c2a;
letter-spacing: .5px;
}
/* BÖLÜM INTRO */
.maruf-view .mr-bolum-intro {
display: flex;
gap: 14px;
align-items: flex-start;
background: #fff;
border: 1px solid #ece4d0;
border-radius: 14px;
padding: 16px;
margin-bottom: 18px;
}
.maruf-view .mr-bolum-intro-icon {
width: 44px; height: 44px;
flex-shrink: 0;
color: #c9a557;
}
.maruf-view .mr-bolum-intro-icon svg { width: 100%; height: 100%; }
.maruf-view .mr-bolum-intro-text {
font-size: 13.5px;
line-height: 1.5;
color: #4a4a4a;
}
/* LOADER */
.maruf-view .mr-loader {
padding: 60px 20px;
display: flex;
justify-content: center;
}
.maruf-view .mr-loader-spin {
width: 48px;
height: 48px;
color: #c9a557;
animation: mr-spin 2s linear infinite;
}
.maruf-view .mr-loader-spin svg { width: 100%; height: 100%; }
@keyframes mr-spin { to { transform: rotate(360deg); } }
.maruf-view .mr-empty {
padding: 50px 20px;
text-align: center;
color: #999;
font-size: 14px;
}
/* ==================== 1) STREAK ==================== */
.maruf-view .mr-streak {
display: flex;
align-items: center;
gap: 20px;
background: #fff;
border: 1px solid #ece4d0;
border-radius: 16px;
padding: 20px;
margin-bottom: 18px;
box-shadow: 0 4px 14px rgba(0,0,0,.04);
}
.maruf-view .mr-streak-ring {
position: relative;
width: 100px;
height: 100px;
flex-shrink: 0;
}
.maruf-view .mr-streak-ring svg { width: 100%; height: 100%; }
.maruf-view .mr-streak-content {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.maruf-view .mr-streak-num {
font-size: 28px;
font-weight: 800;
color: #1d7363;
line-height: 1;
}
.maruf-view .mr-streak-lbl {
font-size: 11px;
color: #999;
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 2px;
}
.maruf-view .mr-streak-meta {
flex: 1;
min-width: 0;
}
.maruf-view .mr-streak-toplam {
display: flex;
align-items: baseline;
gap: 6px;
margin-bottom: 6px;
}
.maruf-view .mr-streak-toplam-num {
font-size: 24px;
font-weight: 800;
color: #c9a557;
}
.maruf-view .mr-streak-toplam-lbl {
font-size: 13px;
color: #6a6a6a;
}
.maruf-view .mr-streak-desc {
font-size: 13px;
color: #4a4a4a;
line-height: 1.4;
}
/* GÖREV KARTI */
.maruf-view .mr-gorev-kart {
background: #fff;
border: 1px solid #ece4d0;
border-radius: 16px;
padding: 22px 20px;
margin-bottom: 16px;
position: relative;
overflow: hidden;
}
.maruf-view .mr-gorev-kart::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, #c9a557 0%, #1d7363 100%);
}
.maruf-view .mr-gorev-tag {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(201,165,87,.12);
color: #8b6c2a;
padding: 6px 12px;
border-radius: 100px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .5px;
margin-bottom: 14px;
}
.maruf-view .mr-gorev-tag-icon {
width: 18px; height: 18px;
}
.maruf-view .mr-gorev-tag-icon svg { width: 100%; height: 100%; }
.maruf-view .mr-gorev-baslik {
font-size: 19px;
font-weight: 800;
color: #1f1f1f;
margin-bottom: 10px;
line-height: 1.3;
}
.maruf-view .mr-gorev-aciklama {
font-size: 14.5px;
color: #4a4a4a;
line-height: 1.6;
margin-bottom: 16px;
}
.maruf-view .mr-gorev-alinti {
background: linear-gradient(135deg, rgba(29,115,99,.05) 0%, rgba(201,165,87,.08) 100%);
border-left: 3px solid #c9a557;
padding: 14px 16px;
border-radius: 10px;
margin-bottom: 16px;
}
.maruf-view .mr-gorev-alinti-quote {
font-size: 13.5px;
font-style: italic;
color: #4a4a4a;
line-height: 1.5;
margin-bottom: 6px;
}
.maruf-view .mr-gorev-alinti-kaynak {
font-size: 12px;
font-weight: 700;
color: #8b6c2a;
}
.maruf-view .mr-gorev-btn {
width: 100%;
background: linear-gradient(135deg, #1d7363 0%, #2d9379 100%);
color: #fff;
border: 0;
border-radius: 12px;
padding: 14px;
font-size: 15px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
box-shadow: 0 4px 14px rgba(29,115,99,.25);
transition: transform .15s, box-shadow .15s;
}
.maruf-view .mr-gorev-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(29,115,99,.32);
}
.maruf-view .mr-gorev-btn:disabled {
opacity: .6;
cursor: wait;
}
.maruf-view .mr-gorev-tamam-rozet {
background: linear-gradient(135deg, #1d7363 0%, #2d9379 100%);
color: #fff;
padding: 14px;
border-radius: 12px;
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.maruf-view .mr-gorev-kart.mr-tamam { background: linear-gradient(180deg, #fff 0%, #f7fdf9 100%); }
.maruf-view .mr-niyet {
display: flex;
align-items: center;
gap: 12px;
background: rgba(29,115,99,.05);
border-radius: 12px;
padding: 14px 16px;
margin-bottom: 14px;
}
.maruf-view .mr-niyet-icon {
width: 36px; height: 36px;
color: #1d7363;
flex-shrink: 0;
}
.maruf-view .mr-niyet-icon svg { width: 100%; height: 100%; }
.maruf-view .mr-niyet-text {
font-size: 13.5px;
color: #4a4a4a;
line-height: 1.5;
}
/* KONFETI */
.mr-konfeti {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
overflow: hidden;
}
.mr-konfeti-parca {
position: absolute;
top: -20px;
width: 8px;
height: 12px;
border-radius: 2px;
animation: mr-konf-dus 2.4s linear forwards;
}
@keyframes mr-konf-dus {
0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}
/* ==================== 2) SENARYO ==================== */
.maruf-view .mr-senaryo-grid {
display: flex;
flex-direction: column;
gap: 10px;
}
.maruf-view .mr-senaryo-kart {
display: flex;
align-items: center;
gap: 14px;
background: #fff;
border: 1px solid #ece4d0;
border-radius: 12px;
padding: 14px 16px;
cursor: pointer;
text-align: left;
width: 100%;
font-family: inherit;
transition: transform .15s, border-color .15s, box-shadow .15s;
}
.maruf-view .mr-senaryo-kart:hover {
border-color: #c9a557;
transform: translateX(2px);
box-shadow: 0 4px 12px rgba(201,165,87,.15);
}
.maruf-view .mr-senaryo-num {
width: 36px;
height: 36px;
background: linear-gradient(135deg, #c9a557 0%, #8b6c2a 100%);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 13px;
flex-shrink: 0;
}
.maruf-view .mr-senaryo-baslik {
flex: 1;
font-size: 14.5px;
font-weight: 600;
color: #1f1f1f;
line-height: 1.4;
}
.maruf-view .mr-senaryo-ok { color: #c9a557; flex-shrink: 0; }
/* SENARYO DETAY */
.maruf-view .mr-sd-durumlar {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 18px;
}
.maruf-view .mr-sd-blok {
background: #fff;
border: 1px solid #ece4d0;
border-radius: 14px;
padding: 18px;
position: relative;
}
.maruf-view .mr-sd-yanlis { border-left: 4px solid #b03030; }
.maruf-view .mr-sd-dogru { border-left: 4px solid #1d7363; }
.maruf-view .mr-sd-blok-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.maruf-view .mr-sd-blok-tag {
font-size: 11px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
}
.maruf-view .mr-sd-yanlis .mr-sd-blok-tag { color: #b03030; }
.maruf-view .mr-sd-dogru .mr-sd-blok-tag { color: #1d7363; }
.maruf-view .mr-sd-blok-icon {
width: 32px; height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.maruf-view .mr-yanlis-icon { background: rgba(176,48,48,.12); color: #b03030; }
.maruf-view .mr-dogru-icon { background: rgba(29,115,99,.12); color: #1d7363; }
.maruf-view .mr-sd-blok-text {
font-size: 14.5px;
line-height: 1.6;
color: #2a2a2a;
}
.maruf-view .mr-sd-alinti {
display: flex;
gap: 14px;
background: linear-gradient(135deg, rgba(201,165,87,.08) 0%, rgba(29,115,99,.05) 100%);
border: 1px dashed #d4c89e;
border-radius: 12px;
padding: 18px;
align-items: flex-start;
}
.maruf-view .mr-sd-alinti-icon {
width: 36px; height: 36px;
color: #c9a557;
flex-shrink: 0;
}
.maruf-view .mr-sd-alinti-icon svg { width: 100%; height: 100%; }
.maruf-view .mr-sd-alinti-metin {
font-size: 13.5px;
color: #4a4a4a;
line-height: 1.6;
font-style: italic;
margin-bottom: 6px;
}
.maruf-view .mr-sd-alinti-kaynak {
font-size: 12px;
font-weight: 700;
color: #8b6c2a;
}
/* ==================== 3) KUMBARA ==================== */
.maruf-view .mr-paylas-btn {
width: 100%;
background: linear-gradient(135deg, #c9a557 0%, #8b6c2a 100%);
color: #fff;
border: 0;
border-radius: 12px;
padding: 14px;
font-size: 15px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
margin-bottom: 18px;
box-shadow: 0 4px 14px rgba(201,165,87,.28);
transition: transform .15s;
}
.maruf-view .mr-paylas-btn:hover { transform: translateY(-1px); }
.maruf-view .mr-paylasim-feed {
display: flex;
flex-direction: column;
gap: 12px;
}
.maruf-view .mr-paylasim-kart {
background: #fff;
border: 1px solid #ece4d0;
border-radius: 14px;
padding: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,.03);
}
.maruf-view .mr-paylasim-anon {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.maruf-view .mr-paylasim-anon-icon {
width: 36px; height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #b06a4f 0%, #7d4e3a 100%);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
}
.maruf-view .mr-paylasim-anon-icon svg { width: 100%; height: 100%; }
.maruf-view .mr-paylasim-anon-ad {
font-size: 13px;
font-weight: 700;
color: #1f1f1f;
}
.maruf-view .mr-paylasim-anon-tarih {
font-size: 11.5px;
color: #999;
}
.maruf-view .mr-paylasim-metin {
font-size: 14.5px;
color: #2a2a2a;
line-height: 1.55;
margin-bottom: 14px;
white-space: pre-wrap;
word-wrap: break-word;
}
.maruf-view .mr-paylasim-aksiyon {
display: flex;
justify-content: flex-end;
}
.maruf-view .mr-dua-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(29,115,99,.08);
color: #1d7363;
border: 1px solid rgba(29,115,99,.15);
padding: 8px 14px;
border-radius: 100px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
transition: background .15s, transform .15s;
}
.maruf-view .mr-dua-btn:hover:not(:disabled) {
background: rgba(29,115,99,.15);
transform: translateY(-1px);
}
.maruf-view .mr-dua-aktif {
background: linear-gradient(135deg, #1d7363, #2d9379) !important;
color: #fff !important;
border-color: transparent !important;
cursor: default;
}
.maruf-view .mr-dua-sayi {
background: rgba(255,255,255,.3);
padding: 1px 8px;
border-radius: 100px;
font-size: 11.5px;
font-weight: 800;
}
.maruf-view .mr-dua-btn:not(.mr-dua-aktif) .mr-dua-sayi {
background: rgba(29,115,99,.15);
}
.maruf-view .mr-daha-btn {
width: 100%;
background: #fff;
color: #1d7363;
border: 1px solid #1d7363;
border-radius: 10px;
padding: 11px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
margin-top: 14px;
font-family: inherit;
transition: background .15s;
}
.maruf-view .mr-daha-btn:hover { background: rgba(29,115,99,.05); }
/* MODAL */
.mr-modal-overlay {
position: fixed;
inset: 0;
background: rgba(20,30,28,.55);
backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
padding: 20px;
animation: mr-modal-fade .2s ease;
}
@keyframes mr-modal-fade { from { opacity: 0; } to { opacity: 1; } }
.mr-modal {
background: #fff;
border-radius: 16px;
width: 100%;
max-width: 480px;
overflow: hidden;
box-shadow: 0 24px 64px rgba(0,0,0,.3);
animation: mr-modal-slide .25s cubic-bezier(.2,.9,.3,1);
}
@keyframes mr-modal-slide { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.mr-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid #f0e9d8;
}
.mr-modal-baslik {
font-size: 16px;
font-weight: 800;
color: #1f1f1f;
}
.mr-modal-kapat {
width: 36px; height: 36px;
border: 0;
background: transparent;
color: #999;
cursor: pointer;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background .15s;
}
.mr-modal-kapat:hover { background: #f5efde; color: #1f1f1f; }
.mr-modal-body { padding: 18px 20px; }
.mr-modal-ipucu {
background: rgba(201,165,87,.1);
border-radius: 10px;
padding: 12px 14px;
font-size: 13px;
color: #6a5530;
line-height: 1.5;
margin-bottom: 14px;
}
.mr-modal-textarea {
width: 100%;
min-height: 130px;
border: 1px solid #e5dec5;
border-radius: 10px;
padding: 12px 14px;
font-size: 14.5px;
font-family: inherit;
resize: vertical;
outline: none;
transition: border-color .15s, box-shadow .15s;
background: #faf6e8;
}
.mr-modal-textarea:focus {
border-color: #c9a557;
box-shadow: 0 0 0 3px rgba(201,165,87,.15);
background: #fff;
}
.mr-modal-sayac {
text-align: right;
font-size: 12px;
color: #999;
margin-top: 6px;
}
.mr-modal-foot {
display: flex;
gap: 10px;
padding: 14px 20px 18px;
justify-content: flex-end;
border-top: 1px solid #f0e9d8;
background: #faf6e8;
}
.mr-modal-iptal,
.mr-modal-onay {
border: 0;
border-radius: 10px;
padding: 10px 22px;
font-size: 14px;
font-weight: 700;
font-family: inherit;
cursor: pointer;
transition: transform .15s, opacity .15s;
}
.mr-modal-iptal {
background: #fff;
color: #6a6a6a;
border: 1px solid #e5dec5;
}
.mr-modal-onay {
background: linear-gradient(135deg, #1d7363, #2d9379);
color: #fff;
}
.mr-modal-onay:disabled { opacity: .45; cursor: not-allowed; }
.mr-modal-onay:not(:disabled):hover { transform: translateY(-1px); }
/* ==================== 4) DİJİTAL FARKINDALIK ==================== */
.maruf-view .mr-dij-stat {
display: flex;
gap: 14px;
align-items: center;
background: #fff;
border: 1px solid #ece4d0;
border-left: 4px solid #5d83a8;
border-radius: 14px;
padding: 18px 20px;
margin-bottom: 14px;
}
.maruf-view .mr-dij-stat-icon {
width: 36px; height: 36px;
color: #5d83a8;
flex-shrink: 0;
}
.maruf-view .mr-dij-stat-icon svg { width: 100%; height: 100%; }
.maruf-view .mr-dij-stat-lbl {
font-size: 12px;
color: #999;
text-transform: uppercase;
letter-spacing: .5px;
margin-bottom: 2px;
}
.maruf-view .mr-dij-stat-deger {
font-size: 22px;
font-weight: 800;
color: #3a5a7d;
}
.maruf-view .mr-dij-uyari {
display: flex;
gap: 12px;
align-items: center;
background: linear-gradient(135deg, rgba(176,48,48,.06) 0%, rgba(201,165,87,.06) 100%);
border: 1px solid rgba(176,48,48,.15);
border-radius: 12px;
padding: 14px 16px;
margin-bottom: 18px;
}
.maruf-view .mr-dij-uyari-icon {
width: 32px; height: 32px;
color: #b06a4f;
flex-shrink: 0;
}
.maruf-view .mr-dij-uyari-icon svg { width: 100%; height: 100%; }
.maruf-view .mr-dij-uyari-msg {
font-size: 13.5px;
color: #4a4a4a;
line-height: 1.5;
font-weight: 600;
}
.maruf-view .mr-dij-oneriler {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 18px;
}
.maruf-view .mr-dij-oneri {
display: flex;
gap: 14px;
align-items: center;
background: #fff;
border: 1px solid #ece4d0;
border-radius: 10px;
padding: 14px;
}
.maruf-view .mr-dij-oneri-icon {
width: 32px; height: 32px;
color: #c9a557;
flex-shrink: 0;
}
.maruf-view .mr-dij-oneri-icon svg { width: 100%; height: 100%; }
.maruf-view .mr-dij-oneri-text {
font-size: 13.5px;
color: #2a2a2a;
line-height: 1.5;
}
.maruf-view .mr-dij-reset {
width: 100%;
background: #fff;
color: #999;
border: 1px dashed #d4c89e;
border-radius: 10px;
padding: 12px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
margin-bottom: 18px;
font-family: inherit;
transition: background .15s, color .15s;
}
.maruf-view .mr-dij-reset:hover { background: #faf6e8; color: #1f1f1f; }
/* ==================== 5) HARITA ==================== */
.maruf-view .mr-harita-liste {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 18px;
}
.maruf-view .mr-harita-kart {
display: flex;
align-items: center;
gap: 14px;
background: #fff;
border: 1px solid #ece4d0;
border-left: 3px solid var(--mr-nk, #5a3d6e);
border-radius: 12px;
padding: 14px 16px;
transition: transform .15s, box-shadow .15s;
}
.maruf-view .mr-harita-kart:hover {
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(0,0,0,.06);
}
.maruf-view .mr-harita-pin {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--mr-nk, #5a3d6e);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.maruf-view .mr-harita-icerik { flex: 1; min-width: 0; }
.maruf-view .mr-harita-ad {
font-size: 14.5px;
font-weight: 700;
color: #1f1f1f;
margin-bottom: 4px;
}
.maruf-view .mr-harita-meta {
display: flex;
gap: 10px;
font-size: 12px;
color: #6a6a6a;
}
.maruf-view .mr-harita-tip {
font-weight: 700;
color: var(--mr-nk, #5a3d6e);
}
.maruf-view .mr-harita-mesafe::before {
content: '·';
margin-right: 6px;
color: #ccc;
}
/* RESPONSIVE */
@media (max-width: 480px) {
.maruf-view .mr-wrap { padding: 12px 12px 80px; }
.maruf-view .mr-hero { padding: 28px 18px 24px; }
.maruf-view .mr-hero-baslik { font-size: 26px; }
.maruf-view .mr-hero-arap { font-size: 15px; }
.maruf-view .mr-bolum-icon { width: 46px; height: 46px; }
.maruf-view .mr-bolum-icon svg { width: 28px; height: 28px; }
.maruf-view .mr-streak-ring { width: 84px; height: 84px; }
.maruf-view .mr-streak-num { font-size: 24px; }
}
/* Mârûf harita - telefon linki */
.maruf-view .mr-harita-tel {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 8px;
padding: 6px 12px;
background: rgba(29,115,99,.08);
color: #1d7363;
border-radius: 100px;
font-size: 12.5px;
font-weight: 700;
text-decoration: none;
transition: background .15s;
}
.maruf-view .mr-harita-tel:hover {
background: rgba(29,115,99,.18);
}
/* =====================================================================
* FETVA MODULU - PREMIUM REDESIGN
* Backend/JS dokunulmadi, sadece gorsel iyilestirme.
* Kuran premium ile ayni dil: 3-tone yesil gradient + altin aksan (#fbe79e)
* ===================================================================== */
.view[data-view="fetva"] .fetva-wrap{
padding: 12px 12px 32px !important;
}
/* HERO — 3-tone gradient + radial altin highlight + ornamental corner */
.fetva-hero{
background: linear-gradient(135deg, #1d6f5e 0%, #299981 50%, #2fae93 100%) !important;
border-radius: 22px !important;
padding: 20px 20px 20px 18px !important;
gap: 14px !important;
box-shadow:
0 12px 32px rgba(6,77,40,.32),
0 2px 6px rgba(0,0,0,.08),
inset 0 1px 0 rgba(255,255,255,.10) !important;
position: relative;
overflow: hidden;
margin-bottom: 16px !important;
}
.fetva-hero::before{
content: '';
position: absolute;
top: 0; right: 0;
width: 160px; height: 160px;
background: radial-gradient(circle at top right, rgba(251,231,158,.22), transparent 70%);
pointer-events: none;
}
.fetva-hero::after{
content: '';
position: absolute;
bottom: -30px; left: -30px;
width: 140px; height: 140px;
background: radial-gradient(circle, rgba(13,140,74,.35), transparent 70%);
pointer-events: none;
}
.fetva-hero-icon{
width: 54px !important; height: 54px !important;
background: rgba(255,255,255,.14) !important;
border-radius: 14px !important;
border: 1px solid rgba(251,231,158,.30);
box-shadow: 0 4px 12px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.20);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
position: relative;
z-index: 1;
}
.fetva-hero-icon-logo{
background: rgba(255,255,255,.96) !important;
border-color: rgba(255,255,255,.6) !important;
}
.fetva-hero-baslik{
font-size: 20px !important;
font-weight: 800 !important;
letter-spacing: .3px !important;
text-shadow: 0 1px 2px rgba(0,0,0,.20);
position: relative; z-index: 1;
}
.fetva-hero-altbaslik{
font-size: 12.5px !important;
opacity: .92;
color: #fbe79e !important;
font-weight: 500;
margin-top: 3px !important;
position: relative; z-index: 1;
}
.fetva-hero-btn{
background: linear-gradient(180deg, #fff 0%, #fdf6d8 100%) !important;
color: #1d6f5e !important;
padding: 10px 16px !important;
font-size: 13px !important;
font-weight: 800 !important;
border-radius: 12px !important;
border: 1px solid rgba(251,231,158,.6) !important;
box-shadow:
0 6px 16px rgba(0,0,0,.18),
0 1px 2px rgba(0,0,0,.10),
inset 0 1px 0 rgba(255,255,255,.9) !important;
position: relative; z-index: 2;
transition: transform .15s ease, box-shadow .15s ease;
}
.fetva-hero-btn:active{
transform: scale(.95) !important;
box-shadow: 0 3px 8px rgba(0,0,0,.20) !important;
}
/* ARAMA — glass + altin focus */
.fetva-search-wrap{
margin-bottom: 18px !important;
}
.fetva-search-input{
background: rgba(255,255,255,.92) !important;
border: 1.5px solid rgba(6,77,40,.08) !important;
border-radius: 14px !important;
padding: 13px 44px !important;
font-size: 15px !important;
color: #1d6f5e !important;
box-shadow:
0 2px 8px rgba(6,77,40,.06),
inset 0 1px 0 rgba(255,255,255,.9) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: border-color .15s ease, box-shadow .15s ease;
}
.fetva-search-input:focus{
outline: none !important;
border-color: #2fae93 !important;
box-shadow:
0 4px 14px rgba(13,140,74,.18),
0 0 0 3px rgba(251,231,158,.35),
inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.fetva-search-icon{
color: #299981 !important;
left: 15px !important;
}
/* BOLUM basliklari — altin aksan */
.fetva-bolum{ margin-bottom: 22px !important; }
.fetva-bolum-baslik{
font-size: 15px !important;
font-weight: 800 !important;
color: #1d6f5e !important;
letter-spacing: .3px !important;
padding-left: 12px !important;
margin-bottom: 12px !important;
position: relative;
display: flex; align-items: center; gap: 8px;
}
.fetva-bolum-baslik::before{
content: '';
position: absolute;
left: 0; top: 50%;
transform: translateY(-50%);
width: 4px; height: 18px;
background: linear-gradient(180deg, #2fae93 0%, #1d6f5e 100%);
border-radius: 3px;
box-shadow: 0 0 8px rgba(13,140,74,.35);
}
/* KATEGORI GRID — glass + altin border-top */
.fetva-kategori-grid{
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
.fetva-kategori-kart{
background: linear-gradient(180deg, #ffffff 0%, #f8faf8 100%) !important;
border: 1px solid rgba(6,77,40,.08) !important;
border-radius: 16px !important;
padding: 14px 14px 12px !important;
text-align: left !important;
position: relative;
overflow: hidden;
box-shadow:
0 4px 14px rgba(6,77,40,.06),
0 1px 2px rgba(0,0,0,.03),
inset 0 1px 0 rgba(255,255,255,.9) !important;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
cursor: pointer;
}
.fetva-kategori-kart::before{
content: '';
position: absolute;
top: 0; left: 12px; right: 12px;
height: 2.5px;
background: linear-gradient(90deg, transparent 0%, #fbe79e 20%, #f59e0b 50%, #fbe79e 80%, transparent 100%);
border-radius: 0 0 3px 3px;
opacity: .85;
}
.fetva-kategori-kart:active{
transform: scale(.97) !important;
box-shadow: 0 2px 6px rgba(6,77,40,.10) !important;
}
.fetva-kategori-kart.is-empty{
opacity: .5;
background: #f5f5f5 !important;
}
.fetva-kategori-kart.is-empty::before{ display: none; }
.fetva-kategori-kart-ad{
font-size: 14px !important;
font-weight: 700 !important;
color: #1d6f5e !important;
line-height: 1.3 !important;
margin-bottom: 6px !important;
}
.fetva-kategori-kart-sayi{
display: inline-flex !important;
align-items: center;
padding: 3px 9px !important;
background: linear-gradient(135deg, rgba(13,140,74,.10) 0%, rgba(6,77,40,.10) 100%) !important;
color: #299981 !important;
font-size: 11px !important;
font-weight: 700 !important;
border-radius: 8px !important;
border: 1px solid rgba(13,140,74,.15);
}
.fetva-kategori-aciklama{
font-size: 11.5px !important;
color: #6b7280 !important;
line-height: 1.4;
margin-top: 6px !important;
}
/* ONE CIKAR — yatay scroll, premium kart */
.fetva-one-cikar{
display: flex !important;
gap: 12px !important;
overflow-x: auto !important;
padding: 2px 2px 8px !important;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.fetva-one-cikar::-webkit-scrollbar{ display: none; }
.fetva-one-cikar-kart{
flex: 0 0 78% !important;
scroll-snap-align: start;
background: linear-gradient(160deg, #1d6f5e 0%, #299981 55%, #2fae93 100%) !important;
color: #fff !important;
padding: 16px !important;
border-radius: 18px !important;
text-align: left !important;
position: relative;
overflow: hidden;
box-shadow:
0 10px 24px rgba(6,77,40,.28),
0 2px 4px rgba(0,0,0,.10),
inset 0 1px 0 rgba(255,255,255,.10) !important;
border: 1px solid rgba(251,231,158,.18);
transition: transform .15s ease;
}
.fetva-one-cikar-kart::before{
content: '';
position: absolute;
top: -20px; right: -20px;
width: 100px; height: 100px;
background: radial-gradient(circle, rgba(251,231,158,.18), transparent 70%);
pointer-events: none;
}
.fetva-one-cikar-kart:active{ transform: scale(.97) !important; }
.fetva-one-cikar-kategori{
display: inline-block !important;
font-size: 10.5px !important;
font-weight: 700 !important;
color: #fbe79e !important;
background: rgba(251,231,158,.14) !important;
padding: 3px 9px !important;
border-radius: 7px !important;
border: 1px solid rgba(251,231,158,.25);
margin-bottom: 10px !important;
letter-spacing: .3px;
text-transform: uppercase;
position: relative; z-index: 1;
}
.fetva-one-cikar-baslik{
font-size: 15px !important;
font-weight: 800 !important;
line-height: 1.35 !important;
margin-bottom: 8px !important;
text-shadow: 0 1px 2px rgba(0,0,0,.20);
position: relative; z-index: 1;
}
.fetva-one-cikar-ozet{
font-size: 12.5px !important;
line-height: 1.5 !important;
opacity: .88;
position: relative; z-index: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.fetva-video-badge{
position: absolute !important;
top: 14px; right: 14px;
background: linear-gradient(180deg, #fff 0%, #fdf6d8 100%) !important;
color: #1d6f5e !important;
font-size: 10.5px !important;
font-weight: 800 !important;
padding: 4px 9px !important;
border-radius: 8px !important;
box-shadow: 0 4px 10px rgba(0,0,0,.20);
border: 1px solid rgba(251,231,158,.6);
z-index: 2;
}
/* LISTE KARTLARI — glass zemin, altin sol accent */
.fetva-liste{
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
.fetva-kart{
display: flex !important;
align-items: center !important;
gap: 12px !important;
background: linear-gradient(180deg, #ffffff 0%, #fafbf9 100%) !important;
border: 1px solid rgba(6,77,40,.08) !important;
border-radius: 14px !important;
padding: 14px 14px 14px 16px !important;
text-align: left !important;
position: relative;
overflow: hidden;
box-shadow:
0 3px 10px rgba(6,77,40,.05),
0 1px 2px rgba(0,0,0,.03),
inset 0 1px 0 rgba(255,255,255,.9) !important;
transition: transform .15s ease, box-shadow .15s ease;
cursor: pointer;
}
.fetva-kart::before{
content: '';
position: absolute;
left: 0; top: 12px; bottom: 12px;
width: 3px;
background: linear-gradient(180deg, #fbe79e 0%, #f59e0b 100%);
border-radius: 0 3px 3px 0;
opacity: .85;
}
.fetva-kart:active{
transform: scale(.98) !important;
box-shadow: 0 2px 6px rgba(6,77,40,.10) !important;
}
.fetva-kart-icerik{ flex: 1 !important; min-width: 0 !important; }
.fetva-kart-meta{
display: flex !important;
align-items: center;
gap: 8px !important;
margin-bottom: 6px !important;
font-size: 11px !important;
}
.fetva-kart-kategori{
display: inline-block;
padding: 2px 8px !important;
background: linear-gradient(135deg, rgba(13,140,74,.10) 0%, rgba(6,77,40,.10) 100%) !important;
color: #299981 !important;
font-weight: 700 !important;
border-radius: 6px !important;
border: 1px solid rgba(13,140,74,.15);
}
.fetva-kart-okunma, .fetva-kart-tarih{
color: #94a3b8 !important;
font-size: 11px !important;
font-weight: 500;
}
.fetva-kart-baslik{
font-size: 14.5px !important;
font-weight: 700 !important;
color: #1d6f5e !important;
line-height: 1.4 !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.fetva-kart-ozet{
font-size: 12.5px !important;
color: #6b7280 !important;
line-height: 1.5 !important;
margin-top: 4px !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* KATEGORI VIEW HEAD + ARAMA HEAD + DETAY HEAD — glass sticky-like */
.fetva-detay-head,
.fetva-arama-head{
display: flex !important;
align-items: center;
gap: 12px !important;
padding: 14px 14px 12px !important;
background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.85) 100%) !important;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(6,77,40,.08);
margin: -14px -14px 14px !important;
}
.fetva-back-btn{
width: 38px !important; height: 38px !important;
background: linear-gradient(180deg, #ffffff 0%, #f8faf8 100%) !important;
border: 1px solid rgba(6,77,40,.10) !important;
border-radius: 50% !important;
color: #1d6f5e !important;
display: flex !important; align-items: center; justify-content: center;
box-shadow: 0 3px 10px rgba(6,77,40,.10), inset 0 1px 0 rgba(255,255,255,.9);
cursor: pointer;
flex-shrink: 0;
transition: transform .15s ease;
}
.fetva-back-btn:active{ transform: scale(.92) !important; }
.fetva-detay-head-text,
.fetva-arama-head-alt{ flex: 1; min-width: 0; }
.fetva-detay-head-kategori,
.fetva-arama-head-alt{
font-size: 11px !important;
font-weight: 700 !important;
color: #299981 !important;
letter-spacing: .4px;
text-transform: uppercase;
margin-bottom: 2px !important;
}
.fetva-detay-head-baslik,
.fetva-arama-head-baslik{
font-size: 15px !important;
font-weight: 800 !important;
color: #1d6f5e !important;
line-height: 1.3 !important;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* DETAY — soru altin quotation frame + cevap kremsi zemin */
.fetva-detay{
padding: 0 14px 32px !important;
}
.fetva-detay-baslik{
font-size: 22px !important;
font-weight: 800 !important;
color: #1d6f5e !important;
line-height: 1.3 !important;
letter-spacing: .2px;
margin: 8px 0 12px !important;
}
.fetva-detay-meta{
display: flex !important;
align-items: center;
gap: 10px !important;
font-size: 12px !important;
color: #64748b !important;
margin-bottom: 18px !important;
padding-bottom: 14px !important;
border-bottom: 1px solid rgba(6,77,40,.08);
}
.fetva-detay-video{
border-radius: 16px !important;
overflow: hidden !important;
margin-bottom: 18px !important;
box-shadow:
0 10px 30px rgba(6,77,40,.20),
0 2px 6px rgba(0,0,0,.08);
border: 2px solid rgba(251,231,158,.35);
background: #000;
}
.fetva-detay-soru{
position: relative;
background: linear-gradient(180deg, #fdf6d8 0%, #fbf3c8 100%) !important;
border: 1px solid rgba(245,158,11,.28) !important;
border-radius: 16px !important;
padding: 20px 20px 20px 24px !important;
margin-bottom: 16px !important;
box-shadow:
0 6px 18px rgba(245,158,11,.10),
inset 0 1px 0 rgba(255,255,255,.8);
}
.fetva-detay-soru::before{
content: '"';
position: absolute;
top: -8px; left: 12px;
font-size: 68px;
line-height: 1;
color: rgba(245,158,11,.35);
font-family: Georgia, serif;
font-weight: 700;
pointer-events: none;
}
.fetva-detay-label{
font-size: 11px !important;
font-weight: 800 !important;
color: #92400e !important;
letter-spacing: .5px;
text-transform: uppercase;
margin-bottom: 8px !important;
display: flex; align-items: center; gap: 6px;
}
.fetva-detay-soru-metin{
font-size: 15.5px !important;
line-height: 1.65 !important;
color: #1e293b !important;
font-weight: 500;
}
.fetva-detay-cevap{
position: relative;
background: linear-gradient(180deg, #ffffff 0%, #f8faf8 100%) !important;
border: 1px solid rgba(6,77,40,.10) !important;
border-left: 4px solid #2fae93 !important;
border-radius: 16px !important;
padding: 20px !important;
margin-bottom: 16px !important;
box-shadow:
0 6px 20px rgba(6,77,40,.08),
inset 0 1px 0 rgba(255,255,255,.9);
}
.fetva-detay-cevap .fetva-detay-label{
color: #1d6f5e !important;
}
.fetva-detay-cevap-metin{
font-size: 15.5px !important;
line-height: 1.75 !important;
color: #1e293b !important;
}
.fetva-detay-cevap-metin p{
margin: 0 0 12px !important;
}
.fetva-detay-cevap-metin p:last-child{ margin-bottom: 0 !important; }
.fetva-detay-kaynak{
font-size: 12.5px !important;
color: #64748b !important;
padding: 12px 16px !important;
background: rgba(6,77,40,.04) !important;
border-radius: 12px !important;
border-left: 3px solid rgba(13,140,74,.30);
font-style: italic;
}
/* =====================================================================
* FETVA PREMIUM v2 — kategori icon, detay-head bindirme fix
* ===================================================================== */
/* Kategori kart layout: icon uste, ad ortada, sayi altta */
.fetva-kategori-kart{
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
padding: 18px 14px 14px !important;
min-height: 118px;
}
.fetva-kategori-kart-icon{
width: 36px !important;
height: 36px !important;
margin-bottom: 10px !important;
display: flex; align-items: center; justify-content: center;
color: #299981;
background: linear-gradient(135deg, rgba(13,140,74,.10) 0%, rgba(6,77,40,.10) 100%);
border-radius: 10px;
border: 1px solid rgba(13,140,74,.15);
box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.fetva-kategori-kart-icon svg{
width: 22px; height: 22px;
color: #1d6f5e;
}
.fetva-kategori-kart.is-empty .fetva-kategori-kart-icon{
color: #94a3b8;
background: rgba(148,163,184,.08);
border-color: rgba(148,163,184,.15);
}
.fetva-kategori-kart.is-empty .fetva-kategori-kart-icon svg{ color: #94a3b8; }
.fetva-kategori-kart-ad{
margin-bottom: auto !important;
}
/* Detay/Arama head: uste yapisik bindirme sorunu fix
(negatif margin-top app header'in altina sokup geri butonunu gizliyordu) */
.fetva-detay-head,
.fetva-arama-head{
margin: 0 -12px 14px !important;
padding: 12px 14px !important;
border-radius: 0 0 16px 16px;
}
/* =====================================================================
* FETVA PREMIUM v3 — detay/arama head koyu yesil (app header'dan ayrilmiyordu)
* ===================================================================== */
.fetva-detay-head,
.fetva-arama-head{
background: linear-gradient(135deg, #1d6f5e 0%, #299981 55%, #2fae93 100%) !important;
padding: 16px 14px 18px !important;
margin: 0 -12px 18px !important;
border-radius: 0 0 22px 22px;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border-bottom: 0 !important;
box-shadow:
0 8px 20px rgba(6,77,40,.28),
inset 0 1px 0 rgba(255,255,255,.10);
color: #fff !important;
position: relative;
overflow: hidden;
}
.fetva-detay-head::before,
.fetva-arama-head::before{
content: '';
position: absolute;
top: 0; right: 0;
width: 140px; height: 140px;
background: radial-gradient(circle at top right, rgba(251,231,158,.20), transparent 70%);
pointer-events: none;
}
.fetva-back-btn{
background: rgba(255,255,255,.14) !important;
border: 1px solid rgba(251,231,158,.30) !important;
color: #fff !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 3px 10px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.15) !important;
width: 40px !important; height: 40px !important;
position: relative; z-index: 1;
}
.fetva-back-btn:active{ transform: scale(.92) !important; background: rgba(255,255,255,.24) !important; }
.fetva-detay-head-baslik,
.fetva-arama-head-baslik{
color: #fff !important;
text-shadow: 0 1px 2px rgba(0,0,0,.20);
position: relative; z-index: 1;
}
.fetva-detay-head-kategori,
.fetva-arama-head-alt{
color: #fbe79e !important;
position: relative; z-index: 1;
}
.fetva-detay-head-text,
.fetva-arama-head-alt{ position: relative; z-index: 1; }
/* =====================================================================
* FETVA v4 — detay/arama head sticky app header'in ALTINA yapissin
* Orijinal CSS'te top:0 idi -> app header (fixed) ile ayni yerde ustustebindiyordu.
* ===================================================================== */
.fetva-detay-head,
.fetva-arama-head{
position: sticky !important;
top: calc(var(--header-h, 110px) + var(--safe-top, 0px)) !important;
z-index: 50 !important;
}
/* v5: sticky kalkti - head video'yu eziyordu, normal flow olsun */
.fetva-detay-head,
.fetva-arama-head{
position: static !important;
top: auto !important;
}
/* =====================================================================
* FETVA HEAD — FINAL RESET (v6)
* Tum onceki override'lari yuksek specificity ile ez.
* Selector: .view[data-view="fetva"] .fetva-* > sadece .fetva-*
* ===================================================================== */
.view[data-view="fetva"] .fetva-detay-head,
.view[data-view="fetva"] .fetva-arama-head{
position: static !important;
top: auto !important;
z-index: auto !important;
margin: 0 !important;
padding: 14px 14px !important;
min-height: 64px !important;
background: linear-gradient(135deg, #1d6f5e 0%, #299981 100%) !important;
color: #fff !important;
border: 0 !important;
border-bottom: 0 !important;
border-radius: 0 !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: 0 3px 10px rgba(6,77,40,.15);
overflow: visible !important;
}
.view[data-view="fetva"] .fetva-detay-head::before,
.view[data-view="fetva"] .fetva-arama-head::before,
.view[data-view="fetva"] .fetva-detay-head::after,
.view[data-view="fetva"] .fetva-arama-head::after{
display: none !important;
}
.view[data-view="fetva"] .fetva-back-btn{
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
flex-shrink: 0 !important;
background: rgba(255,255,255,.18) !important;
border: 1px solid rgba(255,255,255,.30) !important;
border-radius: 50% !important;
color: #fff !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
cursor: pointer !important;
box-shadow: 0 2px 6px rgba(0,0,0,.15) !important;
transform: none !important;
}
.view[data-view="fetva"] .fetva-back-btn:active{
background: rgba(255,255,255,.28) !important;
transform: scale(.92) !important;
}
.view[data-view="fetva"] .fetva-detay-head-text{
flex: 1 !important;
min-width: 0 !important;
}
.view[data-view="fetva"] .fetva-detay-head-baslik,
.view[data-view="fetva"] .fetva-arama-head-baslik{
color: #fff !important;
font-size: 15px !important;
font-weight: 700 !important;
text-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.view[data-view="fetva"] .fetva-detay-head-kategori,
.view[data-view="fetva"] .fetva-arama-head-alt{
color: #fbe79e !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: .5px !important;
text-transform: uppercase !important;
}
/* =====================================================================
* KRITIK: --header-h app header'in gercek yuksekligine esitlensin.
* Onceki patch'te vardi, patch'ler ustuste yazilirken kayboldu.
* Header inline min-height:110px, .app padding-top bunu karsilamiyordu.
* ===================================================================== */
:root{ --header-h: 110px; }
.header{ min-height: calc(110px + var(--safe-top, 0px)) !important; }
.header-inner{ min-height: 110px !important; }
/* =====================================================================
* AI SHEETS — APPLE PREMIUM DESIGN
* Fetva Chat / Zekât / Miras (Feraiz)
* iOS 17+ dil: glassmorphism, spring animations, micro-interactions
* ===================================================================== */
/* --- Ortak sistem font stack (SF Pro fallback) --- */
.fai-wrap, .zai-wrap, .mai-wrap {
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
system-ui, 'Segoe UI', Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: -0.01em;
}
/* --- Ortak: hero intro (yeşil premium kart) --- */
.fai-intro, .zai-intro, .mai-intro {
position: relative;
padding: 20px;
margin: 4px 0 20px;
border-radius: 20px;
background:
radial-gradient(120% 100% at 100% 0%, rgba(251,231,158,.24), transparent 55%),
linear-gradient(135deg, #299981 0%, #1d6f5e 100%);
color: #fff;
box-shadow:
0 1px 2px rgba(6,77,40,.20),
0 20px 40px -20px rgba(6,77,40,.55),
inset 0 1px 0 rgba(255,255,255,.14);
overflow: hidden;
display: flex;
gap: 14px;
align-items: center;
}
.fai-intro-icon, .zai-intro-icon, .mai-intro-icon {
width: 52px; height: 52px;
border-radius: 15px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, rgba(251,231,158,.28), rgba(251,231,158,.12));
border: 1px solid rgba(251,231,158,.34);
color: #fbe79e;
flex-shrink: 0;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.22),
0 6px 14px -6px rgba(0,0,0,.35);
}
.fai-intro-text, .zai-intro-text, .mai-intro-text { flex: 1; min-width: 0; }
.fai-intro-title, .zai-intro-title, .mai-intro-title {
font-size: 16px;
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 3px;
}
.fai-intro-sub, .zai-intro-sub, .mai-intro-sub {
font-size: 12.5px;
color: rgba(251,231,158,.92);
line-height: 1.45;
letter-spacing: -0.005em;
}
/* --- Ortak: primary CTA (Apple filled button) --- */
.fai-btn, .zai-btn, .mai-btn {
width: 100%;
padding: 16px 20px;
border: 0;
border-radius: 16px;
background: linear-gradient(180deg, #2fae93 0%, #1d6f5e 100%);
color: #fff;
font: 600 15.5px/1 -apple-system, system-ui, sans-serif;
letter-spacing: -0.01em;
display: flex; align-items: center; justify-content: center; gap: 9px;
cursor: pointer;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.22),
inset 0 -1px 0 rgba(0,0,0,.18),
0 4px 12px rgba(6,77,40,.28),
0 1px 2px rgba(6,77,40,.10);
transition: transform .18s cubic-bezier(.34, 1.56, .64, 1),
box-shadow .18s ease,
opacity .15s ease;
-webkit-tap-highlight-color: transparent;
}
.fai-btn:active, .zai-btn:active, .mai-btn:active {
transform: scale(.97);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.15),
inset 0 -1px 0 rgba(0,0,0,.15),
0 2px 6px rgba(6,77,40,.20);
}
.fai-btn:disabled, .zai-btn:disabled, .mai-btn:disabled {
opacity: .55;
cursor: not-allowed;
}
/* --- Ortak: loader spinner --- */
.zai-loader, .mai-loader {
width: 15px; height: 15px;
border: 2px solid rgba(255,255,255,.30);
border-top-color: #fff;
border-radius: 50%;
animation: aiSpin .7s linear infinite;
}
@keyframes aiSpin { to { transform: rotate(360deg); } }
/* --- Ortak: result card --- */
.zai-result, .mai-result {
margin-top: 18px;
padding: 18px 20px;
background: rgba(250,251,252,.85);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
border: 1px solid rgba(0,0,0,.05);
border-radius: 18px;
box-shadow:
0 1px 2px rgba(0,0,0,.03),
0 8px 30px -12px rgba(0,0,0,.10);
animation: aiSlideIn .35s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes aiSlideIn {
from { opacity: 0; transform: translateY(12px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.zai-result-title, .mai-result-title {
display: flex; align-items: center; gap: 8px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #299981;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(41,153,129,.08);
}
.zai-result-body, .mai-result-body {
font-size: 15px;
line-height: 1.65;
color: #1c1c1e;
letter-spacing: -0.01em;
}
.zai-result-body b, .mai-result-body b { color: #1d6f5e; font-weight: 700; }
.zai-result.zai-loading, .mai-result.mai-loading {
background: rgba(245,245,247,.75);
border-color: rgba(0,0,0,.04);
color: #86868b;
text-align: center;
font-size: 13.5px;
}
.zai-load-msg, .mai-load-msg {
padding: 6px 0;
display: inline-flex; align-items: center; gap: 10px;
}
.zai-load-msg::before, .mai-load-msg::before {
content: '';
width: 14px; height: 14px;
border: 2px solid rgba(41,153,129,.25);
border-top-color: #299981;
border-radius: 50%;
animation: aiSpin .7s linear infinite;
}
.zai-result.zai-err, .mai-result.mai-err {
background: rgba(255,238,238,.85);
border-color: rgba(239,68,68,.16);
color: #991b1b;
}
/* --- Ortak: disclaimer --- */
.fai-disclaimer, .zai-disclaimer, .mai-disclaimer {
margin-top: 14px;
padding: 10px 14px;
background: rgba(0,0,0,.02);
border-radius: 10px;
font-size: 11.5px;
color: #86868b;
text-align: center;
letter-spacing: -0.005em;
line-height: 1.4;
}
/* =====================================================================
/* =====================================================================
* FETVA AI CHAT — ELITE / APPLE INTELLIGENCE LEVEL
* Katmanlar: ambient bg gradient · glass bubbles · organic typing
* gradient accent · spring interactions · SF Pro tipografi
* ===================================================================== */
/* Sheet için ambient background — bütün chat alanına yayılıyor */
.sheet:has(.fai-wrap) .sheet-body,
.sheet .sheet-body:has(.fai-wrap) {
background:
radial-gradient(90% 60% at 12% 8%, rgba(251,231,158,.14) 0%, transparent 55%),
radial-gradient(80% 50% at 100% 20%, rgba(41,153,129,.10) 0%, transparent 55%),
radial-gradient(120% 70% at 50% 100%, rgba(6,77,40,.06) 0%, transparent 60%),
linear-gradient(180deg, #fbfcfa 0%, #f6f8f6 100%);
position: relative;
}
.sheet:has(.fai-wrap) .sheet-body::before,
.sheet .sheet-body:has(.fai-wrap)::before {
/* Yumuşak animasyonlu "aura" — Apple Intelligence esintisi */
content: '';
position: absolute;
inset: -40px;
background:
radial-gradient(400px 300px at 20% 30%, rgba(251,231,158,.20), transparent 70%),
radial-gradient(400px 300px at 80% 70%, rgba(41,153,129,.12), transparent 70%);
filter: blur(60px);
opacity: .6;
animation: faiAura 18s ease-in-out infinite alternate;
pointer-events: none;
z-index: 0;
}
@keyframes faiAura {
from { transform: translate(-20px, -20px) rotate(0deg); }
to { transform: translate(20px, 15px) rotate(6deg); }
}
.fai-wrap {
position: relative;
z-index: 1;
display: flex; flex-direction: column;
height: 74vh;
max-height: 680px;
min-height: 480px;
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
system-ui, 'Segoe UI', Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: -0.01em;
}
/* ---------- MESSAGES AREA ---------- */
.fai-msgs {
flex: 1 1 auto;
overflow-y: auto;
padding: 4px 6px 24px;
display: flex; flex-direction: column; gap: 16px;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
.fai-msgs::-webkit-scrollbar { width: 3px; }
.fai-msgs::-webkit-scrollbar-thumb {
background: rgba(6,77,40,.15);
border-radius: 3px;
}
/* ---------- EMPTY STATE — Elite ---------- */
.fai-empty {
text-align: center;
padding: 42px 24px 24px;
color: #86868b;
animation: faiEmptyIn 700ms cubic-bezier(.22, 1, .36, 1);
}
@keyframes faiEmptyIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.fai-empty > svg:first-child {
filter: drop-shadow(0 8px 24px rgba(6,77,40,.18));
color: #299981;
opacity: .28;
animation: faiEmptyIcon 4s ease-in-out infinite;
}
@keyframes faiEmptyIcon {
0%, 100% { transform: translateY(0); opacity: .28; }
50% { transform: translateY(-4px); opacity: .38; }
}
.fai-empty-title {
font: 800 22px/1.15 -apple-system, 'SF Pro Display', system-ui, sans-serif;
letter-spacing: -0.028em;
color: #1c1c1e;
margin: 20px 0 8px;
background: linear-gradient(135deg, #1c1c1e 0%, #299981 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.fai-empty-sub {
font: 500 14px/1.5 -apple-system, system-ui, sans-serif;
color: #86868b;
margin-bottom: 28px;
letter-spacing: -0.005em;
max-width: 260px;
margin-left: auto; margin-right: auto;
}
.fai-suggest {
display: flex; flex-direction: column; gap: 8px;
max-width: 340px;
margin: 0 auto;
animation: faiSuggestStagger 800ms cubic-bezier(.22, 1, .36, 1);
}
@keyframes faiSuggestStagger {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.fai-suggest-btn {
position: relative;
display: flex; align-items: center; gap: 10px;
padding: 14px 18px;
background: rgba(255,255,255,.72);
backdrop-filter: saturate(180%) blur(30px);
-webkit-backdrop-filter: saturate(180%) blur(30px);
border: 1px solid rgba(6,77,40,.08);
border-radius: 16px;
color: #1c1c1e;
font: 500 14px/1.35 -apple-system, system-ui, sans-serif;
letter-spacing: -0.01em;
text-align: left;
cursor: pointer;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
0 1px 2px rgba(0,0,0,.03),
0 8px 24px -12px rgba(6,77,40,.12);
transition:
transform .22s cubic-bezier(.34, 1.56, .64, 1),
background .25s ease,
box-shadow .25s ease,
border-color .25s ease;
-webkit-tap-highlight-color: transparent;
}
.fai-suggest-btn::before {
content: '';
width: 4px; height: 4px;
border-radius: 50%;
background: #299981;
box-shadow: 0 0 8px #299981;
flex-shrink: 0;
animation: faiPulse 2s ease-in-out infinite;
}
@keyframes faiPulse {
0%, 100% { opacity: .4; transform: scale(1); }
50% { opacity: 1; transform: scale(1.2); }
}
.fai-suggest-btn:active {
transform: scale(.97);
background: rgba(41,153,129,.06);
border-color: rgba(41,153,129,.18);
}
/* ---------- MESSAGES ---------- */
.fai-msg {
display: flex; gap: 10px; max-width: 100%;
animation: faiMsgIn 450ms cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes faiMsgIn {
0% { opacity: 0; transform: translateY(14px) scale(.94); }
60% { opacity: 1; }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.fai-msg-user { justify-content: flex-end; }
.fai-msg-ai { justify-content: flex-start; }
/* Avatar — sofistike gradient rozet + halka */
.fai-msg-avatar {
position: relative;
width: 34px; height: 34px; border-radius: 50%;
background:
radial-gradient(80% 80% at 30% 30%, rgba(251,231,158,.55) 0%, transparent 60%),
linear-gradient(135deg, #2fae93 0%, #1d6f5e 100%);
color: #fbe79e;
display: flex; align-items: center; justify-content: center;
font: 800 10px/1 -apple-system, 'SF Pro Text', sans-serif;
letter-spacing: 0.6px;
flex-shrink: 0;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.28),
0 3px 12px rgba(6,77,40,.35),
0 0 0 3px rgba(255,255,255,.86);
}
.fai-msg-avatar::after {
/* Yumuşak dış halka — Apple Intelligence gradient hissi */
content: '';
position: absolute;
inset: -5px;
border-radius: 50%;
padding: 1px;
background: conic-gradient(from 0deg,
rgba(251,231,158,.6),
rgba(41,153,129,.4),
rgba(251,231,158,.6));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity .3s ease;
}
.fai-loading .fai-msg-avatar::after { opacity: 1; animation: faiRotate 3s linear infinite; }
@keyframes faiRotate { to { transform: rotate(360deg); } }
/* Bubble — glass premium */
.fai-msg-bubble {
max-width: 82%;
padding: 12px 16px;
border-radius: 22px;
font: 400 15.5px/1.55 -apple-system, 'SF Pro Text', system-ui, sans-serif;
letter-spacing: -0.01em;
word-wrap: break-word;
position: relative;
}
.fai-msg-user .fai-msg-bubble {
color: #fff;
background:
linear-gradient(135deg, rgba(255,255,255,.10) 0%, transparent 40%),
linear-gradient(180deg, #2fae93 0%, #299981 60%, #1d6f5e 100%);
border-bottom-right-radius: 6px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.22),
inset 0 -1px 0 rgba(0,0,0,.08),
0 2px 10px rgba(6,77,40,.28),
0 8px 24px -12px rgba(6,77,40,.30);
}
.fai-msg-ai .fai-msg-bubble {
color: #1c1c1e;
background: rgba(255,255,255,.78);
backdrop-filter: saturate(200%) blur(30px);
-webkit-backdrop-filter: saturate(200%) blur(30px);
border: 1px solid rgba(6,77,40,.06);
border-bottom-left-radius: 6px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.65),
0 1px 2px rgba(0,0,0,.04),
0 10px 30px -14px rgba(6,77,40,.14);
}
.fai-msg-ai .fai-msg-bubble b {
color: #1d6f5e;
font-weight: 700;
}
.fai-msg-ai .fai-msg-bubble::before {
/* AI mesajı — subtle iç highlight */
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 30%;
background: linear-gradient(180deg, rgba(251,231,158,.06) 0%, transparent 100%);
border-radius: 22px 22px 0 0;
pointer-events: none;
}
/* Typing indicator — organic breath */
.fai-loading .fai-msg-bubble {
display: flex; align-items: center; gap: 5px;
padding: 16px 20px;
min-height: 46px;
}
.fai-dot {
width: 8px; height: 8px; border-radius: 50%;
background: linear-gradient(135deg, #299981, #1d6f5e);
animation: faiDotBreath 1.5s ease-in-out infinite;
}
.fai-dot:nth-child(1) { animation-delay: 0s; }
.fai-dot:nth-child(2) { animation-delay: 0.2s; }
.fai-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes faiDotBreath {
0%, 60%, 100% { transform: scale(.7); opacity: .35; }
30% { transform: scale(1.1); opacity: 1; }
}
/* ---------- INPUT BAR — Elite composer ---------- */
.fai-input-wrap {
position: relative;
z-index: 2;
display: flex; gap: 10px;
align-items: flex-end;
padding: 14px 10px 4px;
margin: 0 -6px -12px;
border-top: 1px solid rgba(6,77,40,.06);
background:
linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.88) 100%);
backdrop-filter: saturate(200%) blur(30px);
-webkit-backdrop-filter: saturate(200%) blur(30px);
}
.fai-input {
flex: 1;
padding: 12px 18px;
border: 1.5px solid rgba(6,77,40,.10);
border-radius: 22px;
font: 500 15px/1.4 -apple-system, 'SF Pro Text', system-ui, sans-serif;
letter-spacing: -0.01em;
background: rgba(255,255,255,.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
color: #1c1c1e;
resize: none;
outline: none;
max-height: 110px;
transition:
border-color .22s ease,
background .22s ease,
box-shadow .22s ease,
transform .22s cubic-bezier(.34, 1.56, .64, 1);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.5),
0 1px 2px rgba(0,0,0,.02);
}
.fai-input:focus {
border-color: rgba(41,153,129,.5);
background: #fff;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.5),
0 0 0 4px rgba(41,153,129,.10),
0 4px 14px -6px rgba(6,77,40,.12);
}
.fai-input::placeholder {
color: #a1a1a6;
font-style: normal;
}
/* Send button — Apple Intelligence esintili gradient border */
.fai-send {
position: relative;
width: 44px; height: 44px;
border-radius: 50%;
border: 0;
background:
radial-gradient(90% 90% at 30% 30%, rgba(251,231,158,.35) 0%, transparent 55%),
linear-gradient(135deg, #2fae93 0%, #1d6f5e 100%);
color: #fff;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
flex-shrink: 0;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.30),
0 3px 12px rgba(6,77,40,.35),
0 8px 24px -8px rgba(6,77,40,.30);
transition: transform .22s cubic-bezier(.34, 1.56, .64, 1),
box-shadow .22s ease,
opacity .2s ease;
-webkit-tap-highlight-color: transparent;
}
.fai-send::before {
content: '';
position: absolute;
inset: -2px;
border-radius: 50%;
background: conic-gradient(from 90deg,
rgba(251,231,158,.6),
rgba(41,153,129,.4),
rgba(251,231,158,.6),
rgba(41,153,129,.4),
rgba(251,231,158,.6));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
padding: 2px;
opacity: 0;
transition: opacity .3s ease;
}
.fai-input:focus ~ .fai-send::before,
.fai-send:hover::before,
.fai-send:active::before { opacity: 1; animation: faiRotate 4s linear infinite; }
.fai-send:active { transform: scale(.90); }
.fai-send:disabled {
opacity: .4;
cursor: wait;
transform: scale(.95);
}
.fai-send svg { transform: translate(-1px, 1px); }
/* ---------- DISCLAIMER ---------- */
.fai-disclaimer {
position: relative;
z-index: 2;
margin-top: 6px;
padding: 8px 12px;
font: 500 11px/1.4 -apple-system, system-ui, sans-serif;
color: #a1a1a6;
text-align: center;
letter-spacing: -0.005em;
}
* ZEKAT — Premium form design
* ===================================================================== */
.zai-wrap { padding: 4px 4px 12px; }
.zai-form {
display: flex; flex-direction: column; gap: 2px;
background: rgba(250,251,252,.75);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
border: 1px solid rgba(0,0,0,.05);
border-radius: 16px;
padding: 4px;
margin-bottom: 18px;
box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.zai-row {
display: grid;
grid-template-columns: 1fr 130px;
align-items: center;
padding: 12px 14px;
gap: 12px;
border-radius: 12px;
transition: background .15s;
}
.zai-row:hover { background: rgba(0,0,0,.02); }
.zai-row:not(:last-child) {
border-bottom: 1px solid rgba(0,0,0,.04);
border-radius: 0;
}
.zai-row:has(textarea) {
grid-template-columns: 1fr;
gap: 6px;
}
.zai-label {
font: 500 14.5px/1.3 -apple-system, system-ui, sans-serif;
color: #1c1c1e;
letter-spacing: -0.01em;
}
.zai-input-wrap {
position: relative;
display: flex; align-items: center;
}
.zai-input {
width: 100%;
padding: 8px 34px 8px 12px;
border: 1px solid rgba(0,0,0,.10);
border-radius: 10px;
font: 500 15px/1 -apple-system, system-ui, sans-serif;
letter-spacing: -0.01em;
background: #fff;
color: #1c1c1e;
text-align: right;
outline: none;
transition: border-color .15s, box-shadow .15s;
-moz-appearance: textfield;
}
.zai-input::-webkit-outer-spin-button,
.zai-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.zai-input:focus {
border-color: rgba(41,153,129,.35);
box-shadow: 0 0 0 3px rgba(41,153,129,.10);
}
.zai-row textarea.zai-input {
text-align: left;
padding: 10px 14px;
min-height: 68px;
resize: vertical;
font-size: 14.5px;
}
.zai-unit {
position: absolute; right: 12px;
font: 600 12.5px/1 -apple-system, sans-serif;
color: #86868b;
letter-spacing: -0.005em;
pointer-events: none;
}
/* =====================================================================
* MIRAS — Premium form design (grouped cards)
* ===================================================================== */
.mai-wrap { padding: 4px 4px 12px; }
.mai-section {
background: rgba(250,251,252,.75);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
border: 1px solid rgba(0,0,0,.05);
border-radius: 16px;
padding: 16px;
margin-bottom: 14px;
box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.mai-section-title {
font: 700 11px/1 -apple-system, system-ui, sans-serif;
letter-spacing: 0.6px;
color: #86868b;
text-transform: uppercase;
margin-bottom: 14px;
padding-left: 2px;
}
.mai-grid2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.mai-row {
display: flex; flex-direction: column;
}
.mai-label {
font: 500 12.5px/1.3 -apple-system, system-ui, sans-serif;
color: #86868b;
margin-bottom: 6px;
padding-left: 2px;
letter-spacing: -0.005em;
}
.mai-input {
width: 100%;
padding: 11px 13px;
border: 1px solid rgba(0,0,0,.10);
border-radius: 11px;
font: 500 15px/1 -apple-system, system-ui, sans-serif;
letter-spacing: -0.01em;
background: #fff;
color: #1c1c1e;
outline: none;
transition: border-color .15s, box-shadow .15s;
-moz-appearance: textfield;
}
.mai-input::-webkit-outer-spin-button,
.mai-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
textarea.mai-input {
min-height: 68px;
resize: vertical;
font-size: 14.5px;
}
.mai-input:focus {
border-color: rgba(41,153,129,.35);
box-shadow: 0 0 0 3px rgba(41,153,129,.10);
}
/* Segmented control (Apple style) — cinsiyet */
.mai-cinsiyet {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
padding: 2px;
background: rgba(120,120,128,.12);
border-radius: 10px;
}
.mai-radio {
display: flex; align-items: center; justify-content: center;
padding: 8px 12px;
font: 500 13.5px/1 -apple-system, system-ui, sans-serif;
color: #1c1c1e;
letter-spacing: -0.01em;
cursor: pointer;
border-radius: 8px;
position: relative;
transition: background .2s ease, box-shadow .2s ease, color .2s ease;
-webkit-tap-highlight-color: transparent;
}
.mai-radio input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.mai-radio:has(input:checked) {
background: #fff;
color: #299981;
font-weight: 600;
box-shadow:
0 3px 8px rgba(0,0,0,.10),
0 1px 2px rgba(0,0,0,.05);
}
/* Toggle checkboxes (Apple switch feel) */
.mai-check-group {
display: flex; flex-direction: column; gap: 4px;
padding: 4px 0;
}
.mai-check {
display: flex; align-items: center;
justify-content: space-between;
padding: 12px 4px;
font: 500 15px/1 -apple-system, system-ui, sans-serif;
color: #1c1c1e;
letter-spacing: -0.01em;
cursor: pointer;
border-bottom: 1px solid rgba(0,0,0,.04);
-webkit-tap-highlight-color: transparent;
}
.mai-check:last-child { border-bottom: 0; }
.mai-check input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 46px; height: 28px;
background: rgba(120,120,128,.24);
border-radius: 14px;
position: relative;
cursor: pointer;
transition: background .25s cubic-bezier(.4, 0, .2, 1);
flex-shrink: 0;
}
.mai-check input[type="checkbox"]::before {
content: '';
position: absolute;
top: 2px; left: 2px;
width: 24px; height: 24px;
background: #fff;
border-radius: 50%;
box-shadow:
0 3px 8px rgba(0,0,0,.15),
0 1px 2px rgba(0,0,0,.10);
transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}
.mai-check input[type="checkbox"]:checked {
background: #299981;
}
.mai-check input[type="checkbox"]:checked::before {
transform: translateX(18px);
}
.mai-more {
margin-top: 8px;
padding-top: 10px;
border-top: 1px solid rgba(0,0,0,.06);
}
.mai-more summary {
font: 600 13.5px/1 -apple-system, system-ui, sans-serif;
color: #299981;
cursor: pointer;
padding: 8px 4px;
list-style: none;
display: flex; align-items: center; gap: 6px;
letter-spacing: -0.01em;
-webkit-tap-highlight-color: transparent;
}
.mai-more summary::-webkit-details-marker { display: none; }
.mai-more summary::before {
content: '›';
font-size: 20px; font-weight: 400;
color: #299981;
transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}
.mai-more[open] summary::before {
transform: rotate(90deg);
}
* KUR'AN AI AÇIKLA
* ===================================================================== */
.kuran-ayet-btn-ai{
background: linear-gradient(135deg, #299981, #1d6f5e) !important;
color: #fbe79e !important;
border-color: rgba(251,231,158,.30) !important;
}
.kai-wrap{ padding: 4px 4px 12px; }
.kai-ayet-card{
padding: 16px;
background: linear-gradient(135deg, #299981 0%, #1d6f5e 100%);
border-radius: 14px;
color: #fff;
margin-bottom: 14px;
border: 1px solid rgba(251,231,158,.28);
position: relative;
overflow: hidden;
}
.kai-ayet-card::before{
content: '';
position: absolute;
top: -30px; right: -30px;
width: 120px; height: 120px;
background: radial-gradient(circle, rgba(251,231,158,.20), transparent 70%);
pointer-events: none;
}
.kai-ayet-badge{
display: inline-block;
padding: 3px 10px;
background: rgba(251,231,158,.20);
color: #fbe79e;
font-size: 10.5px;
font-weight: 800;
letter-spacing: .4px;
border-radius: 6px;
margin-bottom: 10px;
position: relative; z-index: 1;
}
.kai-ayet-arabic{
font-family: 'Uthmani', 'Amiri', 'Traditional Arabic', serif;
font-size: 20px;
line-height: 1.9;
text-align: center;
margin-bottom: 10px;
padding: 6px 0;
border-bottom: 1px solid rgba(251,231,158,.20);
position: relative; z-index: 1;
}
.kai-ayet-meal{
font-size: 13.5px;
line-height: 1.6;
opacity: .95;
position: relative; z-index: 1;
}
.kai-question{ margin-bottom: 12px; }
.kai-label{
display: block;
font-size: 12px; font-weight: 700; color: #374151;
margin-bottom: 5px;
}
.kai-input{
width: 100%;
padding: 10px 14px;
border: 1px solid rgba(6,77,40,.14);
border-radius: 10px;
font-size: 14px;
font-family: inherit;
background: #fff;
color: #1e293b;
outline: none;
resize: vertical;
min-height: 56px;
transition: border-color .15s;
}
.kai-input:focus{ border-color: #299981; box-shadow: 0 0 0 3px rgba(41,153,129,.10); }
.kai-btn{
width: 100%;
padding: 13px;
background: linear-gradient(135deg, #299981 0%, #1d6f5e 100%);
border: 0;
border-radius: 12px;
color: #fff;
font-size: 14.5px; font-weight: 800;
display: flex; align-items: center; justify-content: center; gap: 8px;
cursor: pointer;
box-shadow: 0 5px 14px rgba(6,77,40,.22);
}
.kai-btn:active{ transform: scale(.98); }
.kai-btn:disabled{ opacity: .7; cursor: wait; }
.kai-loader{
width: 14px; height: 14px;
border: 2px solid rgba(255,255,255,.35);
border-top-color: #fff;
border-radius: 50%;
animation: kaiSpin .8s linear infinite;
}
@keyframes kaiSpin{ to { transform: rotate(360deg); } }
.kai-result{
margin-top: 14px;
padding: 14px 16px;
background: #f8faf8;
border-left: 4px solid #299981;
border-radius: 10px;
}
.kai-result.kai-err{ background: #fef2f2; border-color: #ef4444; color: #991b1b; }
.kai-result.kai-loading{
background: #fafafa; border-color: #94a3b8;
color: #64748b; font-style: italic; text-align: center;
}
.kai-result-title{
display: flex; align-items: center; gap: 8px;
font-size: 12.5px; font-weight: 800;
color: #1d6f5e;
margin-bottom: 10px;
padding-bottom: 6px;
border-bottom: 1px solid rgba(41,153,129,.10);
text-transform: uppercase; letter-spacing: .5px;
}
.kai-result-body{ font-size: 14px; line-height: 1.65; color: #1e293b; }
.kai-disclaimer{
margin-top: 12px;
font-size: 10.5px; color: #94a3b8;
text-align: center; font-style: italic;
padding: 0 8px;
}
/* =====================================================================
/* =====================================================================
* İRŞAD — ELITE PREMIUM (tasavvufî ambient, beyaz zemin + koyu yeşil + altın)
* ===================================================================== */
.iai-wrap {
padding: 4px 4px 12px;
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
letter-spacing: -0.01em;
}
/* Hero intro — mihrab tarzı ambient */
.iai-intro {
position: relative;
padding: 28px 20px 22px;
margin: 4px 0 20px;
border-radius: 22px;
background:
radial-gradient(120% 90% at 50% 100%, rgba(251,231,158,.26) 0%, transparent 55%),
radial-gradient(70% 60% at 20% 20%, rgba(251,231,158,.15) 0%, transparent 55%),
linear-gradient(160deg, #299981 0%, #1d6f5e 55%, #043019 100%);
color: #fff;
overflow: hidden;
text-align: center;
box-shadow:
0 1px 2px rgba(6,77,40,.30),
0 20px 44px -20px rgba(6,77,40,.55),
inset 0 1px 0 rgba(255,255,255,.14);
}
.iai-intro-bg {
position: absolute;
inset: 0;
background:
radial-gradient(2px 2px at 20% 30%, rgba(251,231,158,.35) 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 80% 25%, rgba(251,231,158,.28) 50%, transparent 51%),
radial-gradient(1px 1px at 40% 70%, rgba(251,231,158,.30) 50%, transparent 51%),
radial-gradient(2px 2px at 70% 60%, rgba(251,231,158,.20) 50%, transparent 51%),
radial-gradient(1px 1px at 15% 85%, rgba(251,231,158,.24) 50%, transparent 51%);
animation: iaiStars 30s linear infinite;
opacity: .8;
pointer-events: none;
}
@keyframes iaiStars {
from { transform: translateY(0); }
to { transform: translateY(-24px); }
}
.iai-intro-rumuz {
position: relative;
z-index: 1;
font: 400 44px/1 'Amiri', 'Traditional Arabic', 'Uthmani', serif;
color: #fbe79e;
margin-bottom: 12px;
letter-spacing: 0.04em;
text-shadow: 0 0 20px rgba(251,231,158,.45), 0 2px 8px rgba(0,0,0,.4);
direction: rtl;
}
.iai-intro-title {
position: relative;
z-index: 1;
font: 800 20px/1.15 -apple-system, 'SF Pro Display', system-ui, sans-serif;
letter-spacing: -0.028em;
margin-bottom: 6px;
background: linear-gradient(180deg, #fff 0%, #fbe79e 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 2px 12px rgba(0,0,0,.30);
}
.iai-intro-sub {
position: relative;
z-index: 1;
font: 500 12.5px/1.5 -apple-system, sans-serif;
color: rgba(251,231,158,.86);
letter-spacing: -0.005em;
}
/* Section wrap — glass beyaz */
.iai-section {
background: rgba(255,255,255,.85);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
border: 1px solid rgba(6,77,40,.08);
border-radius: 16px;
padding: 16px;
margin-bottom: 12px;
box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 4px 14px -8px rgba(6,77,40,.10);
}
.iai-section-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.iai-section-no {
width: 26px; height: 26px;
flex-shrink: 0;
background: linear-gradient(135deg, #299981 0%, #1d6f5e 100%);
color: #fbe79e;
border-radius: 8px;
display: inline-flex;
align-items: center; justify-content: center;
font: 800 12px/1 -apple-system, sans-serif;
letter-spacing: -0.02em;
box-shadow: 0 2px 6px -1px rgba(6,77,40,.35), inset 0 1px 0 rgba(255,255,255,.20);
}
.iai-section-head > div { flex: 1; min-width: 0; }
.iai-section-title {
font: 700 15px/1.2 -apple-system, sans-serif;
color: #1c1c1e;
letter-spacing: -0.015em;
margin-bottom: 2px;
}
.iai-section-hint {
font: 500 12px/1.35 -apple-system, sans-serif;
color: #86868b;
letter-spacing: -0.005em;
}
.iai-optional {
display: inline-block;
padding: 2px 7px;
background: rgba(6,77,40,.08);
color: #299981;
border-radius: 5px;
font: 700 9.5px/1 -apple-system, sans-serif;
letter-spacing: 0.4px;
text-transform: uppercase;
margin-left: 4px;
vertical-align: 1px;
}
/* MERTEBE grid — 2x2 zengin kart */
.iai-mertebe-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.iai-mertebe-item {
position: relative;
padding: 16px 12px;
background: #fff;
border: 1.5px solid rgba(6,77,40,.10);
border-radius: 14px;
cursor: pointer;
text-align: center;
transition:
transform .18s cubic-bezier(.34, 1.56, .64, 1),
border-color .22s, background .22s, box-shadow .22s;
-webkit-tap-highlight-color: transparent;
overflow: hidden;
}
.iai-mertebe-item input {
position: absolute; opacity: 0; pointer-events: none;
}
.iai-mertebe-item:active { transform: scale(.97); }
.iai-mertebe-item.is-active {
background:
radial-gradient(120% 90% at 50% 0%, rgba(251,231,158,.20), transparent 55%),
linear-gradient(160deg, #299981 0%, #1d6f5e 100%);
border-color: #1d6f5e;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
0 8px 18px -8px rgba(6,77,40,.45);
}
.iai-mertebe-rumuz {
font: 400 26px/1 'Amiri', 'Traditional Arabic', serif;
color: #299981;
margin-bottom: 8px;
letter-spacing: 0.04em;
transition: color .2s;
direction: rtl;
}
.iai-mertebe-item.is-active .iai-mertebe-rumuz {
color: #fbe79e;
text-shadow: 0 0 10px rgba(251,231,158,.35);
}
.iai-mertebe-ad {
font: 700 15px/1.2 -apple-system, sans-serif;
color: #1c1c1e;
letter-spacing: -0.01em;
margin-bottom: 3px;
transition: color .2s;
}
.iai-mertebe-item.is-active .iai-mertebe-ad { color: #fff; }
.iai-mertebe-sub {
font: 500 11.5px/1.3 -apple-system, sans-serif;
color: #86868b;
letter-spacing: -0.005em;
transition: color .2s;
}
.iai-mertebe-item.is-active .iai-mertebe-sub { color: rgba(251,231,158,.72); }
/* HAL chip'leri */
.iai-hal-chips {
display: flex; flex-wrap: wrap;
gap: 8px;
}
.iai-hal-chip {
padding: 9px 14px;
background: #fff;
border: 1.5px solid rgba(6,77,40,.10);
border-radius: 20px;
color: #1c1c1e;
font: 500 13.5px/1 -apple-system, sans-serif;
letter-spacing: -0.01em;
cursor: pointer;
transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), background .2s, border-color .2s, color .2s;
-webkit-tap-highlight-color: transparent;
}
.iai-hal-chip:active { transform: scale(.94); }
.iai-hal-chip.is-active {
background: #299981;
border-color: #1d6f5e;
color: #fbe79e;
font-weight: 600;
box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 3px 10px rgba(6,77,40,.22);
}
/* KONU grid — 3x2 */
.iai-konu-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.iai-konu-item {
position: relative;
padding: 12px 14px;
background: #fff;
border: 1.5px solid rgba(6,77,40,.10);
border-radius: 12px;
cursor: pointer;
text-align: left;
transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), background .22s, border-color .22s;
-webkit-tap-highlight-color: transparent;
}
.iai-konu-item input { position: absolute; opacity: 0; pointer-events: none; }
.iai-konu-item:active { transform: scale(.97); }
.iai-konu-item.is-active {
background: linear-gradient(135deg, rgba(41,153,129,.10), rgba(6,77,40,.05));
border-color: #299981;
}
.iai-konu-ad {
font: 700 14px/1.2 -apple-system, sans-serif;
color: #1d6f5e;
letter-spacing: -0.01em;
margin-bottom: 3px;
}
.iai-konu-desc {
font: 500 11px/1.35 -apple-system, sans-serif;
color: #86868b;
letter-spacing: -0.005em;
}
.iai-konu-item.is-active .iai-konu-desc { color: #299981; }
/* AMEL listesi (checkbox) */
.iai-amel-list {
display: flex; flex-direction: column;
gap: 2px;
}
.iai-amel-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 4px;
cursor: pointer;
border-radius: 8px;
transition: background .2s;
-webkit-tap-highlight-color: transparent;
}
.iai-amel-row:hover { background: rgba(41,153,129,.03); }
.iai-amel-row input { display: none; }
.iai-amel-check {
width: 22px; height: 22px;
border: 1.5px solid rgba(6,77,40,.22);
border-radius: 7px;
background: #fff;
flex-shrink: 0;
position: relative;
transition: background .2s, border-color .2s;
}
.iai-amel-check::after {
content: '';
position: absolute;
top: 4px; left: 7px;
width: 5px; height: 10px;
border: solid #fff;
border-width: 0 2.2px 2.2px 0;
transform: rotate(45deg) scale(0);
transition: transform .2s cubic-bezier(.34, 1.56, .64, 1);
}
.iai-amel-row input:checked ~ .iai-amel-check {
background: linear-gradient(135deg, #2fae93, #1d6f5e);
border-color: #1d6f5e;
}
.iai-amel-row input:checked ~ .iai-amel-check::after {
transform: rotate(45deg) scale(1);
}
.iai-amel-ad {
font: 500 14.5px/1.3 -apple-system, sans-serif;
color: #1c1c1e;
letter-spacing: -0.01em;
}
/* MEKTEP chip'leri */
.iai-mektep-chips {
display: flex; flex-wrap: wrap;
gap: 6px;
padding-top: 4px;
}
.iai-mektep-chip {
padding: 8px 12px;
background: #fff;
border: 1.5px solid rgba(6,77,40,.10);
border-radius: 10px;
color: #475569;
font: 600 12.5px/1 -apple-system, sans-serif;
letter-spacing: -0.005em;
cursor: pointer;
transition: transform .15s cubic-bezier(.34, 1.56, .64, 1), background .2s;
-webkit-tap-highlight-color: transparent;
}
.iai-mektep-chip:active { transform: scale(.94); }
.iai-mektep-chip.is-active {
background: #299981;
border-color: #1d6f5e;
color: #fbe79e;
font-weight: 700;
}
/* details.iai-more açık/kapalı */
.iai-more[open] .iai-more-chev { transform: rotate(180deg); }
.iai-more-chev {
color: #86868b;
transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
flex-shrink: 0;
}
.iai-more summary { cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.iai-more summary::-webkit-details-marker { display: none; }
/* TEXTAREA */
.iai-textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid rgba(6,77,40,.10);
border-radius: 12px;
font: 500 14.5px/1.5 -apple-system, sans-serif;
letter-spacing: -0.01em;
background: #fff;
color: #1c1c1e;
outline: none;
resize: vertical;
min-height: 80px;
transition: border-color .15s, box-shadow .15s;
}
.iai-textarea:focus {
border-color: rgba(41,153,129,.35);
box-shadow: 0 0 0 3px rgba(41,153,129,.10);
}
.iai-textarea::placeholder { color: #a1a1a6; font-style: italic; }
.iai-char-count {
text-align: right;
font: 500 11px/1 -apple-system, sans-serif;
color: #a1a1a6;
margin-top: 6px;
padding-right: 2px;
letter-spacing: -0.005em;
}
/* PRIMARY CTA */
.iai-btn {
width: 100%;
padding: 16px 20px;
border: 0;
border-radius: 16px;
background:
radial-gradient(90% 90% at 30% 30%, rgba(251,231,158,.24) 0%, transparent 55%),
linear-gradient(180deg, #2fae93 0%, #1d6f5e 100%);
color: #fff;
font: 700 15.5px/1 -apple-system, sans-serif;
letter-spacing: -0.01em;
display: flex; align-items: center; justify-content: center; gap: 10px;
cursor: pointer;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.24),
inset 0 -1px 0 rgba(0,0,0,.20),
0 6px 18px rgba(6,77,40,.32),
0 1px 2px rgba(6,77,40,.10);
transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
-webkit-tap-highlight-color: transparent;
margin-top: 4px;
}
.iai-btn:active { transform: scale(.97); }
.iai-btn:disabled { opacity: .55; cursor: not-allowed; }
.iai-loader {
width: 15px; height: 15px;
border: 2px solid rgba(255,255,255,.30);
border-top-color: #fff;
border-radius: 50%;
animation: iaiSpin .7s linear infinite;
}
@keyframes iaiSpin { to { transform: rotate(360deg); } }
/* RESULT — dekoratif alıntı kartı */
.iai-result {
position: relative;
margin-top: 18px;
padding: 26px 24px 20px;
background:
radial-gradient(120% 100% at 100% 0%, rgba(251,231,158,.15), transparent 55%),
radial-gradient(80% 60% at 0% 100%, rgba(41,153,129,.06), transparent 55%),
linear-gradient(180deg, #ffffff 0%, #f8faf8 100%);
border: 1px solid rgba(6,77,40,.10);
border-radius: 20px;
box-shadow:
0 1px 2px rgba(0,0,0,.04),
0 16px 44px -18px rgba(6,77,40,.22);
animation: iaiSlideIn .5s cubic-bezier(.34, 1.56, .64, 1);
overflow: hidden;
}
@keyframes iaiSlideIn {
from { opacity: 0; transform: translateY(18px) scale(.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.iai-quote-mark {
position: absolute;
top: -22px; left: 14px;
font: 900 150px/1 Georgia, 'Times New Roman', serif;
color: rgba(41,153,129,.12);
pointer-events: none;
user-select: none;
}
.iai-result-tag {
display: inline-block;
padding: 4px 12px;
background: rgba(41,153,129,.08);
color: #299981;
border-radius: 8px;
font: 700 11px/1 -apple-system, sans-serif;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-bottom: 14px;
position: relative;
z-index: 1;
}
.iai-result-body {
position: relative;
z-index: 1;
font: 400 16px/1.75 -apple-system, 'SF Pro Text', Georgia, serif;
color: #1c1c1e;
letter-spacing: -0.005em;
padding-left: 2px;
}
.iai-result-body b { color: #1d6f5e; font-weight: 700; }
.iai-result-actions {
display: flex;
gap: 8px;
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid rgba(6,77,40,.08);
position: relative;
z-index: 1;
}
.iai-result-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px;
background: rgba(41,153,129,.05);
border: 1px solid rgba(41,153,129,.12);
border-radius: 10px;
color: #299981;
font: 600 12.5px/1 -apple-system, sans-serif;
letter-spacing: -0.005em;
cursor: pointer;
transition: transform .15s cubic-bezier(.34, 1.56, .64, 1), background .2s;
-webkit-tap-highlight-color: transparent;
}
.iai-result-btn:active {
transform: scale(.94);
background: rgba(41,153,129,.12);
}
/* LOADING state — ambient orb */
.iai-result.iai-loading {
background: rgba(250,251,252,.85);
border-color: rgba(0,0,0,.05);
text-align: center;
padding: 32px 20px;
}
.iai-loading-inner {
display: flex; flex-direction: column;
align-items: center; gap: 14px;
}
.iai-loading-orb {
width: 40px; height: 40px;
border-radius: 50%;
background:
radial-gradient(circle at 30% 30%, rgba(251,231,158,.9), rgba(41,153,129,.6) 55%, rgba(6,77,40,.9));
box-shadow:
inset 0 2px 4px rgba(255,255,255,.4),
0 0 20px rgba(41,153,129,.30);
animation: iaiOrb 2.2s ease-in-out infinite;
}
@keyframes iaiOrb {
0%,100% { transform: scale(1); filter: hue-rotate(0deg); }
50% { transform: scale(1.14); filter: hue-rotate(-10deg); }
}
.iai-loading-msg {
font: italic 500 13px/1.4 -apple-system, sans-serif;
color: #64748b;
letter-spacing: -0.005em;
}
.iai-result.iai-err {
background: rgba(255,238,238,.85);
border-color: rgba(239,68,68,.16);
color: #991b1b;
padding: 16px 20px;
}
/* DISCLAIMER */
.iai-disclaimer {
margin-top: 14px;
padding: 10px 14px;
background: rgba(0,0,0,.02);
border-radius: 10px;
font: 500 11.5px/1.45 -apple-system, sans-serif;
color: #86868b;
text-align: center;
letter-spacing: -0.005em;
}
* MAHMUD EFENDI SAYFASI — APPLE PREMIUM UPGRADE
* (Mevcut .me-* class'larini override eder; HTML/JS dokunulmadi)
* ===================================================================== */
/* Overall wrap */
.me-wrap {
padding-bottom: 100px !important;
background:
radial-gradient(80% 60% at 50% 0%, rgba(6,77,40,.08), transparent 60%),
#fafafa;
min-height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
system-ui, 'Segoe UI', Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: -0.01em;
}
/* ---------- HERO ---------- */
.me-hero {
position: relative !important;
height: 78vh !important;
min-height: 460px !important;
max-height: 620px !important;
margin: 0 !important;
border-radius: 0 0 30px 30px !important;
overflow: hidden !important;
box-shadow:
0 30px 60px -30px rgba(6,77,40,.55),
0 1px 2px rgba(0,0,0,.06);
}
.me-hero-bg {
position: absolute !important;
inset: 0 !important;
background-size: cover !important;
background-position: center 20% !important;
filter: saturate(1.05) contrast(1.02) brightness(.98);
transform: scale(1.05);
animation: meHeroZoom 22s ease-in-out infinite alternate;
}
@keyframes meHeroZoom {
from { transform: scale(1.05) translateY(0); }
to { transform: scale(1.10) translateY(-6px); }
}
.me-hero-overlay {
position: absolute !important;
inset: 0 !important;
background:
radial-gradient(120% 90% at 50% 100%, rgba(6,77,40,.85) 0%, rgba(6,77,40,.55) 45%, rgba(6,77,40,.10) 70%, transparent 100%),
linear-gradient(180deg, rgba(0,0,0,.20) 0%, transparent 30%, transparent 55%, rgba(0,0,0,.35) 100%) !important;
pointer-events: none;
}
.me-hero::after {
/* İnce altın çerçeve */
content: '';
position: absolute;
inset: 0;
border-radius: 0 0 30px 30px;
border: 1px solid rgba(251,231,158,.14);
border-top: 0;
pointer-events: none;
}
.me-hero-icerik {
position: absolute !important;
left: 0; right: 0; bottom: 32px !important;
padding: 0 24px !important;
text-align: center !important;
color: #fff !important;
z-index: 2;
animation: meFadeUp 1.1s cubic-bezier(.22, 1, .36, 1);
}
@keyframes meFadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
.me-hero-rumuz {
font: 400 26px/1 'Amiri', 'Traditional Arabic', 'Uthmani', serif !important;
color: #fbe79e !important;
margin-bottom: 12px !important;
text-shadow: 0 2px 12px rgba(0,0,0,.5), 0 0 24px rgba(251,231,158,.25);
letter-spacing: 0.02em !important;
direction: rtl;
}
.me-hero-baslik {
font: 800 42px/1.02 -apple-system, 'SF Pro Display', system-ui, sans-serif !important;
letter-spacing: -0.035em !important;
margin-bottom: 8px !important;
text-shadow: 0 2px 20px rgba(0,0,0,.55), 0 0 40px rgba(0,0,0,.3);
background: linear-gradient(180deg, #fff 0%, #fbe79e 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.me-hero-altbaslik {
font: 500 15.5px/1.3 -apple-system, system-ui, sans-serif !important;
color: rgba(255,255,255,.86) !important;
margin-bottom: 14px !important;
letter-spacing: -0.005em !important;
text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
.me-hero-tarih {
display: inline-block !important;
padding: 6px 14px !important;
background: rgba(251,231,158,.15) !important;
border: 1px solid rgba(251,231,158,.28);
border-radius: 20px !important;
color: #fbe79e !important;
font: 600 12px/1 -apple-system, system-ui, sans-serif !important;
letter-spacing: 0.3px !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
text-shadow: 0 1px 4px rgba(0,0,0,.35);
}
/* ---------- TABS — iOS segmented ---------- */
.me-tabs {
display: flex !important;
gap: 4px !important;
padding: 6px !important;
margin: -34px 16px 20px !important;
background: rgba(255,255,255,.72) !important;
backdrop-filter: saturate(180%) blur(30px);
-webkit-backdrop-filter: saturate(180%) blur(30px);
border: 1px solid rgba(0,0,0,.06) !important;
border-radius: 18px !important;
box-shadow:
0 12px 30px -12px rgba(6,77,40,.28),
0 1px 2px rgba(0,0,0,.05);
position: relative;
z-index: 3;
overflow-x: auto;
scrollbar-width: none;
}
.me-tabs::-webkit-scrollbar { display: none; }
.me-tab {
flex: 1 1 auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
padding: 10px 8px !important;
background: transparent !important;
border: 0 !important;
border-radius: 12px !important;
font: 600 12.5px/1 -apple-system, system-ui, sans-serif !important;
letter-spacing: -0.01em !important;
color: #86868b !important;
cursor: pointer;
transition: color .2s ease, background .25s ease, box-shadow .25s ease, transform .18s cubic-bezier(.34, 1.56, .64, 1);
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
}
.me-tab:active { transform: scale(.96); }
.me-tab.is-active {
background: linear-gradient(180deg, #ffffff 0%, #f5f6f8 100%) !important;
color: #299981 !important;
box-shadow:
0 3px 8px rgba(0,0,0,.10),
0 1px 2px rgba(0,0,0,.05),
inset 0 1px 0 rgba(255,255,255,.5);
}
.me-tab .ji-svg { flex-shrink: 0; }
.me-tab.is-active .ji-svg { filter: drop-shadow(0 1px 2px rgba(41,153,129,.2)); }
/* ---------- İÇERİK ---------- */
.me-icerik { padding: 4px 16px 20px !important; }
/* ---------- YAZI KARTLARI ---------- */
.me-yazilar { display: flex; flex-direction: column; gap: 10px; }
.me-yazi-kart {
display: flex !important;
align-items: center !important;
gap: 14px !important;
width: 100% !important;
padding: 16px !important;
background: rgba(255,255,255,.85) !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(0,0,0,.05) !important;
border-radius: 16px !important;
cursor: pointer !important;
text-align: left !important;
color: #1c1c1e !important;
box-shadow:
0 1px 2px rgba(0,0,0,.03),
0 6px 20px -10px rgba(6,77,40,.10);
transition:
transform .18s cubic-bezier(.34, 1.56, .64, 1),
box-shadow .25s ease,
border-color .2s ease,
background .2s ease;
animation: meCardIn .5s cubic-bezier(.22, 1, .36, 1) both;
animation-delay: calc(var(--i, 0) * 60ms);
-webkit-tap-highlight-color: transparent;
}
@keyframes meCardIn {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.me-yazi-kart:active {
transform: scale(.98) !important;
background: rgba(41,153,129,.03) !important;
border-color: rgba(41,153,129,.15) !important;
}
.me-yazi-numara {
width: 44px !important; height: 44px !important;
flex-shrink: 0;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: linear-gradient(135deg, #299981 0%, #1d6f5e 100%) !important;
color: #fbe79e !important;
border: 1px solid rgba(251,231,158,.28);
border-radius: 13px !important;
font: 700 15px/1 -apple-system, 'SF Pro Text', system-ui, sans-serif !important;
letter-spacing: -0.02em !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
0 3px 10px -4px rgba(6,77,40,.45);
}
.me-yazi-icerik { flex: 1; min-width: 0; }
.me-yazi-baslik {
font: 600 15.5px/1.35 -apple-system, system-ui, sans-serif !important;
letter-spacing: -0.015em !important;
color: #1c1c1e !important;
margin-bottom: 3px !important;
}
.me-yazi-aciklama {
font: 400 13px/1.45 -apple-system, system-ui, sans-serif !important;
letter-spacing: -0.005em !important;
color: #86868b !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.me-yazi-okunma {
font: 500 11px/1 -apple-system, system-ui, sans-serif !important;
color: #a1a1a6 !important;
margin-top: 6px !important;
letter-spacing: -0.005em !important;
}
.me-yazi-chev {
color: #c7c7cc;
flex-shrink: 0;
transition: transform .2s ease, color .2s ease;
}
.me-yazi-kart:active .me-yazi-chev {
transform: translateX(2px);
color: #299981;
}
/* ---------- SÖZLER — dekoratif alıntı kartları ---------- */
.me-soz-kart, [class*="me-soz"][class*="kart"] {
position: relative;
padding: 26px 22px 22px !important;
margin-bottom: 12px;
background:
radial-gradient(140% 100% at 0% 0%, rgba(251,231,158,.18), transparent 55%),
linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(250,251,252,.92) 100%) !important;
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
border: 1px solid rgba(6,77,40,.08) !important;
border-radius: 20px !important;
box-shadow:
0 1px 2px rgba(0,0,0,.04),
0 12px 40px -14px rgba(6,77,40,.18);
overflow: hidden;
}
.me-soz-kart::before, [class*="me-soz"][class*="kart"]::before {
content: '”';
position: absolute;
top: -30px; left: 12px;
font: 900 160px/1 Georgia, 'Times New Roman', serif;
color: rgba(41,153,129,.10);
pointer-events: none;
user-select: none;
}
.me-soz-metin {
position: relative;
font: 400 16.5px/1.75 -apple-system, 'SF Pro Text', Georgia, serif !important;
color: #1c1c1e !important;
letter-spacing: -0.005em !important;
margin-bottom: 14px !important;
padding-left: 4px;
}
.me-soz-imza {
font: 600 12.5px/1 -apple-system, system-ui, sans-serif !important;
letter-spacing: 0.4px !important;
color: #299981 !important;
text-align: right !important;
text-transform: uppercase;
border-top: 1px solid rgba(6,77,40,.08);
padding-top: 10px !important;
margin-top: 8px !important;
}
.me-soz-tema {
display: inline-block;
padding: 4px 10px;
background: rgba(41,153,129,.08) !important;
border: 1px solid rgba(41,153,129,.14);
border-radius: 10px;
font: 600 10.5px/1 -apple-system, system-ui, sans-serif !important;
letter-spacing: 0.4px !important;
color: #299981 !important;
text-transform: uppercase;
margin-bottom: 12px;
}
/* ---------- VİDEOLAR ---------- */
.me-videolar {
display: grid !important;
grid-template-columns: 1fr;
gap: 12px;
}
.me-video-kart {
position: relative;
background: #fff !important;
border: 1px solid rgba(0,0,0,.05) !important;
border-radius: 18px !important;
overflow: hidden !important;
cursor: pointer;
box-shadow:
0 1px 2px rgba(0,0,0,.04),
0 10px 30px -14px rgba(0,0,0,.15);
transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
-webkit-tap-highlight-color: transparent;
}
.me-video-kart:active {
transform: scale(.98) !important;
box-shadow:
0 1px 2px rgba(0,0,0,.04),
0 4px 14px -8px rgba(0,0,0,.20);
}
.me-video-thumb {
position: relative;
aspect-ratio: 16 / 9;
background: #000 !important;
}
.me-video-thumb img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
.me-video-overlay {
position: absolute !important;
inset: 0 !important;
background: linear-gradient(180deg, transparent 0%, transparent 55%, rgba(0,0,0,.65) 100%) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.me-video-play {
width: 60px !important; height: 60px !important;
border-radius: 50% !important;
background: rgba(255,255,255,.94) !important;
color: #299981 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow:
0 6px 24px rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.5);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
}
.me-video-kart:active .me-video-play {
transform: scale(.90);
}
.me-video-sure {
position: absolute !important;
bottom: 10px !important; right: 10px !important;
padding: 3px 9px !important;
background: rgba(0,0,0,.72) !important;
color: #fff !important;
border-radius: 6px !important;
font: 600 11.5px/1 -apple-system, system-ui, sans-serif !important;
letter-spacing: -0.005em !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.me-video-baslik {
padding: 12px 16px 4px !important;
font: 600 14.5px/1.35 -apple-system, system-ui, sans-serif !important;
letter-spacing: -0.015em !important;
color: #1c1c1e !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.me-video-aciklama {
padding: 0 16px 14px !important;
font: 400 13px/1.45 -apple-system, system-ui, sans-serif !important;
letter-spacing: -0.005em !important;
color: #86868b !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ---------- YAZI/MAKALE DETAY (sheet içinde) ---------- */
.me-makale {
padding: 4px 4px 12px;
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'New York', Georgia, serif;
}
.me-makale-rumuz {
text-align: center;
font: 400 22px/1 'Amiri', 'Traditional Arabic', serif !important;
color: #299981 !important;
margin-bottom: 14px !important;
letter-spacing: 0.02em;
direction: rtl;
}
.me-makale-baslik {
font: 800 26px/1.15 -apple-system, 'SF Pro Display', 'New York', Georgia, serif !important;
letter-spacing: -0.035em !important;
color: #1c1c1e !important;
margin-bottom: 10px !important;
text-align: center;
}
.me-makale-aciklama {
font: 400 15px/1.5 -apple-system, system-ui, sans-serif !important;
letter-spacing: -0.005em !important;
color: #86868b !important;
text-align: center;
margin-bottom: 20px !important;
padding-bottom: 20px;
border-bottom: 1px solid rgba(0,0,0,.06);
}
.me-makale-meta {
display: flex;
justify-content: center;
gap: 14px;
font: 500 11.5px/1 -apple-system, system-ui, sans-serif !important;
letter-spacing: 0.3px !important;
color: #a1a1a6 !important;
text-transform: uppercase;
margin-bottom: 22px;
}
.me-makale-icerik {
font: 400 16px/1.75 -apple-system, 'SF Pro Text', 'New York', Georgia, serif !important;
color: #1c1c1e !important;
letter-spacing: -0.005em !important;
}
.me-makale-icerik p {
margin: 0 0 16px !important;
}
.me-makale-icerik p:first-of-type::first-letter,
.me-makale-icerik p:first-letter {
font: 700 48px/1 'New York', Georgia, serif !important;
float: left !important;
color: #299981 !important;
padding: 4px 8px 0 0 !important;
line-height: 40px !important;
letter-spacing: -0.02em !important;
}
.me-makale-kaynak {
margin-top: 26px;
padding: 14px 16px;
background: rgba(0,0,0,.02) !important;
border-left: 3px solid rgba(41,153,129,.3);
border-radius: 10px;
font: 500 12.5px/1.5 -apple-system, system-ui, sans-serif !important;
letter-spacing: -0.005em !important;
color: #86868b !important;
}
.me-makale-dua {
margin-top: 22px;
padding: 20px;
background:
radial-gradient(120% 100% at 100% 0%, rgba(251,231,158,.18), transparent 55%),
linear-gradient(135deg, rgba(41,153,129,.06) 0%, rgba(6,77,40,.03) 100%);
border: 1px solid rgba(6,77,40,.10);
border-radius: 16px;
text-align: center;
font: 500 14.5px/1.7 -apple-system, 'New York', Georgia, serif !important;
color: #299981 !important;
letter-spacing: -0.005em !important;
font-style: italic;
}
/* =====================================================================
* KULLIYE — AI ARAÇLARI SECTION (m3d ikonlarla uyumlu)
* Ikonlar diger moduller gibi ile geliyor.
* Sadece YENI badge premium ve subtle AI accent.
* ===================================================================== */
.section-badge-yeni {
display: inline-flex !important;
align-items: center;
padding: 3px 9px 3px 10px !important;
background: linear-gradient(135deg, #fbe79e 0%, #f0b84a 60%, #f59e0b 100%) !important;
color: #4a2c00 !important;
font: 900 9.5px/1 -apple-system, 'SF Pro Text', system-ui, sans-serif !important;
letter-spacing: 0.8px !important;
border-radius: 6px !important;
margin-right: 8px !important;
vertical-align: middle;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.4),
inset 0 -1px 0 rgba(0,0,0,.10),
0 2px 6px -1px rgba(245,158,11,.42) !important;
position: relative;
overflow: hidden;
}
.section-badge-yeni::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
transform: translateX(-100%);
animation: badgeShine 3s ease-in-out infinite;
}
@keyframes badgeShine {
0%, 60%, 100% { transform: translateX(-100%); }
70% { transform: translateX(120%); }
}
/* =====================================================================
* ZİKİRMATİK — LIGHT PREMIUM (beyaz + yeşil, altın vurgu)
* ===================================================================== */
.view[data-view="zikir"] {
background: transparent;
min-height: 100vh;
}
.zk-loader, .zk-empty {
color: #64748b;
text-align: center;
padding: 60px 20px;
font: 500 14px/1.5 -apple-system, system-ui, sans-serif;
}
.zk-app {
padding: 12px 16px 24px;
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
letter-spacing: -0.01em;
}
/* Segment tabs */
.zk-segtabs {
display: flex;
gap: 3px;
padding: 4px;
background: rgba(0,0,0,.04);
border: 1px solid rgba(0,0,0,.04);
border-radius: 14px;
margin-bottom: 20px;
}
.zk-segtab {
flex: 1;
display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 9px 4px;
background: transparent;
border: 0;
border-radius: 10px;
color: #64748b;
font: 600 10.5px/1 -apple-system, system-ui, sans-serif;
letter-spacing: -0.005em;
cursor: pointer;
transition: background .2s, color .2s, transform .15s cubic-bezier(.34, 1.56, .64, 1);
-webkit-tap-highlight-color: transparent;
}
.zk-segtab:active { transform: scale(.94); }
.zk-segtab.is-active {
background: #fff;
color: #299981;
box-shadow:
0 3px 8px rgba(0,0,0,.08),
0 1px 2px rgba(0,0,0,.05);
}
/* Merkez daire container */
.zk-ring-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 20px 0;
margin-bottom: 20px;
}
/* Yan tesbih dekorasyonu (koyu yeşil boncuklar) */
.zk-tesbih-decor {
position: absolute;
top: 50%;
width: 24px;
height: 200px;
transform: translateY(-50%);
background:
radial-gradient(circle 5px at 50% 8%, #299981 60%, transparent 62%),
radial-gradient(circle 5px at 50% 20%, #1d6f5e 60%, transparent 62%),
radial-gradient(circle 5px at 50% 32%, #299981 60%, transparent 62%),
radial-gradient(circle 5px at 50% 44%, #1d6f5e 60%, transparent 62%),
radial-gradient(circle 5px at 50% 56%, #299981 60%, transparent 62%),
radial-gradient(circle 5px at 50% 68%, #1d6f5e 60%, transparent 62%),
radial-gradient(circle 5px at 50% 80%, #299981 60%, transparent 62%),
radial-gradient(circle 5px at 50% 92%, #1d6f5e 60%, transparent 62%);
filter: drop-shadow(0 2px 4px rgba(6,77,40,.20));
opacity: .55;
pointer-events: none;
}
.zk-tesbih-left { left: 3%; transform: translateY(-50%) rotate(-8deg); }
.zk-tesbih-right { right: 3%; transform: translateY(-50%) rotate(8deg); }
/* Ring button — beyaz zemin, koyu yeşil çerçeve */
.zk-ring-btn {
position: relative;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-direction: column !important;
width: 260px !important;
height: 260px !important;
min-height: 260px !important;
margin: 0 auto !important;
border-radius: 50% !important;
background:
radial-gradient(80% 80% at 30% 25%, rgba(251,231,158,.14) 0%, transparent 55%),
radial-gradient(circle at 50% 50%, #ffffff 0%, #f8faf8 65%, #ecf3ee 100%) !important;
border: 4px solid #299981 !important;
cursor: pointer;
box-shadow:
inset 0 2px 4px rgba(255,255,255,.65),
inset 0 -3px 8px rgba(6,77,40,.10),
0 0 0 6px rgba(41,153,129,.08),
0 0 30px rgba(41,153,129,.20),
0 20px 40px -20px rgba(6,77,40,.35) !important;
transition: transform .12s ease !important;
padding: 0 !important;
overflow: hidden;
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
}
.zk-ring-btn:active { transform: scale(.97) !important; }
.zk-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.zk-ring-svg #zRing { filter: drop-shadow(0 0 4px rgba(41,153,129,.35)); }
.zk-ring-content {
position: relative;
z-index: 2;
text-align: center;
padding: 8px 12px;
color: #1d6f5e;
}
.zk-ring-title {
font: 700 15px/1.2 -apple-system, system-ui, sans-serif;
color: #299981;
letter-spacing: -0.015em;
margin-bottom: 10px;
}
.zk-ring-count {
font: 900 68px/1 -apple-system, 'SF Pro Display', system-ui, sans-serif;
letter-spacing: -0.04em;
color: #1d6f5e;
text-shadow: 0 2px 4px rgba(6,77,40,.10);
margin-bottom: 8px;
transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
}
.zk-ring-btn:active .zk-ring-count { transform: scale(1.10); }
.zk-ring-goal {
font: 600 12.5px/1 -apple-system, system-ui, sans-serif;
color: #64748b;
letter-spacing: -0.005em;
}
/* Alt tap indicator — altın */
.zk-tap-indicator {
position: absolute;
bottom: 22px;
left: 50%;
transform: translateX(-50%);
width: 34px; height: 34px;
border-radius: 50%;
background: linear-gradient(180deg, #fbe79e 0%, #c9a961 100%);
color: #4a2c00;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
0 4px 10px rgba(0,0,0,.15),
0 0 8px rgba(251,231,158,.4);
z-index: 3;
}
/* Ripple */
.zk-ripple {
position: absolute; inset: 0;
border-radius: 50%;
background: radial-gradient(circle, rgba(41,153,129,.25) 0%, transparent 60%);
opacity: 0;
pointer-events: none;
}
.zk-ripple.active { animation: zkRipple .8s cubic-bezier(.22,1,.36,1); }
@keyframes zkRipple {
0% { opacity: .7; transform: scale(.4); }
100% { opacity: 0; transform: scale(1.4); }
}
/* Alt kartlar — beyaz glass */
.zk-card {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 14px 16px;
margin-bottom: 10px;
background: rgba(255,255,255,.85);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
border: 1px solid rgba(6,77,40,.08);
border-radius: 16px;
color: #1c1c1e;
box-shadow:
0 1px 2px rgba(0,0,0,.03),
0 6px 20px -10px rgba(6,77,40,.12);
text-align: left;
}
.zk-card-btn {
cursor: pointer;
transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), background .2s;
-webkit-tap-highlight-color: transparent;
}
.zk-card-btn:active {
transform: scale(.98);
background: rgba(41,153,129,.04);
border-color: rgba(41,153,129,.18);
}
.zk-card-icon {
width: 40px; height: 40px;
border-radius: 12px;
background: linear-gradient(135deg, #299981 0%, #1d6f5e 100%);
border: 1px solid rgba(251,231,158,.28);
color: #fbe79e;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 3px 8px -3px rgba(6,77,40,.35);
}
.zk-card-body { flex: 1; min-width: 0; }
.zk-card-label {
font: 600 11px/1 -apple-system, system-ui, sans-serif;
letter-spacing: 0.4px;
color: #86868b;
text-transform: uppercase;
margin-bottom: 5px;
}
.zk-card-value {
font: 700 15px/1.2 -apple-system, system-ui, sans-serif;
color: #1c1c1e;
letter-spacing: -0.015em;
}
.zk-card-chev { color: #c7c7cc; flex-shrink: 0; }
/* Günlük hedef + streak kartı */
.zk-card-goal {
flex-direction: column;
align-items: stretch;
gap: 12px;
padding: 16px 18px;
}
.zk-goal-row {
display: flex;
align-items: center;
gap: 14px;
}
.zk-goal-info { flex: 1; }
.zk-goal-count {
font: 800 22px/1 -apple-system, 'SF Pro Display', system-ui, sans-serif;
letter-spacing: -0.03em;
color: #1d6f5e;
}
.zk-goal-slash { color: #cbd5e1; margin: 0 3px; font-weight: 600; }
.zk-streak-box {
display: flex; align-items: center; gap: 6px;
padding: 8px 12px;
background: rgba(255,140,66,.10);
border: 1px solid rgba(255,140,66,.24);
border-radius: 12px;
color: #ea580c;
}
.zk-streak-num {
font: 800 20px/1 -apple-system, sans-serif;
color: #ea580c;
letter-spacing: -0.02em;
}
.zk-streak-label {
font: 600 10.5px/1.2 -apple-system, system-ui, sans-serif;
color: #ea580c;
letter-spacing: -0.005em;
}
.zk-progress-bar {
height: 8px;
background: rgba(6,77,40,.06);
border-radius: 4px;
overflow: hidden;
border: 1px solid rgba(6,77,40,.05);
}
.zk-progress-fill {
height: 100%;
background: linear-gradient(90deg, #2fae93 0%, #299981 60%, #1d6f5e 100%);
border-radius: 4px;
box-shadow: 0 0 6px rgba(41,153,129,.20);
transition: width .5s cubic-bezier(.34, 1.56, .64, 1);
}
/* Aksiyon butonları */
.zk-actions {
display: grid;
grid-template-columns: 1fr 1fr 1.4fr;
gap: 8px;
margin-top: 4px;
}
.zk-act-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 12px;
background: rgba(255,255,255,.85);
border: 1px solid rgba(6,77,40,.10);
border-radius: 12px;
color: #299981;
font: 600 12.5px/1 -apple-system, system-ui, sans-serif;
letter-spacing: -0.005em;
cursor: pointer;
transition: transform .15s cubic-bezier(.34, 1.56, .64, 1), background .2s;
-webkit-tap-highlight-color: transparent;
}
.zk-act-btn:active {
transform: scale(.95);
background: rgba(41,153,129,.06);
}
.zk-act-add {
background: linear-gradient(180deg, #2fae93, #1d6f5e);
color: #fff;
border-color: #1d6f5e;
font-weight: 700;
box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 3px 10px rgba(6,77,40,.25);
}
/* ============ GÜNLÜK / İSTATİSTİK / AYARLAR ============ */
.zk-page-title {
font: 800 22px/1.15 -apple-system, 'SF Pro Display', system-ui, sans-serif;
letter-spacing: -0.028em;
color: #1d6f5e;
margin: 4px 4px 16px;
}
.zk-summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
gap: 8px;
margin-bottom: 14px;
}
.zk-summary-card {
padding: 14px 12px;
background: rgba(255,255,255,.85);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
border: 1px solid rgba(6,77,40,.08);
border-radius: 14px;
box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 4px 14px -8px rgba(6,77,40,.10);
text-align: center;
}
.zk-summary-label {
font: 700 10px/1 -apple-system, sans-serif;
letter-spacing: 0.5px;
color: #86868b;
text-transform: uppercase;
margin-bottom: 8px;
}
.zk-summary-value {
font: 800 22px/1 -apple-system, 'SF Pro Display', sans-serif;
letter-spacing: -0.03em;
color: #1d6f5e;
}
.zk-summary-slash {
font: 600 11px/1 -apple-system, sans-serif;
color: #94a3b8;
margin-left: 3px;
letter-spacing: -0.005em;
}
.zk-summary-streak { color: #ea580c; }
/* GÜNLÜK — 7 gün liste */
.zk-day-list {
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 4px;
}
.zk-day-row {
display: grid;
grid-template-columns: 72px 1fr 50px;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 10px;
transition: background .2s;
}
.zk-day-row.is-today {
background: rgba(41,153,129,.06);
}
.zk-day-name {
font: 600 13px/1 -apple-system, sans-serif;
color: #475569;
letter-spacing: -0.005em;
}
.zk-day-num {
color: #94a3b8;
font-weight: 500;
font-size: 11.5px;
margin-left: 2px;
}
.zk-day-row.is-today .zk-day-name { color: #299981; }
.zk-day-bar {
height: 8px;
background: rgba(6,77,40,.06);
border-radius: 4px;
overflow: hidden;
border: 1px solid rgba(6,77,40,.05);
}
.zk-day-bar-fill {
height: 100%;
background: linear-gradient(90deg, #2fae93 0%, #299981 100%);
border-radius: 4px;
box-shadow: 0 0 4px rgba(41,153,129,.20);
transition: width .5s cubic-bezier(.34, 1.56, .64, 1);
}
.zk-day-total {
font: 700 14px/1 -apple-system, sans-serif;
color: #1d6f5e;
letter-spacing: -0.015em;
text-align: right;
}
/* İSTATİSTİK — 30 gün chart */
.zk-chart-card {
flex-direction: column;
align-items: stretch;
gap: 8px;
padding: 16px;
margin-bottom: 14px;
}
.zk-chart-wrap {
height: 120px;
display: flex;
align-items: flex-end;
gap: 3px;
padding: 0 2px;
}
.zk-chart-bars {
flex: 1;
height: 100%;
display: flex;
align-items: flex-end;
gap: 3px;
}
.zk-chart-bar {
flex: 1;
min-height: 3px;
background: linear-gradient(180deg, #2fae93 0%, #299981 100%);
border-radius: 2px 2px 0 0;
transition: height .3s ease;
}
.zk-chart-bar:last-child {
background: linear-gradient(180deg, #ff8c42 0%, #ea580c 100%);
box-shadow: 0 0 4px rgba(255,140,66,.35);
}
.zk-chart-axis {
display: flex;
justify-content: space-between;
font: 500 10.5px/1 -apple-system, sans-serif;
color: #94a3b8;
letter-spacing: -0.005em;
padding: 0 2px;
}
.zk-info-card {
gap: 12px;
padding: 14px 16px;
}
.zk-info-icon {
width: 32px; height: 32px;
border-radius: 10px;
background: rgba(41,153,129,.08);
border: 1px solid rgba(41,153,129,.15);
color: #299981;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.zk-info-text {
font: 500 12.5px/1.45 -apple-system, sans-serif;
color: #64748b;
letter-spacing: -0.005em;
}
/* AYARLAR */
.zk-ayar-row {
flex-wrap: wrap;
gap: 12px;
}
.zk-ayar-toggle .zk-card-value { color: #475569; font-weight: 500; }
.zk-hedef-picker {
width: 100%;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
padding-top: 6px;
margin-top: 4px;
border-top: 1px solid rgba(6,77,40,.08);
}
.zk-hedef-btn {
padding: 10px 4px;
background: rgba(6,77,40,.04);
border: 1px solid rgba(6,77,40,.10);
border-radius: 10px;
color: #299981;
font: 700 13.5px/1 -apple-system, sans-serif;
letter-spacing: -0.015em;
cursor: pointer;
transition: transform .15s cubic-bezier(.34, 1.56, .64, 1), background .2s, color .2s;
-webkit-tap-highlight-color: transparent;
}
.zk-hedef-btn:active { transform: scale(.94); }
.zk-hedef-btn.is-active {
background: linear-gradient(180deg, #2fae93, #1d6f5e);
color: #fff;
border-color: #1d6f5e;
box-shadow: 0 3px 10px rgba(6,77,40,.28), inset 0 1px 0 rgba(255,255,255,.20);
}
/* iOS switch */
.zk-switch {
position: relative;
width: 46px; height: 28px;
flex-shrink: 0;
cursor: pointer;
}
.zk-switch input {
appearance: none;
-webkit-appearance: none;
position: absolute; inset: 0;
width: 100%; height: 100%;
margin: 0;
cursor: pointer;
opacity: 0;
}
.zk-switch-track {
position: absolute; inset: 0;
background: rgba(120,120,128,.24);
border-radius: 14px;
transition: background .25s cubic-bezier(.4, 0, .2, 1);
}
.zk-switch-track::before {
content: '';
position: absolute;
top: 2px; left: 2px;
width: 24px; height: 24px;
background: #fff;
border-radius: 50%;
box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.10);
transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}
.zk-switch input:checked ~ .zk-switch-track {
background: #299981;
}
.zk-switch input:checked ~ .zk-switch-track::before {
transform: translateX(18px);
}
.zk-ayar-danger { border-color: rgba(239,68,68,.20) !important; }
.zk-ayar-danger:active { background: rgba(239,68,68,.05) !important; }
.zk-icon-danger {
background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
border-color: rgba(239,68,68,.40) !important;
color: #fff !important;
}
/* =====================================================================
* STREAK CARD + GÜNÜN AYETI CARD — ELITE PREMIUM (ana ekran)
* ===================================================================== */
.vh2-dynamic {
padding: 16px 16px 8px;
display: flex; flex-direction: column;
gap: 12px;
position: relative;
z-index: 5;
}
/* ==================== STREAK CARD ==================== */
.gs-card {
position: relative;
display: flex;
align-items: center;
gap: 16px;
width: 100%;
padding: 16px 20px 16px 22px;
background: #ffffff;
border: 1px solid rgba(41,153,129,.10);
border-radius: 18px;
color: #0a2e1c;
text-align: left;
cursor: pointer;
overflow: hidden;
box-shadow:
0 1px 2px rgba(6,77,40,.04),
0 10px 26px -14px rgba(6,77,40,.14);
transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
-webkit-tap-highlight-color: transparent;
}
.gs-card:active { transform: scale(.985); }
/* Sol dikey aksan şerit (aktifse turuncu, değilse gri-yeşil) */
.gs-card::before {
content: '';
position: absolute;
left: 0; top: 12px; bottom: 12px;
width: 3px;
border-radius: 0 3px 3px 0;
background: linear-gradient(180deg, #c9a961, #b8935a);
}
.gs-card.is-active::before {
background: linear-gradient(180deg, #ff8c42, #ea580c);
}
/* Sağ üst dekoratif altın halka (subtle) */
.gs-card::after {
content: '';
position: absolute;
right: -40px; top: -40px;
width: 120px; height: 120px;
background: radial-gradient(circle, rgba(201,169,97,.10) 0%, transparent 60%);
pointer-events: none;
}
.gs-card.is-active::after {
background: radial-gradient(circle, rgba(255,140,66,.16) 0%, transparent 60%);
}
/* Alev kutusu */
.gs-flame {
position: relative;
width: 50px; height: 50px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: linear-gradient(135deg, #f5f5f2, #e8e8e2);
border: 1px solid rgba(148,163,184,.28);
color: #94a3b8;
transition: color .3s, background .3s, box-shadow .3s, border-color .3s;
z-index: 1;
}
.gs-flame.is-lit {
background: linear-gradient(135deg, #ffedd5, #fed7aa);
border-color: rgba(234,88,12,.35);
color: #ea580c;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
0 0 20px rgba(255,140,66,.35);
animation: gsFlamePulse 2.4s ease-in-out infinite;
}
@keyframes gsFlamePulse {
0%,100% { transform: scale(1); filter: brightness(1); }
50% { transform: scale(1.08); filter: brightness(1.15); }
}
/* Gövde */
.gs-body {
flex: 1;
min-width: 0;
position: relative;
z-index: 1;
}
.gs-count {
font: 800 24px/1 -apple-system, 'SF Pro Display', system-ui, sans-serif;
letter-spacing: -0.03em;
color: #0a2e1c;
margin-bottom: 3px;
}
.gs-card.is-active .gs-count { color: #ea580c; }
.gs-count-unit {
font: 600 13px/1 -apple-system, sans-serif;
color: #86868b;
margin-left: 4px;
letter-spacing: -0.005em;
}
.gs-label {
font: 500 12.5px/1.35 -apple-system, sans-serif;
color: #64748b;
letter-spacing: -0.005em;
}
.gs-chev {
color: #cbd5e1;
flex-shrink: 0;
position: relative;
z-index: 1;
}
/* ==================== GÜNÜN AYETI CARD ==================== */
.ga-card {
position: relative;
display: flex;
flex-direction: column;
gap: 14px;
padding: 22px 22px 20px;
background: #ffffff;
border: 1px solid rgba(41,153,129,.10);
border-radius: 20px;
color: #0a2e1c;
text-align: center;
cursor: pointer;
overflow: hidden;
box-shadow:
0 1px 2px rgba(6,77,40,.04),
0 14px 34px -16px rgba(6,77,40,.20);
transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s;
-webkit-tap-highlight-color: transparent;
}
.ga-card:active {
transform: scale(.985);
box-shadow:
0 1px 2px rgba(6,77,40,.04),
0 10px 24px -14px rgba(6,77,40,.24);
}
/* Ambient katmanlar — soluk altın halo + geometrik pattern */
.ga-card::before {
content: '';
position: absolute;
right: -60px; top: -60px;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(201,169,97,.12) 0%, transparent 60%);
pointer-events: none;
}
.ga-card::after {
content: '';
position: absolute;
left: -40px; bottom: -40px;
width: 160px; height: 160px;
background: radial-gradient(circle, rgba(41,153,129,.06) 0%, transparent 60%);
pointer-events: none;
}
/* Üst rozet — altın etiket */
.ga-card-tag {
display: inline-flex;
align-items: center;
gap: 6px;
align-self: center;
padding: 5px 14px 5px 12px;
background: linear-gradient(180deg, #fef7e0, #fde8b8);
color: #8a6b1f;
border: 1px solid rgba(201,169,97,.35);
border-radius: 999px;
font: 800 10px/1 -apple-system, sans-serif;
letter-spacing: 1.6px;
text-transform: uppercase;
box-shadow: 0 1px 0 rgba(255,255,255,.75) inset, 0 2px 6px rgba(201,169,97,.20);
position: relative;
z-index: 1;
}
.ga-card-tag svg { color: #b8935a; }
/* Arapça bölümü — dekoratif tırnak süslemeler ile */
.ga-card-arabic-wrap {
position: relative;
padding: 16px 12px 14px;
margin: 2px 0;
z-index: 1;
}
.ga-card-arabic-wrap::before,
.ga-card-arabic-wrap::after {
content: '';
position: absolute;
top: 50%;
width: 22%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(201,169,97,.55), transparent);
}
.ga-card-arabic-wrap::before { left: 0; }
.ga-card-arabic-wrap::after { right: 0; }
.ga-card-arabic {
font: 400 24px/1.85 'Amiri', 'Traditional Arabic', 'Uthmani', 'Scheherazade', serif;
color: #1d6f5e;
text-align: center;
direction: rtl;
letter-spacing: 0.02em;
padding: 0 8px;
}
/* Meâl — italic serif, ortalanmış */
.ga-card-meal {
font: italic 500 15px/1.55 'New York', 'Palatino', Georgia, serif;
color: #334155;
letter-spacing: -0.005em;
padding: 0 8px;
position: relative;
z-index: 1;
}
/* Kaynak — altın etiket */
.ga-card-source {
display: inline-flex;
align-self: center;
align-items: center;
gap: 6px;
padding: 4px 12px;
background: rgba(41,153,129,.06);
color: #299981;
border: 1px solid rgba(41,153,129,.14);
border-radius: 8px;
font: 700 11px/1 -apple-system, sans-serif;
letter-spacing: 0.6px;
text-transform: uppercase;
position: relative;
z-index: 1;
}
.ga-card-source::before {
content: '';
display: inline-block;
width: 4px; height: 4px;
border-radius: 50%;
background: #c9a961;
}
.ga-wrap {
padding: 4px 4px 12px;
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
letter-spacing: -0.01em;
}
/* HERO — mihrab gecesi ambiance */
.ga-hero {
position: relative;
padding: 24px 20px 22px;
margin: 4px 0 16px;
border-radius: 22px;
background:
radial-gradient(120% 90% at 50% 100%, rgba(251,231,158,.28) 0%, transparent 55%),
radial-gradient(70% 60% at 20% 20%, rgba(251,231,158,.16) 0%, transparent 55%),
linear-gradient(160deg, #299981 0%, #1d6f5e 55%, #032414 100%);
color: #fff;
text-align: center;
overflow: hidden;
box-shadow:
0 1px 2px rgba(6,77,40,.30),
0 20px 44px -20px rgba(6,77,40,.55),
inset 0 1px 0 rgba(255,255,255,.14);
}
.ga-hero-stars {
position: absolute; inset: 0;
background:
radial-gradient(1.5px 1.5px at 15% 25%, rgba(251,231,158,.40) 50%, transparent 51%),
radial-gradient(2px 2px at 80% 20%, rgba(251,231,158,.32) 50%, transparent 51%),
radial-gradient(1px 1px at 40% 75%, rgba(251,231,158,.36) 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 70% 55%, rgba(251,231,158,.28) 50%, transparent 51%),
radial-gradient(1px 1px at 20% 90%, rgba(251,231,158,.30) 50%, transparent 51%),
radial-gradient(1.2px 1.2px at 90% 78%, rgba(251,231,158,.34) 50%, transparent 51%);
animation: gaStars 30s linear infinite;
opacity: .85;
pointer-events: none;
}
@keyframes gaStars {
from { transform: translateY(0); }
to { transform: translateY(-24px); }
}
.ga-hero-ornament {
position: relative;
z-index: 1;
width: 52px;
height: 52px;
margin: 0 auto 10px;
filter: drop-shadow(0 0 14px rgba(251,231,158,.5));
animation: gaFloat 5s ease-in-out infinite;
}
@keyframes gaFloat {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
.ga-hero-label {
position: relative; z-index: 1;
font: 700 10.5px/1 -apple-system, sans-serif;
color: rgba(251,231,158,.72);
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 8px;
}
.ga-hero-date {
position: relative; z-index: 1;
font: 800 22px/1.15 -apple-system, 'SF Pro Display', system-ui, sans-serif;
letter-spacing: -0.028em;
margin-bottom: 8px;
background: linear-gradient(180deg, #fff 0%, #fbe79e 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.ga-hero-source {
position: relative; z-index: 1;
font: 700 14.5px/1 -apple-system, sans-serif;
color: #fbe79e;
letter-spacing: -0.01em;
margin-bottom: 12px;
text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.ga-dot { opacity: .5; margin: 0 4px; }
.ga-hero-konu {
position: relative; z-index: 1;
display: inline-block;
padding: 5px 14px;
background: rgba(251,231,158,.18);
color: #fbe79e;
border: 1px solid rgba(251,231,158,.34);
border-radius: 10px;
font: 700 10.5px/1 -apple-system, sans-serif;
letter-spacing: 1px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* ARAPÇA KARTI — büyük, ortalanmış, süslü tırnaklar */
.ga-arabic-card {
position: relative;
padding: 30px 24px;
background:
radial-gradient(120% 100% at 100% 0%, rgba(251,231,158,.18), transparent 55%),
linear-gradient(180deg, #ffffff 0%, #f8faf8 100%);
border: 1px solid rgba(6,77,40,.08);
border-radius: 20px;
margin-bottom: 12px;
box-shadow:
0 1px 2px rgba(0,0,0,.03),
0 12px 30px -14px rgba(6,77,40,.16);
text-align: center;
overflow: hidden;
}
.ga-quote-mark {
font: 400 40px/0.5 'Amiri', 'Traditional Arabic', 'Uthmani', serif;
color: rgba(41,153,129,.28);
user-select: none;
}
.ga-quote-open { display: block; text-align: right; margin-bottom: -20px; }
.ga-quote-close { display: block; text-align: left; margin-top: -20px; }
.ga-arabic {
font: 400 28px/2 'Amiri', 'Traditional Arabic', 'Uthmani', serif;
color: #1d6f5e;
direction: rtl;
letter-spacing: 0.02em;
padding: 8px 4px;
}
/* MEÂL & TEFSİR kartları */
.ga-meal-card, .ga-tefsir-card {
padding: 18px 20px;
background: rgba(255,255,255,.92);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
border: 1px solid rgba(6,77,40,.08);
border-radius: 16px;
margin-bottom: 12px;
box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 6px 16px -10px rgba(6,77,40,.12);
}
.ga-section-label {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px 4px 8px;
background: rgba(41,153,129,.08);
color: #299981;
border-radius: 8px;
font: 700 10.5px/1 -apple-system, sans-serif;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-bottom: 12px;
}
.ga-meal, .ga-tefsir {
font: 400 15.5px/1.7 -apple-system, 'New York', Georgia, serif;
color: #1c1c1e;
letter-spacing: -0.005em;
}
/* AKSIYON butonları */
.ga-actions {
display: grid;
grid-template-columns: 1fr 1fr 1.4fr;
gap: 8px;
margin-top: 4px;
}
.ga-btn {
display: flex; align-items: center; justify-content: center; gap: 6px;
padding: 13px 10px;
background: rgba(255,255,255,.92);
border: 1px solid rgba(6,77,40,.10);
border-radius: 12px;
color: #299981;
font: 600 13px/1 -apple-system, sans-serif;
letter-spacing: -0.005em;
cursor: pointer;
transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), background .2s;
-webkit-tap-highlight-color: transparent;
box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 3px 8px -4px rgba(6,77,40,.10);
}
.ga-btn:active {
transform: scale(.95);
background: rgba(41,153,129,.06);
}
.ga-btn-primary {
background:
radial-gradient(90% 90% at 30% 30%, rgba(251,231,158,.24) 0%, transparent 55%),
linear-gradient(180deg, #2fae93 0%, #1d6f5e 100%);
color: #fff;
border-color: #1d6f5e;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.22),
0 4px 12px rgba(6,77,40,.28);
}
.ga-btn-primary:active { background: linear-gradient(180deg, #299981 0%, #043019 100%); }
/* =====================================================================
* iPad / TABLET OPTİMİZASYONU (Apple Guideline 4)
* ===================================================================== */
@media (min-width: 768px) {
:root {
--max-w: 640px;
}
.app {
max-width: 640px !important;
}
.header {
max-width: 640px !important;
}
.tabbar {
max-width: 640px !important;
}
body {
font-size: 17px;
}
/* Vakit satırları biraz daha havadar */
.time-row {
padding: 18px 24px;
gap: 16px;
}
.time-row-icon {
width: 46px;
height: 46px;
}
.time-row-name {
font-size: 17px;
}
.time-row-time {
font-size: 19px;
}
/* Countdown daha büyük */
.vh2-cd {
max-width: 460px;
padding: 26px 28px 22px;
}
.vh2-cd-clock {
font-size: 52px;
}
/* Hero başlıklar biraz büyük */
.vh2-hicri, .vh2-top .vh2-hicri {
font-size: 19px;
}
.vh2-date, .vh2-top .vh2-date {
font-size: 14px;
}
}
/* iPad Pro / geniş tabletler */
@media (min-width: 1024px) {
:root {
--max-w: 720px;
}
.app {
max-width: 720px !important;
}
.header {
max-width: 720px !important;
}
.tabbar {
max-width: 720px !important;
}
body {
font-size: 18px;
}
.vh2-cd-clock {
font-size: 58px;
}
.time-row {
padding: 20px 28px;
}
.time-row-icon {
width: 50px;
height: 50px;
}
}