/* ===== RESET ===== */
*{
 box-sizing:border-box;
 -webkit-tap-highlight-color:transparent;
}

html,
body{
  margin:0;
  max-width:100%;
  overflow-x:hidden;

  font-family:-apple-system,BlinkMacSystemFont,sans-serif;

  background:linear-gradient(
    180deg,
    #0f2027,
    #203a43,
    #2c5364
  );

  color:#fff;
}

/* ===== APP ===== */
.app{
 max-width:420px;
 margin:0 auto;
 padding:20px;
 padding-top:14px;
 padding-bottom:120px;
}


/* ===== NAMAZ BAR ===== */
.prayer-bar{
 top:0;
 padding:10px 12px;
 display:flex;
 justify-content:space-between;
 background:rgba(0,0,0,0.35);
 backdrop-filter:blur(20px);
 font-size:12px;
 z-index:999;
 border-radius:0 0 14px 14px;
}

/* ===== DATETIME ===== */
.datetime-bar{
 top:45px;
 padding:8px 14px;
 display:flex;
 gap:12px;
 background:rgba(255,255,255,0.08);
 backdrop-filter:blur(15px);
 border-radius:12px;
 z-index:998;
}

/* ===== HERO ===== */
.hero{
 margin-top:20px;
 text-align:center;
}

.hero img{
 width:100px;
 border-radius:22px;
 box-shadow:0 15px 45px rgba(0,0,0,0.5);
}

/* ===== AYET ===== */
.daily-verse{
 margin-top:15px;
 padding:16px;
 border-radius:20px;
 background:linear-gradient(135deg,#ffffff15,#ffffff05);
 backdrop-filter:blur(14px);
 display:flex;
 gap:12px;
 align-items:center;
}

/* ===== SLIDER ===== */
.slider{
 margin:20px 0;
}

.slide{
 display:none;
 border-radius:24px;
 overflow:hidden;
 position:relative;
}

.slide.active{
 display:block;
}

.slide img{
 width:100%;
 height:200px;
 object-fit:cover;
}

.slide-overlay{
 position:absolute;
 bottom:0;
 width:100%;
 padding:16px;
 background:linear-gradient(transparent,rgba(0,0,0,0.85));
}


/* ===== PREMIUM FOOTER ===== */
.footer{
 position:fixed;
 bottom:0;
 left:50%;
 transform:translateX(-50%);
 width:100%;
 max-width:420px;
 height:96px;

background:
linear-gradient(
 180deg,
 #14532d 0%,
 #0f3d24 100%
);

 backdrop-filter:blur(25px);

 display:flex;
 justify-content:space-around;
 align-items:center;

border-radius:34px 34px 0 0;

 box-shadow:
 0 -8px 24px rgba(0,0,0,0.32),
 inset 0 1px 0 rgba(255,255,255,0.08);

 z-index:9999;
}


/* ===== PREMIUM NAVBAR ===== */

.nav-item{
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;

 min-width:58px;

 color:rgba(254, 252, 252, 0.68);

 transition:.16s ease;
}

.nav-item p{
 margin:4px 0 0;

 font-size:12px;
 font-weight:600;
 letter-spacing:.2px;
}

.nav-icon{
 font-size:18px;
 line-height:1;
 opacity:.92;
}

/* ACTIVE */

.nav-item.active{
 color:#ffffff;

 transform:translateY(-2px);
}

.nav-item.active .nav-icon{
 text-shadow:
 0 0 12px rgba(255,255,255,.22);
}

/* TOUCH */

.nav-item:active{
 transform:scale(.94);
}

/* ===== CENTER BUTTON (UPGRADED) ===== */
.center-btn{
  position:absolute;
  top:-34px;
  left:50%;
  transform:translateX(-50%);

  width:60px;
  height:60px;
border-radius:24px;

  border:none;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:34px;
  font-weight:300;
  color:#fff;


background:
linear-gradient(
 180deg,
 #3f8f68 0%,
 #2f6f52 55%,
 #214c3a 100%
);

  box-shadow:
 0 12px 24px rgba(0,0,0,.24),
 inset 0 1px 0 rgba(255,255,255,.18),
 inset 0 -6px 12px rgba(0,0,0,.14);

  transition:
    transform .16s ease,
    box-shadow .16s ease;

  z-index:20;


}


/* click effect */
.center-btn:active{
 transform:translateX(-50%) scale(0.92);
 box-shadow:0 8px 18px rgba(25,60,45,.34);
}


/* ===== MODAL (FULL FIX) ===== */
.modal{
  position:fixed;
  inset:0;

  background:rgba(0,0,0,0.65);
  backdrop-filter:blur(12px);

  display:flex;
  align-items:flex-end;
  justify-content:center;

  /* ✅ MOBİL FIXLER */
  padding-bottom:env(safe-area-inset-bottom); /* iPhone alt boşluk */
  overflow:hidden; /* dış scroll'u kapat */

  z-index:99999;
}
.sheet{
   width:calc(100% - 16px);
  max-width:420px;

  background:linear-gradient(180deg,#ffffff,#f7f7f7);
  border-radius:28px 28px 0 0;

  padding:22px;

  max-height:90vh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;

  padding-bottom:calc(40px + env(safe-area-inset-bottom));

  box-shadow:
  0 -20px 60px rgba(0,0,0,0.4),
  inset 0 1px 0 rgba(255,255,255,0.6);

  animation:up .35s cubic-bezier(.22,.61,.36,1);

  color:#111;
}

.sheet::-webkit-scrollbar{
  width:4px;
}
.sheet::-webkit-scrollbar-thumb{
  background:#ccc;
  border-radius:10px;
}


/* HEADER */
.sheet-header{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-bottom:14px;
}



.sheet-header h3{
 font-family:
   "Inter",
   "SF Pro Display",
   "Segoe UI",
   sans-serif;

 font-size:18px;

 font-weight:700;

 line-height:1.1;

 letter-spacing:-0.4px;

 color:#111;
}

.sheet-header button{
  width:30px !important;
  height:30px;

  min-width:30px;

  flex:none;

  margin-left:12px;

  padding:0 !important;
  margin-top:0 !important;

  border:none;
  border-radius:10px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(0,0,0,.05);

  color:#444;
  font-size:15px;
  font-weight:700;

  box-shadow:none;

  transition:.15s ease;
}
.sheet-header button:active{
  transform:scale(.94);
}

/* ===== STEP ===== */
.step{display:none}
.step.active{display:block}

/* ===== PROGRESS ===== */
.progress{
 height:5px;
 background:#e5e5e5;
 border-radius:10px;
 margin:12px 0;
}

.progress-bar{
 height:100%;
 background:#1b5e20;
 border-radius:10px;
 transition:.3s;
}

/* ===== SECTION TITLE ===== */
.sheet h4{
 margin:18px 0 8px;
 font-size:13px;
 color:#888;
 letter-spacing:.5px;
 text-transform:uppercase;
}

/* ===== RATING BLOCK (FIXED) ===== */
.rating-block{
  display:flex;
  justify-content:space-between;
  align-items:flex-start; /* 🔥 TEK VE DOĞRU */

  background:#fff;
  border-radius:16px;

  padding:14px;
  margin-bottom:12px;

  box-shadow:0 6px 20px rgba(0,0,0,0.06);

  color:#111;
}

/* ===== FORM ===== */
.sheet select,
.sheet input{
 width:100%;
 padding:14px;
 margin-top:8px;

 border-radius:14px;
 border:1px solid #e5e5e5;

 background:#fafafa;
 font-size:14px;
 color:#111;

 box-shadow:inset 0 2px 6px rgba(0,0,0,0.04);
}

/* placeholder */
.sheet input::placeholder{
 color:#888;
}

/* ===== STAR ===== */
.star{
 display:flex;
 gap:6px;
}

.star span{
 font-size:20px;
 color:#ccc;
 cursor:pointer;
 transition:.2s;
}

.star span.active{
 color:#ffb400;
 transform:scale(1.15);
 text-shadow:0 2px 6px rgba(255,180,0,0.5);
}

/* ===== BUTTON ===== */
.sheet button{
 width:100%;
 padding:16px;
 margin-top:14px;

 border:none;
 border-radius:16px;

 background:linear-gradient(135deg,#1b5e20,#2e7d32);
 color:#fff;

 font-size:15px;
 font-weight:700;

 box-shadow:
 0 10px 25px rgba(0,0,0,0.25),
 inset 0 1px 0 rgba(255,255,255,0.3);

 transition:.2s;
}

.sheet button:active{
 transform:scale(.97);
}

/* ===== UTIL ===== */
.hidden{
 display:none;
}

/* ===== CTA (ANA BUTON) ===== */
.cta-pro{
 width:100%;
 display:flex;
 align-items:center;
 justify-content:space-between;

 padding:18px;
 border-radius:22px;
 border:none;

 background:linear-gradient(135deg,#00c6ff,#0072ff);
 color:#fff;

 box-shadow:
 0 15px 40px rgba(0,0,0,0.4),
 inset 0 1px 0 rgba(255,255,255,0.25);

 position:relative;
 overflow:hidden;
 transition:.25s;
}

.cta-pro::before{
 content:"";
 position:absolute;
 top:0;
 left:-100%;
 width:100%;
 height:100%;

 background:linear-gradient(
 120deg,
 transparent,
 rgba(255,255,255,0.4),
 transparent
 );

 transition:.6s;
}

.cta-pro:active{
 transform:scale(.97);
}

/* CTA ICON */
.cta-icon{
 width:46px;
 height:46px;
 border-radius:14px;

 display:flex;
 align-items:center;
 justify-content:center;

 background:rgba(255,255,255,0.2);
 backdrop-filter:blur(10px);

 font-size:22px;
 font-weight:700;
}

/* CTA TEXT */
.cta-content{
 flex:1;
 text-align:left;
 margin-left:12px;
}

.cta-title{
 font-size:16px;
 font-weight:700;
}

.cta-sub{
 font-size:12px;
 opacity:.85;
}

/* CTA ARROW */
.cta-arrow{
 font-size:20px;
 opacity:.9;
 transition:.2s;
}

.cta-pro:active .cta-arrow{
 transform:translateX(4px);
}

/* ===== ANIMATION ===== */
@keyframes up{
 from{transform:translateY(100%)}
 to{transform:translateY(0)}
}

/* ===== PRAYER ITEM ===== */
.prayer-item{
 display:flex;
 flex-direction:column;
 align-items:center;
 font-size:11px;
 opacity:.6;
 transition:.3s;
}

.prayer-item span{
 font-weight:700;
 font-size:12px;
}

/* AKTİF VAKİT */
.prayer-item.active{
 opacity:1;
 color:#00ffae;
 transform:translateY(-2px);
}

/* DATETIME BAR */
.datetime-bar{
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:10px;
}

/* COUNTDOWN */
#countdown{
 font-size:11px;
 color:#00ffae;
 font-weight:600;
}


.rating-text{
  display:flex;
  flex-direction:column;
}

.rating-title{
  font-size:14px;
  font-weight:600;
  color:#111;
}

.rating-desc{
  font-size:11px;
  color:#888;
  margin-top:2px;
  line-height:1.3;
}

#ablutionArea{
  display:none;
}

/* ===== PREMIUM STEP ACTIONS ===== */

.step-actions{
  display:flex;
  gap:14px;
  margin-top:22px;
  align-items:center;
}

.step-actions button{
  margin-top:0 !important;
}

/* GERİ BUTONU */

.back-btn{
  min-width:54px !important;
  width:54px !important;
  height:54px !important;

  border:none;
  border-radius:18px;

  background:linear-gradient(135deg,#ef4444,#dc2626);
  color:#fff;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:20px;
  font-weight:700;

  box-shadow:
    0 10px 24px rgba(220,38,38,.28),
    inset 0 1px 0 rgba(255,255,255,.25);

  transition:.18s ease;
}

.back-btn:active{
  transform:scale(.95);
}

/* DEVAM / KAYDET */

.next-btn,
.step-actions button:last-child{
  flex:1;
  height:54px;

  border:none;
  border-radius:18px;

  background:
    linear-gradient(180deg,#2f8f3a 0%,#1f6f29 100%);

  color:#fff;

  font-size:15px;
  font-weight:700;
  letter-spacing:.2px;

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow:
    0 14px 28px rgba(27,94,32,.30),
    inset 0 1px 0 rgba(255,255,255,.22);

  transition:.18s ease;
}

.next-btn:active,
.step-actions button:last-child:active{
  transform:translateY(1px) scale(.98);
}

/* ===== FILE INPUT PREMIUM ===== */

input[type="file"]{
  width:100%;
  padding:16px !important;

  border-radius:18px !important;
  border:1px solid #ececec !important;

  background:#fff !important;

  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.03),
    0 4px 12px rgba(0,0,0,.04);

  font-size:13px;
}

input[type="file"]::file-selector-button{
  border:none;
  border-radius:12px;

  padding:10px 14px;
  margin-right:12px;

  background:linear-gradient(135deg,#1f6f29,#2f8f3a);
  color:#fff;

  font-weight:600;
  cursor:pointer;
}
/* ===== MINI PREMIUM YES / NO TOGGLE ===== */

.binary-toggle{
position:relative;

width:160px;
height:38px;

border-radius:999px;

background:#f3f4f6;

display:flex;
align-items:center;

overflow:hidden;

margin:8px 0 16px;

box-shadow:
inset 0 2px 4px rgba(0,0,0,.04),
0 1px 3px rgba(0,0,0,.05);

cursor:pointer;
}

/* OPTIONS */

.binary-option{
flex:1;

display:flex;
align-items:center;
justify-content:center;

font-size:13px;
font-weight:700;

z-index:2;

transition:.20s ease;
}

/* DEFAULT */

.binary-toggle .yes-text{
color:#9ca3af;
}

.binary-toggle .no-text{
color:#6b7280;
}

/* SLIDER */

.toggle-slider{
position:absolute;

top:3px;
left:3px;

width:74px;
height:32px;

border-radius:999px;

background:
linear-gradient(
180deg,
#ffffff 0%,
#f1f5f9 100%
);

transition:.22s cubic-bezier(.4,0,.2,1);

box-shadow:
0 2px 8px rgba(0,0,0,.12);
}

/* YES ACTIVE */

.binary-toggle.active-yes .toggle-slider{
left:calc(100% - 77px);

background:
linear-gradient(
180deg,
#2fb344 0%,
#1f8f38 100%
);
}

.binary-toggle.active-yes .yes-text{
color:#fff;
}

.binary-toggle.active-yes .no-text{
color:#9ca3af;
}

/* NO ACTIVE */

.binary-toggle.active-no .toggle-slider{
left:3px;

background:
linear-gradient(
180deg,
#6b7280 0%,
#4b5563 100%
);
}

.binary-toggle.active-no .no-text{
color:#fff;
}

.binary-toggle.active-no .yes-text{
color:#9ca3af;
}

/* DEFAULT CENTER */

.binary-toggle.default .toggle-slider{
left:calc(50% - 37px);

background:
linear-gradient(
180deg,
#ffffff 0%,
#f1f5f9 100%
);
}

/* TOUCH */

.binary-toggle:active{
transform:scale(.98);
}



/* ===== BINARY GRID ===== */

.binary-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 14px;

  margin:14px 0 10px;
}

.binary-item{
  min-width:0;
}

.binary-item label{
  display:block;

  margin-bottom:8px;

  font-size:14px;
  font-weight:600;

  line-height:1.3;

  color:#111;
}

/* TOGGLE FULL WIDTH */

.binary-item .binary-toggle{
  width:100%;
}

/* MOBILE FIX */

@media(max-width:380px){

  .binary-grid{
    grid-template-columns:1fr;
  }

}

/* ========================= */
/* FEEDBACK BOX */
/* ========================= */

.feedback-box{
margin-top:20px;
}

.feedback-box label{
display:block;

font-size:14px;
font-weight:700;

margin-bottom:10px;

color:#111827;
}

.feedback-box textarea{
width:100%;

min-height:110px;

border:none;
outline:none;

resize:none;

padding:16px;

border-radius:18px;

background:#fff;

font-size:14px;
line-height:1.5;

color:#111827;

box-shadow:
0 6px 20px rgba(0,0,0,.05);

transition:.2s ease;
}

.feedback-box textarea:focus{

box-shadow:
0 0 0 3px rgba(46,125,50,.15),
0 10px 25px rgba(0,0,0,.08);

}

/* ===== MODAL HEADER ===== */

.modal-header{
margin-bottom:18px;
}

.modal-badge{
display:inline-flex;
align-items:center;
justify-content:center;

height:30px;

padding:0 14px;

border-radius:999px;

background:
rgba(34,197,94,.10);

color:#15803d;

font-size:11px;
font-weight:700;

letter-spacing:.3px;

margin-bottom:14px;
}

.modal-header h3{
font-size:30px;
font-weight:800;

line-height:1.08;

letter-spacing:-1px;

color:#111827;

margin-bottom:12px;
}

.modal-header p{
font-size:13px;
line-height:1.7;

color:#6b7280;
}



.legal-approve{
margin-top:18px;
}

.legal-row{
display:flex;
align-items:flex-start;
gap:10px;
font-size:13px;
font-weight:600;
color:#111827;
margin-bottom:12px;
}

.legal-row input{
margin-top:2px;
accent-color:#1b5e20;
transform:scale(1.1);
}

.legal-link{
border:none;
background:none;
padding:0;
margin-left:28px;
margin-top:4px;

font-size:12px;
font-weight:700;

color:#15803d;

text-decoration:underline;

cursor:pointer;
}

.legal-modal{
position:fixed;
inset:0;

background:rgba(0,0,0,.65);
backdrop-filter:blur(10px);

display:none;

align-items:flex-end;
justify-content:center;

z-index:999999;
}

/* OPEN */

.legal-modal.show{
display:flex;
}

.legal-sheet{
width:100%;
max-width:420px;
background:#fff;
border-radius:28px 28px 0 0;
padding:22px;
max-height:82vh;
overflow:hidden;
animation:up .25s ease;
}

.legal-top{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:18px;
}

.legal-top h3{
font-size:22px;
font-weight:800;
color:#111827;
}

.legal-top button{
width:34px;
height:34px;
border:none;
border-radius:12px;
background:#f3f4f6;
font-size:14px;
}

.legal-scroll{
overflow-y:auto;
max-height:58vh;
padding-right:4px;
}

.legal-scroll p{
font-size:13px;
line-height:1.8;
color:#4b5563;
margin-bottom:16px;
}


/* ===== LEGAL INLINE FIX ===== */

.legal-approve{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;

margin-top:16px;
}

.legal-row{
display:flex;
align-items:center;
gap:8px;

margin:0;
flex:1;
}

.legal-row span{
font-size:13px;
font-weight:600;
line-height:1.4;
color:#111827;
}

.legal-row input{
margin:0;
width:auto !important;
}

.sheet button.legal-link{
width:auto !important;
height:auto !important;

padding:0 !important;
margin:0 !important;

border:none !important;
border-radius:0 !important;

background:none !important;
box-shadow:none !important;

font-size:12px;
font-weight:700;

color:#15803d;

text-decoration:underline;

flex:none;
}