:root{--bg:#0b1220;--card:#111827;--muted:#9ca3af;--accent:#38bdf8;--ok:#10b981;--err:#ef4444;--border:#1f2937;--text:#e5e7eb;--ink:#0b1220}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:#0b1220;color:var(--text)}
.header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;max-width:1100px;margin:0 auto}
.wrap{max-width:1100px;margin:24px auto;padding:0 16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:22px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.row{display:flex;gap:14px;flex-wrap:wrap}.row>*{flex:1 1 220px}
label{display:block;margin:8px 0 6px}.small{font-size:12px;color:var(--muted)}
input[type=file],select,input[type=number],input[type=range]{width:100%;padding:10px 12px;border-radius:12px;border:1px solid #334155;background:#0b1220;color:var(--text)}
button{background:#1f2937;border:1px solid #334155;color:var(--text);padding:12px 16px;border-radius:12px;cursor:pointer;font-weight:700}
button.primary{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.bar{height:10px;width:100%;background:#0b1220;border-radius:999px;border:1px solid #334155;overflow:hidden;margin-top:6px}
.bar>span{display:block;height:100%;width:0;background:linear-gradient(90deg,#22c55e,#60a5fa);transition:width .2s}
.stat{background:#0b1220;border:1px solid #334155;border-radius:12px;padding:10px;min-width:140px}
.ok{color:var(--ok)}.err{color:var(--err)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
hr{border:0;border-top:1px solid #334155;margin:12px 0}
pre{white-space:pre-wrap;word-break:break-word;background:#0a0f1a;border:1px solid #1f2937;border-radius:12px;padding:12px}
/*
  The badge next to the logo functions as a tagline. It no longer uses a pill
  background; instead it appears as subtle text to the right of the logo. A
  small margin separates it from the logo and wrapping is allowed to prevent
  overflow on smaller screens.
*/
.badge{
  display:inline;
  margin-left:8px;
  padding:0;
  background:none;
  border:none;
  color:var(--muted);
  font-size:14px;
  white-space:normal;
}
.value{font-weight:700}

/* Tabs for compression and splitting */
/*
 * Tab navigation for the various PDF tools. By default the tabs are laid out
 * horizontally. Setting flex-wrap to wrap allows the tabs to flow to the
 * next line on small screens, improving mobile usability. The gap and
 * border styling is preserved from the original design.  */
.tab-nav{
  display:flex;
  gap:14px;
  margin-bottom:16px;
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
.tab-btn{
  background:transparent;
  border:none;
  color:var(--text);
  padding:10px 16px;
  font-size:16px;
  cursor:pointer;
  border-bottom:3px solid transparent;
  transition:border-color 0.2s,color 0.2s;
}
.tab-btn:hover{
  color:var(--accent);
}
.tab-btn.active{
  border-bottom-color:var(--accent);
  color:var(--accent);
}

/* Navigation bar */
.topnav{
  background:var(--card);
  border-bottom:1px solid var(--border);
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  padding:10px 18px;
  justify-content:center;
  margin-bottom:20px;
}
.topnav a{
  color:var(--text);
  text-decoration:none;
  padding:8px 12px;
  border-radius:8px;
  font-size:14px;
}
.topnav a:hover{
  background:var(--accent);
  color:var(--ink);
}

/* When navigating informational pages (Blog, SSS, Hakkımızda, Gizlilik, Şartlar, Çerezler), highlight the active link
 * similarly to the tool tabs. This applies a coloured underline and accent colour to the current page. */
.topnav a.active{
  border-bottom:3px solid var(--accent);
  color:var(--accent);
}

/* Ensure active nav links remain legible when hovered. Without this,
 * the background colour on hover matches the text colour, rendering the
 * label invisible. Explicitly set the hover text colour for active links
 * to the contrasting ink colour. */
.topnav a.active:hover{
  color:var(--ink) !important;
}

/* Image captions below informational section images. Keep the text small and muted to avoid overpowering the main content. */
.img-caption{
  font-size:0.78rem;
  color:var(--muted);
  margin-top:4px;
}

/* Info sections on the home page */
/* Informational sections styled similarly to cards for cohesive layout */
.info-section{
  margin-top:32px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:22px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
}
.info-section img{
  max-width:100%;
  border-radius:12px;
  margin:14px 0;
}
.info-section h2{
  margin-top:0;
  margin-bottom:12px;
  font-size:22px;
  color:var(--accent);
}
.info-section p{
  line-height:1.6;
  margin-bottom:14px;
  font-size:14px;
  color:var(--muted);
}

/* FAQ page network log */
#networkLog{
  /* Use theme variables so the network log adapts to light and dark modes. */
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  font-size: 12px;
  color: var(--text);
  margin-top: 12px;
}

/* Privacy link styling */
#privacyLink{color:var(--accent);text-decoration:underline;cursor:pointer;font-size:12px}

/* Modal overlay for privacy policy */
#privacyModal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;box-sizing:border-box}
#privacyModal .modal-content{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;max-width:800px;max-height:90%;overflow-y:auto;color:var(--text)}
#privacyModal .modal-content h2{margin-top:0;margin-bottom:12px;font-size:22px}
#privacyModal .modal-content p{line-height:1.5;font-size:14px}
#privacyModal .close-btn{background:none;border:none;color:var(--accent);font-size:24px;font-weight:bold;float:right;cursor:pointer}

/* ---------------------------------------------------------------------
 * Custom enhancements for improved accessibility and aesthetics
 * These rules are appended at the end of the stylesheet to override
 * earlier definitions where necessary. They introduce support for light
 * themes, a responsive header with language and theme controls, drag‑and‑drop
 * file selection bars (dropzones), and a unified footer. New classes and
 * data‑attributes added to the HTML will enable these styles.
 */

/* Light theme overrides: when body[data-theme="light"] is present,
 * redefine the CSS variables and background colour for a light scheme. */
body[data-theme="light"]{
  --bg:#f8fafc;
  --card:#f1f5f9;
  --muted:#475569;
  --accent:#0284c7;
  --ok:#15803d;
  --err:#b91c1c;
  --border:#cbd5e1;
  --text:#0f172a;
  --ink:#ffffff;
  background:#f8fafc;
}

/* System theme: on devices using prefers‑color‑scheme, the system option
 * applies light overrides when the OS is in light mode. In dark mode
 * the default colours are inherited. */
@media (prefers-color-scheme: light){
  body[data-theme="system"]{
    --bg:#f8fafc;
    --card:#f1f5f9;
    --muted:#475569;
    --accent:#0284c7;
    --ok:#15803d;
    --err:#b91c1c;
    --border:#cbd5e1;
    --text:#0f172a;
    --ink:#ffffff;
    background:#f8fafc;
  }
}

/* Header layout improvements */
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 18px;
  max-width:1100px;
  margin:0 auto;
}
.header-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  /* Allow the logo and tagline to wrap on narrow screens instead of
     overflowing. */
  flex-wrap:wrap;
}
.header-right{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Language selector styling */
select.lang-select{
  background:var(--card);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:12px;
  padding:6px 8px;
  font-size:14px;
  cursor:pointer;
}

/* Theme toggle group */
.theme-toggle{
  display:flex;
  align-items:center;
  gap:4px;
}
.theme-toggle button{
  background:var(--card);
  border:1px solid var(--border);
  color:var(--text);
  padding:6px 8px;
  border-radius:8px;
  cursor:pointer;
  font-size:16px;
  line-height:1;
}
.theme-toggle button.active{
  border-color:var(--accent);
  color:var(--accent);
}

/* Dropzone styling */
/*
  Dropzones are styled as thin, wide bars to make file selection clear without
  dominating the layout. A consistent height and flex layout keeps the text
  vertically centred. Margins separate each zone from other controls.
*/
.dropzone{
  border:2px dashed var(--border);
  border-radius:12px;
  /* Fixed minimum height for slim bar appearance */
  min-height:50px;
  padding:10px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
  cursor:pointer;
  transition:background 0.2s,border-color 0.2s,color 0.2s;
  margin-bottom:16px;
  text-align:center;
  font-size:14px;
}
.dropzone.hover{
  background:rgba(56,189,248,0.1);
  border-color:var(--accent);
  color:var(--accent);
}
.dropzone span{
  display:block;
  font-size:14px;
}

/*
 * Drag and drop reordering for selected file lists
 * When a list item is dragged over another, highlight the drop target with
 * a subtle background. Each item also includes a small remove button on the
 * right, coloured red to indicate its destructive action. These styles
 * complement the existing dark/light themes via CSS variables. The
 * drag‑over class is toggled by JavaScript when a draggable list item
 * enters or leaves another item.
 */
.reorder-list li{
  position: relative;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.2s;
}
.reorder-list li.drag-over{
  background: rgba(56,189,248,0.1);
}
.remove-btn{
  background: transparent;
  border: none;
  color: var(--err);
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  padding: 0 4px;
}
.remove-btn:hover{
  color: #ff6b6b;
}

/*
 * Download overlay for PDF→image previews
 * Displays a faint "indir" label over each thumbnail by default. When the
 * user hovers over the link, the label becomes fully opaque, guiding
 * them towards downloading the image. The overlay covers the entire
 * thumbnail and does not interfere with click events (pointer-events:none).
 */
.download-overlay{
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.4);
  color:var(--ink);
  font-size:14px;
  font-weight:700;
  opacity:0.3;
  border-radius:6px;
  pointer-events:none;
  text-transform:uppercase;
}
a:hover .download-overlay{
  opacity:0.85;
}

/* Unified site footer */
.site-footer{
  text-align:center;
  padding:20px 16px;
  font-size:12px;
  color:var(--muted);
  margin-top:40px;
  border-top:1px solid var(--border);
}

/*
 * Override default button styling to use theme variables. Many buttons on
 * the site (including the up/down reorder controls) previously used fixed
 * dark colours that remained in light mode. By redefining the base button
 * styles here, we ensure that backgrounds, borders and text colours adapt
 * to the current theme (dark/light/system). Primary actions use the accent
 * colour to stand out, while secondary actions blend into the card colour.
 */
button{
  background:var(--card);
  border:1px solid var(--border);
  color:var(--text);
  padding:12px 16px;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
}
button.primary{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--ink);
}
/* Smaller buttons used for up/down controls in file ordering. They use
 * minimal padding and inherit theme colours. Disabled states reduce
 * opacity to indicate non-interactive buttons. */
button.small{
  padding:4px 8px;
  font-size:12px;
  background:var(--card);
  border:1px solid var(--border);
  color:var(--text);
  cursor:pointer;
  border-radius:8px;
}
button.small:disabled{
  opacity:0.5;
  cursor:not-allowed;
}

/*
 * Form inputs (file selectors, text fields, number inputs, ranges and selects)
 * previously used fixed dark backgrounds and border colours, which made
 * them unreadable in light mode. Override these controls to use the
 * current theme variables for background, border and text colours. This
 * ensures that menus and option areas remain consistent across dark
 * and light themes.
 */
input[type=file],
input[type=number],
input[type=range],
input[type=text],
select,
textarea{
  background:var(--card);
  border:1px solid var(--border);
  color:var(--text);
}
/* Provide some padding and rounded corners similar to other UI elements */
input[type=file], input[type=number], input[type=range], input[type=text], select, textarea{
  padding:10px 12px;
  border-radius:12px;
  width:100%;
}

/*
 * Ensure that progress bars, statistics panels and log outputs adapt to
 * the current theme. Previously these components used fixed dark
 * colours which remained when switching to the light theme. The bar
 * background uses the general page background colour, while stat
 * panels and preformatted logs use the card colour. Borders and text
 * colours also honour the theme variables.
 */
.bar{
  background:var(--bg);
  border:1px solid var(--border);
}
.bar>span{
  /* keep existing gradient for the progress indicator */
}
.stat,
pre{
  background:var(--card);
  border:1px solid var(--border);
  color:var(--text);
}

/*
 * Styles for blog previews on the blog main page. These cards have their
 * own padding and borders and rearrange nicely in a responsive grid via
 * the .grid container. Each preview includes an image, title link and
 * short description. Hovering raises the card slightly to provide a
 * subtle interactive feel.
 */
.blog-preview{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px;
  transition:transform 0.15s ease;
}
.blog-preview:hover{
  transform:translateY(-4px);
}
.blog-preview img{
  width:100%;
  height:auto;
  border-radius:12px;
  margin-bottom:8px;
}
.blog-preview h3{
  margin:6px 0;
  font-size:1.1rem;
}
.blog-preview p{
  font-size:0.85rem;
  color:var(--muted);
  margin-bottom:0;
}