/* =====================================================================
 * 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 */
  --brand:           #8b1a1a;
  --brand-2:         #a52a2a;
  --brand-dark:      #5d0e0e;
  --brand-tint:      #fdf2f2;

  /* 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(139,26,26,.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; }
body{
  font-family: var(--font-system);
  font-size: 16px;
  line-height: 1.4;
  color: var(--c-text);
  background: var(--c-bg);
  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 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.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;
}
.hero::before{
  content:'';
  position: absolute; top: -40%; right: -20%;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(255,255,255,.18) 0%, transparent 70%);
  pointer-events: none;
}
.hero-loc{
  font-size: 13px;
  font-weight: 500;
  opacity: .9;
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 4px;
}
.hero-loc svg{ width: 12px; height: 12px; }
.hero-next-label{
  font-size: 14px;
  opacity: .85;
  font-weight: 500;
  margin-bottom: 8px;
}
.hero-time{
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -2px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.hero-countdown{
  font-size: 15px;
  opacity: .9;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.hero-hijri{
  position: absolute;
  top: 22px; right: 22px;
  font-size: 12px;
  opacity: .85;
  text-align: right;
}

/* --- 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(139,26,26,.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: linear-gradient(180deg, #fff 0%, #fafafa 100%);
  z-index: 9999;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  transition: opacity .4s var(--ease-out);
}
.splash.is-hide{ opacity: 0; pointer-events: none; }
.splash-logo{ width: 120px; height: 120px; margin-bottom: 16px; }
.splash-name{ font-size: 22px; font-weight: 700; color: var(--brand); letter-spacing: -.4px; }
.splash-sub{ font-size: 13px; color: var(--c-text-3); margin-top: 4px; }

/* --- 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;
  }
}